1. Specifying Colors Using "RGB" Values In the lesson on Draw Figures with Different Colors and Outlines we learned how to use the fill color block and its pop-up menu of colors. When you hover the mouse over one of the colors you will see a pop-up like the one below with a set of RGB numbers:
These three numbers are another way to specify a color. The "RGB" stands for red, green, blue. All the colors you see on a computer screen, each individual pixel, is composed of varying amounts of red, green, and blue mixed together. The values for the amount of red, green, or blue range from 0 (none of that color) to 255 (max amount of that color).
2. Hexadecimal System for Color Numbers Another way to specify these color values (instead of 0 to 255) is to use a "hexadecimal" numbering system This is a base-16 system instead of our usual base-10 system, meaning that it uses 16 digits. The digits in the hexadecimal system are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F (representing the numbers 0-15 in the base-10 system). So, a full RGB color number in hexadecimal notation consists of six digits. The first two digits in the RGB color number represent the amount of red, the second two digits the amount of green, and the final two digits the amount of blue.
3. Examples of Hexadecimal Color Values Here are some examples of hex color values: #000000 = black (no red, no green, no blue) #FFFFFF = white (full red, full green, full blue) #888888 = medium shade of gray (equal amounts of red, green, blue) #FF0000 = bright red (full amount of red, no green, no blue) #880000 = medium red (some red, no green, no blue) #00FF00 = bright green (no red, full green, no blue) #009900 = medium green (no red, some green, no blue; this is the default color for the RoboBlockly grid) #0000FF = bright blue (no red, no green, full blue) #880088 = medium purple (some red, no green, some blue) #D4007C = light purple or magenta (D4 = a lot of red, 00 = no green, 7C = a medium amount of blue)
4. The "color with" Block The Drawing menu has a color with code block that allows us to set the red-green-blue values:
You can also use regular decimal values in the color with block to specify the red, green, and blue values. The RGB values range from 0 to 255 when using decimal values. Here's an example that creates yellow (full amounts of red and green and no blue):
5. Other tips The color with code blocks can also be used in blocks like stroke color and background color. You can use the print block with a color block to display the hexadecimal color value of the chosen color. For example, running this print block with a bright green color will display #33ff33 (see Example 4):
|
RGB, red-green-blue, hexadecimal numbering system, base-16, hex color values, color with block
|
The code draws a green rectangle using the full amount of green (hexadecimal value FF) and no red or blue, and a gray rectangle using equal amounts of each color (using decimal values 136 for red, 136 for green, and 136 for blue). |
The code draws three rectangles with varying amounts of blue (and no red and green), from "FF" to "BB" to "77". Note that as you lessen the amount of blue the color gets darker, heading towards black (which is "00" for all three of red, green, and blue). |
The code draws three rectangles with varying but equal amounts of red and blue (and no green), from "77" to "BB" to "FF". Note that as you lessen the amount of red and blue the purple color gets darker, heading towards black (which is "00" for all three of red, green, and blue). |
The code prints an RGB color value for the color in the color block. Try running the code with different colors. |
Grid Size: S M L | Simple View: | MinView: |
Coord: x-axis y-axis | Grid Lines: x-axis y-axis | |||
Grid: | 12x12 inches | 24x24 inches | 36x36 inches | |
72x72 inches | 96x96 inches | 192x192 inches | ||
1x1 inches | 2x2 inches | Fraction: | ||
xy-Range: | ||||
|
||||
|
||||
Quad: | 1 Quadrant | 4 Quadrants | 1&4 Quadrants | |
Units: | US Customary | Metric | Ruler: |
Labels: |
|
|
|
Font
px
|
|
Tics Lines: |
|
Width
px
|
Hash Lines: |
|
Width
px
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
(
,
in
) in
|
|
degrees
|
|
|
|||||||||||
|
|||||||||||