read hex codes

2020-03-01 235浏览

  • 1.Read color hex codes Dave DeSandro @desandro
  • 2.
  • 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.
  • 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
  • 41.
  • 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
  • 77.
  • 78.