Read color hex codes

2ce95c1d4f7e79263c7fa261f12c47c9?s=47 David DeSandro
November 08, 2018

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.

2ce95c1d4f7e79263c7fa261f12c47c9?s=128

David DeSandro

November 08, 2018
Tweet

Transcript

  1. Read color hex codes Dave DeSandro @desandro

  2. None
  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% )
  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
  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

  41. None
  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
  77. None
  78. None