Read color hex codes

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