- Web colors are created using:
1 byte* for the amount of red
1 byte for the amount of green
1 byte for the amount of blue
(a "byte" is 8 zeroes and ones, like: 00111010) - This image shows how combining images made up of pure Red, Green, and Blue can make an image rich in color
- Each byte in binary is a number from 00000000 to 11111111
- Each byte can also be represneted by 2-digit HEXADECIMAL, or base-16, digits
- The digits in base-16 are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
- Each byte is represented by two digits, which are in the 16s place and the 1s place
-
Counting in base-16, using 2 digits, looks like this:
0 to 15:
00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F,
16 to 31:
10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F
.
.
.
90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 9A, 9B, 9C, 9D, 9E, 9F
A0, A1, A2, A3, A4, A5, A6, A7, A8, A9, AA, AB, AC, AD, AE, AF
.
.
.
F0, F1, F2, F3, F4, F5, F6, F7, F8, F9, FA, FB, FC, FD, FE, FF
(255) - EXAMPLE: 8A =
8(16) + 10(1) = 154
So 09 = 9, 0A = 10, 1A = 26, A0 = 160, FF = 255 - 00 is the lowest (0), FF is the highest (255)
- Check out my counter to see different bases in action
- In terms of color: 00 is the DARKEST, FF is the LIGHTEST
- EXAMPLE RRGGBB: E6 00 F8 will be a bright purple since red and blue are very high numbers and there is no green
- EXAMPLE RRGGBB: 11 6B 0A will be a dark green since the middle (green) value is largest but not very large
- With this system, there are 16,777,216 different possible colors
Play with this tool to get a feel for how the RGB system works!
(switch back and forth between decimal and hexadecimal to get a feel for the relationship)
Game Play:
- You are trying to guess the background color by entering 2-digit hexadecimal numbers for each color in the form: RRGGBB
- Hit ENTER or the Enter button with the arrow at the bottom of the keyboard to make your guess
- GREEN around a digit indicates correct digit and place
- YELLOW indicates correct digit, wrong place
- BLACK indicates the digit is not part of the solution
- ⇡Arrows⇣ will indicate if a ones digit needs to go up or down (these are much harder to guess)
- In the example above, the color to the right of my guess looks a little dark, so maybe I'd try a slightly higher green value - maybe change the D to an E (the 1's digit doesn't make enough difference)
- Also in the example above, it looks like the background has a bit more blue than my result, so I'd increase the amount of blue
- HINT: even the reddest, bluest, or greenest colors have some amount of the other colors in them
- HINT: grayscale colors are when r = g = b, so if it is not very colorful, it could be that the numbers are very close
- HINT: watch out! Just like in Wordle, a digit can appear more than once (FFFFFF is white!)
