David DeSandro
November 08, 2018
54k

How does a colorblind designer work with color? Not with his eyes! Instead I rely on reading color hex codes. Here I share my process into understanding those six-digit codes and related insights into human vision, computer history, and digital color.

David DeSandro

November 08, 2018

Transcript

2. None
3. #C82A54 #EF280F #E36B2C #E36B2C #E7D40A #6DC36D #02AC66 #23BAC4 #109DFA #024A86

#E69DFB #FF689D #ECECEC #BBA9BB #8C4966 #222222

6. #C82A54 #EF280F #E36B2C #E36B2C #E7D40A #6DC36D #02AC66 #23BAC4 #109DFA #024A86

#E69DFB #FF689D #ECECEC #BBA9BB #8C4966 #222222
7. #C82A54 #EF280F #E36B2C #E36B2C #E7D40A #6DC36D #02AC66 #23BAC4 #109DFA #024A86

#E69DFB #FF689D #ECECEC #BBA9BB #8C4966 #222222
8. rgb( 200, 42, 84 ) hsl( 344, 65%, 48% )

\$base-color: #C82A54; darken( \$base-color, 10% ) lighten( \$base-color, 10% )
9. None
10. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range How to read hex codes

15. 0 1 2 3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
16. Hex 0 1 2 3 4 5 6 7 Dec

0 1 2 3 4 5 6 7 Hex 8 9 A B C D E F Dec 8 9 10 11 12 13 14 15 Hex 10 Dec 16
17. 0000 0000 0000 1111 0001 0000 1111 1111 Binary 00

0F 10 FF Hex 0 15 16 255 Dec Byte
18. 0 1 2 3 4 5 6 7 8 9

A B C D E F Low High Middle

24. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range #D92 #D49B25

27. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range #D92 #D49B25

32. Red Orange Yellow Chartreuse Green Spring green Cyan Azure Blue

Purple Magenta Rose

color model

41. None

44. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range #D92 #D49B25 Orange

48. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range #D92 #D49B25 Orange Middle

50. 2 8 D 8 F 0 5 8 A 8

8 8 Saturated Washed Muted Gray
51. 2 8 D 8 F 0 5 8 A 8

8 8 Saturated Washed Muted Gray 2 9 D
52. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range #D92 #D49B25 Orange Middle Washed

hex codes

55. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range #3A538C
56. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range #3A538C
57. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range #358
58. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range #358 #3A538C #358
59. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range #358 #3A538C Azure 3 5 8
60. 3 5 8 1. 3-digit shorthand 2. Line graph 3.

Hue from shape 4. Lightness from total 5. Saturation from range #358 #3A538C Azure Dark
61. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range #358 #3A538C Azure Dark 3 5 8 Muted
62. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

4. Lightness from total 5. Saturation from range #358 #3A538C Azure Dark Muted 3 5 8

69. #241C15 #403B3B #DBD9D2 #EFEEEA #007C89 #FF3EBF #692340 #00C14E #007C89 #E7B75F

#D8EACC #C5DBF2 #FBEECA #F9E0FA #FFE01B
70. #241C15 #403B3B #DBD9D2 #EFEEEA #007C89 #FF3EBF #692340 #00C14E #007C89 #E7B75F

#D8EACC #C5DBF2 #FBEECA #F9E0FA #FFE01B Original Shorthand #221 #433 #DBD9D2 #EFEEEA #078 #F3B #624 #0C4 #EB5 #DEC #CDF #FEC #FDF #FD2 #078

B #E16 #E16

74. Shorthand codes are  easy to change in code #D92 #FB4

Lighter #C70 Darker #B95 Desaturate #29D Change hue
75. #241C15 #403B3B #DBD9D2 #EFEEEA #007C89 #FF3EBF #692340 #00C14E #007C89 #E7B75F

#D8EACC #C5DBF2 #FBEECA #F9E0FA #FFE01B Original Shorthand #221 #433 #DBD9D2 #EFEEEA #078 #F3B #624 #0C4 #EB5 #DEC #CDF #FEC #FDF #FD2 #078
76. Shorthand #221 #433 #DBD9D2 #EFEEEA #078 #F3B #624 #0C4 #EB5

#DEC #CDF #FEC #FDF #FD2 #078 You learned Shorthands  are good
77. None
78. None