read hex codes

1. Read color hex codes Dave DeSandro @desandro
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% )
10. How to read hex codes 1. 3-digit shorthand 2. Line graph 3. Hue from shape 4. Lightness from total 5. Saturation from range
11. Hex codes are optimized for computers, not humans 🤖😃 🙍😭
12. #D49B25
13. #D49B25
14. Hexadecimal #D49B25 R G B
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 Dec 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 Hex Dec 8 8 9 9 A 10 B 11 C 12 D 13 E 14 F 15 Hex Dec 10 16
17. Byte 0000 0000 0001 1111 Binary Dec Hex 0000 1111 0000 1111 0 15 16 255 00 0F 10 FF
18. 0 1 2 3 4 5 6 7 8 9 A B C D E F Low Middle High
19. You learned Hexadecimal 0 4 8 C F
20. #D49B25 R G B
21. #D49B25 R G B
22. #D92 R G B
23. Shorthand #FFF #FFFFFF #000 #000000 #D92 #DD9922
24. #D49B25 #D92 1. 3-digit shorthand 2. Line graph 3. Hue from shape 4. Lightness from total 5. Saturation from range
25. #D92
26. 0 4 8 C F D 9 2
27. #D49B25 #D92 1. 3-digit shorthand 2. Line graph 3. Hue from shape 4. Lightness from total 5. Saturation from range
28. D 9 2
29. D 9 2 RGB
30. D 9 2 RGB HSL
31. Lightness Hue Saturation
32. Red Rose Orange Magenta Yellow Purple Chartreuse Blue Green Azure Spring green Cyan
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 Blue Green
38. Magenta Yellow Cyan
39. Rose Purple Orange Chartreuse Azure Spring green
40. Gray
42. Azure hue
43. Orange D 9 2
44. #D49B25 #D92 1. 3-digit shorthand 2. Line graph Orange 3. Hue from shape 4. Lightness from total 5. Saturation from range
45. Lightness
46. Light Middle Dark
47. Light Middle D 9 2 Dark
48. #D49B25 #D92 1. 3-digit shorthand 2. Line graph Orange 3. Hue from shape Middle 4. Lightness from total 5. Saturation from range
49. Saturation
50. Saturated Washed Muted Gray F 8 0 D 8 2 A 8 5 8 8 8
51. D 9 2 Saturated Washed Muted Gray F 8 0 D 8 2 A 8 5 8 8 8
52. #D49B25 #D92 1. 3-digit shorthand 2. Line graph Orange 3. Hue from shape Middle 4. Lightness from total Washed 5. Saturation from range
53. #D49B25 Middle Washed Orange Lightness Saturation Hue You learned Read hex codes
54. Practice #3A538C
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. #3A538C #358 1. 3-digit shorthand 2. Line graph 3. Hue from shape 4. Lightness from total 5. Saturation from range #358
59. #3A538C #358 1. 3-digit shorthand 2. Line graph 3. Hue from shape 3 5 8 4. Lightness from total 5. Saturation from range Azure
60. #3A538C #358 1. 3-digit shorthand 2. Line graph Azure 3. Hue from shape 4. Lightness from total 5. Saturation from range 3 5 8 Dark
61. #3A538C #358 1. 3-digit shorthand 2. Line graph Azure 3. Hue from shape Dark 4. Lightness from total 5. Saturation from range 3 5 8 Muted
62. #3A538C #358 1. 3-digit shorthand 2. Line graph Azure 3. Hue from shape Dark 4. Lightness from total Muted 5. Saturation from range 3 5 8
63. #3A538C Dark Lightness Muted Azure Saturation Hue
64. What about the even digits? #FFF2F0
65. What about the even digits? #FFF2F0
66. #FFF2F0 #FFF
67. #FFF2F0 90% #FFF 10% #F20
68. All we really need is 3-digit shorthand colors
69. #FFE01B #241C15 #403B3B #007C89 #DBD9D2 #D8EACC #C5DBF2 #FBEECA #F9E0FA #692340 #007C89 #FF3EBF #00C14E #EFEEEA #E7B75F
70. #FFE01B #FD2 #241C15 #403B3B #007C89 #DBD9D2 #D8EACC #C5DBF2 #FBEECA #F9E0FA #692340 #007C89 #FF3EBF #00C14E Original #EFEEEA #E7B75F #221 #433 #078 #DBD9D2 #DEC #CDF #FEC #FDF #624 #078 #F3B #0C4 Shorthand #EFEEEA #EB5
71. Shorthand codes are easy to read as colors #E16 R G B
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 Lighter Darker Desaturate Change hue #FB4 #C70 #B95 #29D
75. #FFE01B #FD2 #241C15 #403B3B #007C89 #DBD9D2 #D8EACC #C5DBF2 #FBEECA #F9E0FA #692340 #007C89 #FF3EBF #00C14E Original #EFEEEA #E7B75F #221 #433 #078 #DBD9D2 #DEC #CDF #FEC #FDF #624 #078 #F3B #0C4 Shorthand #EFEEEA #EB5
76. You learned Shorthands are good #FD2 #221 #433 #078 #DBD9D2 #DEC #CDF #FEC #FDF #624 #078 #F3B #0C4 Shorthand #EFEEEA #EB5