Various Colors

Various Colors

F966e93db0fbaf3aa07f7df5fa136933?s=128

Keita Urashima

March 28, 2015
Tweet

Transcript

  1. いろいろなイロ 浦嶌 啓太 (@ursm) 2015-03-28 #hmrk01

  2. http://ursm.jp

  3. None
  4. None
  5. http://moon.gmobb.jp/renno/cgi/junk.cgi/paintgraphic2/rikutsu/hsl.htm

  6. hsl(0deg, 40%, 30%) hsl(0deg, 60%, 30%) hsl(0deg, 100%, 50%) hsl(0deg,

    60%, 50%) hsl(0deg, 40%, 50%) hsl(0deg, 100%, 70%) hsl(0deg, 60%, 70%) hsl(0deg, 40%, 70%) hsl(0deg, 100%, 30%)
  7. hsl(0deg, 80%, 50%) hsl(180deg, 80%, 50%) hsl(90deg, 80%, 50%) hsl(30deg,

    80%, 50%) hsl(120deg, 80%, 50%) hsl(210deg, 80%, 50%) hsl(60deg, 80%, 50%) hsl(150deg, 80%, 50%) hsl(240deg, 80%, 50%)
  8. el.style.backgroundImage = "radial-gradient(16px, hsl(#{Math.floor(Math.random() * 360)}, 100%, 75%), transparent"

  9. ここの色をどうやって決めるか ?

  10. hsl(13deg, 8%, 23%) hsl(186deg, 50%, 44%)

  11. hsl(13deg, 8%, 23%) hsl(186deg, 50%, 44%) hsl(186deg, 8%, 23%)

  12. http://sass-lang.com/documentation/Sass/Script/Functions.html

  13. $ sass -i >> hue(rgb(12, 34, 56)) 210deg >> saturation(rgb(12,

    34, 56)) 64.70588% >> lightness(rgb(12, 34, 56)) 13.33333% Sass HSL Functions
  14. >> adjust-hue(rgb(12, 34, 56), 30deg) #0c0c38 >> saturate(rgb(12, 34, 56),

    20%) #05223f >> desaturate(rgb(12, 34, 56), 20%) #132231 >> lighten(rgb(12, 34, 56), 10%) #153b62 >> darken(rgb(12, 34, 56), 10%) #03080e
  15. $base: rgb(12, 34, 56) .awesome color: adjust-hue($base, 30deg) background-color: darken($base,

    10%)
  16. Conclusion ➔ HSL 色空間を使うとひとつの色からバリエー ションを生成したり、トーンの揃った異なる色を 生成したりできる ➔ Sass を使うと色の演算ができる