Color Code worksheet

1. HEX: #3C82FA

1. Write each channel in base 16, as HEX codes do: divide by 16 for the first digit and keep the remainder for the second

   $\text{60, 130, 250}$$=\text{3C 82 FA}$$=\text{\#3C82FA}$

2. Put the three hex pairs together after #

   $\text{HEX}$$=\text{\#3C82FA}$

3. Find how bright the color looks (its luminance L). Undo the screen's brightness curve, then weight red 0.2126, green 0.7152, blue 0.0722, since eyes see green as brightest

   $0.2126\times 0.0452+0.7152\times 0.2232+0.0722\times 0.956$$=0.2383$

4. Compare with white, whose luminance is 1. Add 0.05 to both and divide the lighter by the darker

   $\frac{1.05}{0.2383+0.05}$$=3.64$

5. Compare with black, whose luminance is 0, the same way

   $\frac{0.2383+0.05}{0.05}$$=5.77$

2. HEX: #2E78B4

1. Write each channel in base 16, as HEX codes do: divide by 16 for the first digit and keep the remainder for the second

   $\text{46, 120, 180}$$=\text{2E 78 B4}$$=\text{\#2E78B4}$

2. Put the three hex pairs together after #

   $\text{HEX}$$=\text{\#2E78B4}$

3. Find how bright the color looks (its luminance L). Undo the screen's brightness curve, then weight red 0.2126, green 0.7152, blue 0.0722, since eyes see green as brightest

   $0.2126\times 0.0273+0.7152\times 0.1878+0.0722\times 0.4564$$=0.1731$

4. Compare with white, whose luminance is 1. Add 0.05 to both and divide the lighter by the darker

   $\frac{1.05}{0.1731+0.05}$$=4.71$

5. Compare with black, whose luminance is 0, the same way

   $\frac{0.1731+0.05}{0.05}$$=4.46$

3. HEX: #198DC8

1. Find the chroma C, how far the strongest channel is from the weakest. It uses lightness L and saturation S as fractions

   $\left(1-\text{|}2\times 0.44-1\text{|}\right)\times 0.78$$=0.6864$

2. Find X, the middle channel, from the hue H. Also find m, the amount that lifts every channel to the right lightness

   $\text{X =}0.4576\text{, m =}0.0968$

3. Hue 200° falls in the 180°–240° slice of the color wheel. That sets which channel gets C, X and 0. Add m to each, then multiply by 255 for the 0 to 255 scale

   $\text{(R, G, B)}$$=\text{(25, 141, 200)}$

4. Write each channel in base 16, as HEX codes do: divide by 16 for the first digit and keep the remainder for the second

   $\text{25, 141, 200}$$=\text{19 8D C8}$$=\text{\#198DC8}$

5. Put the three hex pairs together after #

   $\text{HEX}$$=\text{\#198DC8}$

6. Find how bright the color looks (its luminance L). Undo the screen's brightness curve, then weight red 0.2126, green 0.7152, blue 0.0722, since eyes see green as brightest

   $0.2126\times 0.0097+0.7152\times 0.2664+0.0722\times 0.5776$$=0.2343$

7. Compare with white, whose luminance is 1. Add 0.05 to both and divide the lighter by the darker

   $\frac{1.05}{0.2343+0.05}$$=3.69$

8. Compare with black, whose luminance is 0, the same way

   $\frac{0.2343+0.05}{0.05}$$=5.69$

4. HEX: #26D9CA

1. Find the chroma C, how far the strongest channel is from the weakest. It uses lightness L and saturation S as fractions

   $\left(1-\text{|}2\times 0.5-1\text{|}\right)\times 0.7$$=0.7$

2. Find X, the middle channel, from the hue H. Also find m, the amount that lifts every channel to the right lightness

   $\text{X =}0.6417\text{, m =}0.15$

3. Hue 175° falls in the 120°–180° slice of the color wheel. That sets which channel gets C, X and 0. Add m to each, then multiply by 255 for the 0 to 255 scale

   $\text{(R, G, B)}$$=\text{(38, 217, 202)}$

4. Write each channel in base 16, as HEX codes do: divide by 16 for the first digit and keep the remainder for the second

   $\text{38, 217, 202}$$=\text{26 D9 CA}$$=\text{\#26D9CA}$

5. Put the three hex pairs together after #

   $\text{HEX}$$=\text{\#26D9CA}$

6. Find how bright the color looks (its luminance L). Undo the screen's brightness curve, then weight red 0.2126, green 0.7152, blue 0.0722, since eyes see green as brightest

   $0.2126\times 0.0194+0.7152\times 0.6939+0.0722\times 0.5906$$=0.543$

7. Compare with white, whose luminance is 1. Add 0.05 to both and divide the lighter by the darker

   $\frac{1.05}{0.543+0.05}$$=1.77$

8. Compare with black, whose luminance is 0, the same way

   $\frac{0.543+0.05}{0.05}$$=11.86$

5. HEX: #CB4DCB

1. Find the chroma C, how far the strongest channel is from the weakest. It uses lightness L and saturation S as fractions

   $\left(1-\text{|}2\times 0.55-1\text{|}\right)\times 0.55$$=0.495$

2. Find X, the middle channel, from the hue H. Also find m, the amount that lifts every channel to the right lightness

   $\text{X =}0.495\text{, m =}0.3025$

3. Hue 300° falls in the 300°–360° slice of the color wheel. That sets which channel gets C, X and 0. Add m to each, then multiply by 255 for the 0 to 255 scale

   $\text{(R, G, B)}$$=\text{(203, 77, 203)}$

4. Write each channel in base 16, as HEX codes do: divide by 16 for the first digit and keep the remainder for the second

   $\text{203, 77, 203}$$=\text{CB 4D CB}$$=\text{\#CB4DCB}$

5. Put the three hex pairs together after #

   $\text{HEX}$$=\text{\#CB4DCB}$

6. Find how bright the color looks (its luminance L). Undo the screen's brightness curve, then weight red 0.2126, green 0.7152, blue 0.0722, since eyes see green as brightest

   $0.2126\times 0.5972+0.7152\times 0.0742+0.0722\times 0.5972$$=0.2232$

7. Compare with white, whose luminance is 1. Add 0.05 to both and divide the lighter by the darker

   $\frac{1.05}{0.2232+0.05}$$=3.84$

8. Compare with black, whose luminance is 0, the same way

   $\frac{0.2232+0.05}{0.05}$$=5.46$

6. HEX: #2B2BD4

1. Find the chroma C, how far the strongest channel is from the weakest. It uses lightness L and saturation S as fractions

   $\left(1-\text{|}2\times 0.5-1\text{|}\right)\times 0.66$$=0.66$

2. Find X, the middle channel, from the hue H. Also find m, the amount that lifts every channel to the right lightness

   $\text{X =}0\text{, m =}0.17$

3. Hue 240° falls in the 240°–300° slice of the color wheel. That sets which channel gets C, X and 0. Add m to each, then multiply by 255 for the 0 to 255 scale

   $\text{(R, G, B)}$$=\text{(43, 43, 212)}$

4. Write each channel in base 16, as HEX codes do: divide by 16 for the first digit and keep the remainder for the second

   $\text{43, 43, 212}$$=\text{2B 2B D4}$$=\text{\#2B2BD4}$

5. Put the three hex pairs together after #

   $\text{HEX}$$=\text{\#2B2BD4}$

6. Find how bright the color looks (its luminance L). Undo the screen's brightness curve, then weight red 0.2126, green 0.7152, blue 0.0722, since eyes see green as brightest

   $0.2126\times 0.0242+0.7152\times 0.0242+0.0722\times 0.6584$$=0.0699$

7. Compare with white, whose luminance is 1. Add 0.05 to both and divide the lighter by the darker

   $\frac{1.05}{0.0699+0.05}$$=8.75$

8. Compare with black, whose luminance is 0, the same way

   $\frac{0.0699+0.05}{0.05}$$=2.4$

7. HEX: #4073C8

1. Write each channel in base 16, as HEX codes do: divide by 16 for the first digit and keep the remainder for the second

   $\text{64, 115, 200}$$=\text{40 73 C8}$$=\text{\#4073C8}$

2. Put the three hex pairs together after #

   $\text{HEX}$$=\text{\#4073C8}$

3. Find how bright the color looks (its luminance L). Undo the screen's brightness curve, then weight red 0.2126, green 0.7152, blue 0.0722, since eyes see green as brightest

   $0.2126\times 0.0513+0.7152\times 0.1714+0.0722\times 0.5776$$=0.1752$

4. Compare with white, whose luminance is 1. Add 0.05 to both and divide the lighter by the darker

   $\frac{1.05}{0.1752+0.05}$$=4.66$

5. Compare with black, whose luminance is 0, the same way

   $\frac{0.1752+0.05}{0.05}$$=4.5$

8. RGB: rgb(26, 27, 212)

1. Red: the hex pair 1A is 1 sixteens plus A ones (A = 10 … F = 15)

   $\text{1A}$$=1\times 16+10$$=26$

2. Green: the hex pair 1B is 1 sixteens plus B ones (A = 10 … F = 15)

   $\text{1B}$$=1\times 16+11$$=27$

3. Blue: the hex pair D4 is D sixteens plus 4 ones (A = 10 … F = 15)

   $\text{D4}$$=13\times 16+4$$=212$

4. Put the three channels together

   $\text{RGB}$$=\text{rgb(26, 27, 212)}$

5. Find how bright the color looks (its luminance L). Undo the screen's brightness curve, then weight red 0.2126, green 0.7152, blue 0.0722, since eyes see green as brightest

   $0.2126\times 0.0103+0.7152\times 0.011+0.0722\times 0.6584$$=0.0576$

6. Compare with white, whose luminance is 1. Add 0.05 to both and divide the lighter by the darker

   $\frac{1.05}{0.0576+0.05}$$=9.76$

7. Compare with black, whose luminance is 0, the same way

   $\frac{0.0576+0.05}{0.05}$$=2.15$

9. HEX: #5CADD6

1. Find the chroma C, how far the strongest channel is from the weakest. It uses lightness L and saturation S as fractions

   $\left(1-\text{|}2\times 0.6-1\text{|}\right)\times 0.6$$=0.48$

2. Find X, the middle channel, from the hue H. Also find m, the amount that lifts every channel to the right lightness

   $\text{X =}0.32\text{, m =}0.36$

3. Hue 200° falls in the 180°–240° slice of the color wheel. That sets which channel gets C, X and 0. Add m to each, then multiply by 255 for the 0 to 255 scale

   $\text{(R, G, B)}$$=\text{(92, 173, 214)}$

4. Write each channel in base 16, as HEX codes do: divide by 16 for the first digit and keep the remainder for the second

   $\text{92, 173, 214}$$=\text{5C AD D6}$$=\text{\#5CADD6}$

5. Put the three hex pairs together after #

   $\text{HEX}$$=\text{\#5CADD6}$

6. Find how bright the color looks (its luminance L). Undo the screen's brightness curve, then weight red 0.2126, green 0.7152, blue 0.0722, since eyes see green as brightest

   $0.2126\times 0.107+0.7152\times 0.4179+0.0722\times 0.6724$$=0.3702$

7. Compare with white, whose luminance is 1. Add 0.05 to both and divide the lighter by the darker

   $\frac{1.05}{0.3702+0.05}$$=2.5$

8. Compare with black, whose luminance is 0, the same way

   $\frac{0.3702+0.05}{0.05}$$=8.4$

10. RGB: rgb(106, 91, 216)

1. Red: the hex pair 6A is 6 sixteens plus A ones (A = 10 … F = 15)

   $\text{6A}$$=6\times 16+10$$=106$

2. Green: the hex pair 5B is 5 sixteens plus B ones (A = 10 … F = 15)

   $\text{5B}$$=5\times 16+11$$=91$

3. Blue: the hex pair D8 is D sixteens plus 8 ones (A = 10 … F = 15)

   $\text{D8}$$=13\times 16+8$$=216$

4. Put the three channels together

   $\text{RGB}$$=\text{rgb(106, 91, 216)}$

5. Find how bright the color looks (its luminance L). Undo the screen's brightness curve, then weight red 0.2126, green 0.7152, blue 0.0722, since eyes see green as brightest

   $0.2126\times 0.1441+0.7152\times 0.1046+0.0722\times 0.6867$$=0.155$

6. Compare with white, whose luminance is 1. Add 0.05 to both and divide the lighter by the darker

   $\frac{1.05}{0.155+0.05}$$=5.12$

7. Compare with black, whose luminance is 0, the same way

   $\frac{0.155+0.05}{0.05}$$=4.1$