タグ

覚えておくに関するdaisuke1209のブックマーク (1)

  • 【CSS3】HSL色空間による色指定のすゝめ

    .hoge { background-color: hsl(0, 100%, 50%) // 純色の赤 color: hsl(60, 100%, 80%) // 明るい黄色 } rgbによる色指定では、「ちょっと色を明るくしたい、もうちょっと赤を強くしたい」などといったときに、直感的に修正しにくいため、カラーピッカー等を用いてrgb値を確認する必要があったのですが、HSLによる色指定であれば、色相、彩度、明度を調節することで簡単に色を調節することができます。 CSS3による新機能のため、使える場面が限られるのですが、使える場合には是非使ってみていただければと思います。 ちなみに、HSLについて調べている中で、RGBからHSLに変換する変換式とHSLからRGBに変換する変換式を見つけたので、javascriptで実装してみました。 以下のサンプルページで変換を試すことができるので、ぜひ触って

    【CSS3】HSL色空間による色指定のすゝめ
  • 1