$30 off During Our Annual Pro Sale. View Details »

Read color hex codes

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.

David DeSandro

November 08, 2018
Tweet

More Decks by David DeSandro

Other Decks in Design

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