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
   

   View Slide

2. View Slide

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

   View Slide

4. #E69DFB
   Light washed purple
   

   View Slide

5. Colorblind
   

   View Slide

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

   View Slide

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

   View Slide

8. rgb( 200, 42, 84 )
   hsl( 344, 65%, 48% )
   $base-color: #C82A54;
   darken( $base-color, 10% )
   lighten( $base-color, 10% )
   

   View Slide

9. View Slide

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
    

    View Slide

11. Hex codes are optimized

    for computers, not humans
    
    
    

    View Slide

12. #D49B25
    

    View Slide

13. #D49B25
    

    View Slide

14. #D49B25
    R G B
    Hexadecimal
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. 0000 0000
    0000 1111
    0001 0000
    1111 1111
    Binary
    00
    0F
    10
    FF
    Hex
    0
    15
    16
    255
    Dec
    Byte
    

    View Slide

18. 0 1 2 3 4 5 6 7 8 9 A B C D E F
    Low High
    Middle
    

    View Slide

19. 4 8
    0 C F
    You learned
    Hexadecimal
    

    View Slide

20. #D49B25
    R G B
    

    View Slide

21. #D49B25
    R G B
    

    View Slide

22. #D92
    R G B
    

    View Slide

23. Shorthand
    #D92
    #FFF
    #000
    #DD9922
    #FFFFFF
    #000000
    

    View Slide

24. 1. 3-digit shorthand
    2. Line graph
    3. Hue from shape
    4. Lightness from total
    5. Saturation from range
    #D92
    #D49B25
    

    View Slide

25. #D92
    

    View Slide

26. D 9 2
    4 8
    0 C F
    

    View Slide

27. 1. 3-digit shorthand
    2. Line graph
    3. Hue from shape
    4. Lightness from total
    5. Saturation from range
    #D92
    #D49B25
    

    View Slide

28. D 9 2
    

    View Slide

29. RGB
    D 9 2
    

    View Slide

30. RGB HSL
    D 9 2
    

    View Slide

31. Hue
    Saturation
    Lightness
    

    View Slide

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

    View Slide

33. Light
    Middle
    Dark
    

    View Slide

34. Saturated Washed Muted Gray
    

    View Slide

35. #E69DFB
    Light washed purple
    Lightness Saturation Hue
    You learned
    HSL color model
    

    View Slide

36. Hue
    

    View Slide

37. Red
    Green
    Blue
    

    View Slide

38. Yellow
    Cyan
    Magenta
    

    View Slide

39. Orange
    Chartreuse
    Spring

    green
    Azure
    Purple
    Rose
    

    View Slide

40. Gray
    

    View Slide

41. View Slide

42. Azure hue
    

    View Slide

43. Orange
    2
    9
    D
    

    View Slide

44. 1. 3-digit shorthand
    2. Line graph
    3. Hue from shape
    4. Lightness from total
    5. Saturation from range
    #D92
    #D49B25
    Orange
    

    View Slide

45. Lightness
    

    View Slide

46. Light
    Middle
    Dark
    

    View Slide

47. Light
    Middle
    Dark
    2
    9
    D
    

    View Slide

48. 1. 3-digit shorthand
    2. Line graph
    3. Hue from shape
    4. Lightness from total
    5. Saturation from range
    #D92
    #D49B25
    Orange
    Middle
    

    View Slide

49. Saturation
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

53. #D49B25
    Washed
    Lightness Saturation Hue
    Middle Orange
    You learned
    Read hex codes
    

    View Slide

54. #3A538C
    Practice
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

63. #3A538C
    Muted
    Lightness Saturation Hue
    Dark Azure
    

    View Slide

64. #FFF2F0
    What about the even digits?
    

    View Slide

65. #FFF2F0
    What about the even digits?
    

    View Slide

66. #FFF2F0 #FFF
    

    View Slide

67. #FFF2F0
    90% #FFF
    10% #F20
    

    View Slide

68. All we really need is

    3-digit shorthand colors
    

    View Slide

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

    View Slide

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
    

    View Slide

71. Shorthand codes are

    easy to read as colors
    R G B
    #E16
    #E16
    

    View Slide

72. Shorthand codes are

    easy to remember
    #C25
    #EA0
    #19F
    

    View Slide

73. Shorthand codes are

    easy to choose
    

    View Slide

74. Shorthand codes are

    easy to change in code
    #D92
    #FB4
    Lighter
    #C70
    Darker
    #B95
    Desaturate
    #29D
    Change hue
    

    View Slide

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
    

    View Slide

76. Shorthand
    #221 #433 #DBD9D2 #EFEEEA
    #078
    #F3B
    #624 #0C4 #EB5
    #DEC #CDF #FEC #FDF
    #FD2
    #078
    You learned
    Shorthands

    are good
    

    View Slide

77. View Slide

78. View Slide