Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. rgb( 200, 42, 84 ) hsl( 344, 65%, 48% )

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

    4. Lightness from total 5. Saturation from range How to read hex codes
  3. 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
  4. 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
  5. 0000 0000 0000 1111 0001 0000 1111 1111 Binary 00

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

    A B C D E F Low High Middle
  7. 1. 3-digit shorthand 2. Line graph 3. Hue from shape

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

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

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

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

    4. Lightness from total 5. Saturation from range #D92 #D49B25 Orange Middle
  12. 2 8 D 8 F 0 5 8 A 8

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

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

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

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

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

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

    4. Lightness from total 5. Saturation from range #358 #3A538C #358
  19. 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
  20. 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
  21. 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
  22. 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
  23. #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
  24. Shorthand codes are
 easy to change in code #D92 #FB4

    Lighter #C70 Darker #B95 Desaturate #29D Change hue
  25. #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
  26. Shorthand #221 #433 #DBD9D2 #EFEEEA #078 #F3B #624 #0C4 #EB5

    #DEC #CDF #FEC #FDF #FD2 #078 You learned Shorthands
 are good