Read color hex codes

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.

Transcript

1. Read color hex codes Dave DeSandro @desandro
3. #C82A54 #EF280F #E36B2C #E36B2C #E7D40A #6DC36D #02AC66 #23BAC4 #109DFA #024A86 #E69DFB #FF689D #ECECEC #BBA9BB #8C4966 #222222
4. #E69DFB Light washed purple
5. Colorblind
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% )
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
11. Hex codes are optimized
 for computers, not humans
12. #D49B25
13. #D49B25
14. #D49B25 R G B Hexadecimal
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
19. 4 8 0 C F You learned Hexadecimal
20. #D49B25 R G B
21. #D49B25 R G B
22. #D92 R G B
23. Shorthand #D92 #FFF #000 #DD9922 #FFFFFF #000000
24. 1. 3-digit shorthand 2. Line graph 3. Hue from shape 4. Lightness from total 5. Saturation from range #D92 #D49B25
25. #D92
26. D 9 2 4 8 0 C F
27. 1. 3-digit shorthand 2. Line graph 3. Hue from shape 4. Lightness from total 5. Saturation from range #D92 #D49B25
28. D 9 2
29. RGB D 9 2
30. RGB HSL D 9 2
31. Hue Saturation Lightness
32. Red Orange Yellow Chartreuse Green Spring green Cyan Azure Blue Purple Magenta Rose
33. Light Middle Dark
34. Saturated Washed Muted Gray
35. #E69DFB Light washed purple Lightness Saturation Hue You learned HSL color model
36. Hue
37. Red Green Blue
38. Yellow Cyan Magenta
39. Orange Chartreuse Spring
 green Azure Purple Rose
40. Gray
42. Azure hue
43. Orange 2 9 D
44. 1. 3-digit shorthand 2. Line graph 3. Hue from shape 4. Lightness from total 5. Saturation from range #D92 #D49B25 Orange
45. Lightness
46. Light Middle Dark
47. Light Middle Dark 2 9 D
48. 1. 3-digit shorthand 2. Line graph 3. Hue from shape 4. Lightness from total 5. Saturation from range #D92 #D49B25 Orange Middle
49. Saturation
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
53. #D49B25 Washed Lightness Saturation Hue Middle Orange You learned Read hex codes
54. #3A538C Practice
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
63. #3A538C Muted Lightness Saturation Hue Dark Azure
64. #FFF2F0 What about the even digits?
65. #FFF2F0 What about the even digits?
66. #FFF2F0 #FFF
67. #FFF2F0 90% #FFF 10% #F20
68. All we really need is
 3-digit shorthand colors
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
71. Shorthand codes are
 easy to read as colors R G B #E16 #E16
72. Shorthand codes are
 easy to remember #C25 #EA0 #19F
73. Shorthand codes are
 easy to choose
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