Corredor

ウェブ、プログラミングの勉強メモ。

CSS3 の hsl() で色を指定してみる

CSS3 から、カラーコードや rgb() による色指定の他に、hsl() という関数で色指定ができるようになった。コレは「HSL 円柱座標方式」というモノで、Hue (色相)、彩度 (Saturation)、輝度 (Lightness) の3要素から色を指定する方法らしい。色相だけ変えれば、同じ明るさや鮮やかさのカラーバリエーションが得られるし、色相はそのままに明るさや鮮やかさを変えれば、そのテーマ内の明暗カラーを簡単に得られる。

使ってみたサンプルは以下のとおり。

See the Pen CSS HSL by Neos21 (@Neos21) on CodePen.

コレは SCSS と JavaScript を使って、特定の色相における彩度と輝度を1つの表にまとめたモノ。色相を 60% ずつ動かし、6色を試してみた。

普通に CSS 中で指定するなら、background-color: hsl(0%, 100%, 50%); というように、パーセンテージで指定すれば良い。

さらに、アルファチャンネル (透明度) を指定できる rgba() 的な、hsla() という関数もある。background-color: hsla(0%, 100%, 50%, .5); のように指定する。

HTML5 & CSS3 デザインレシピ集

HTML5 & CSS3 デザインレシピ集

CSS3 スタンダード・デザインガイド

CSS3 スタンダード・デザインガイド

  • 作者: エ・ビスコム・テック・ラボ
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2011/06/14
  • メディア: 単行本(ソフトカバー)
  • 購入: 11人 クリック: 178回
  • この商品を含むブログ (13件) を見る