CSSの色指定はHEXよりもRGBよりもHSL指定がすごくいい! | Select *
Web Web制作

CSSの色指定はHEXよりもRGBよりもHSL指定がすごくいい!

オハヨウゴザイマス!
たまにはWeb系プログラマっぽいことでも書こうかなと思った@deepblue_willです。

さてさて、先日FeedlyのためのChrome拡張「Colorful List View For Feedly」をリリースしました。
そこで色の指定をhsl指定という方法を使用しました。
これがとてつもなくいいので紹介しちゃいます。


直感的に色指定ができる!


hsl指定とはこんなかんじで色を指定できる方法です。
/* 赤 */
.red {
background-color: hsl(0, 50%, 50%);
}
/* 緑 */
.green {
background-color: hsl(120, 50%, 50%);
}



hslの各引数は
色相
角度指定。
0が赤で角度を増やすごとに黄→緑→青→紫→ピンクとなる
彩度
%で指定。
少ないほど灰色になって、多いほどビビッドな色になる。
明度
%で指定。
少ないほど黒くなり、多いほど白くなる。
を表してます。

なので色相を変えずに明るくしたり、暗くしたり、鮮やかにしたりということが
簡単
に行えます。

HEXやRGBではこうは行きません。全ての値を書きなおさないといけないですから。。

ちなみにアルファ(透明度)も簡単に加えられます。
その際はhslaと書いて4つ目の引数に透明度を渡します。
/* 赤 */
.red {
background-color: hsla(0, 50%, 50%, 0.3);
}
/* 緑 */
.green {
background-color: hsla(120, 50%, 50%, 0.3);
}


Javascriptを使えばで良い感じのカラーをランダムで指定できる!

ランダムなカラーを指定したい!なんてことありませんか?

でも、RBGやHEXでランダム生成するには事前に使用する色を定義するか、
ランダムでRGBやHEXのコードを生成するかどちらかです。

前者なんかスマートなかんじしないですし、
後者は作成する色に統一感をだすことができません。

そこでhsl指定を使うと、簡単に統一感のあるカラーをランダムに生成できます。
// 0~359までの乱数を生成
var rand = Math.floor( Math.random() * 360 );

// 生成した乱数をhslの色相にする
$("#hoge").css("background-color","hsl(" + rand +", 50%, 50%)");


こうすれば、彩度、明度をそのままにしたランダムカラーが生成できます。
これならランダムな中にも統一感があって良い感じの見た目になります。

最後に

hsl指定ですが。IE9から対応しているみたいです。
FirefoxとChromeは問題なしです。

ただ、配色で使用するWebサイト(Kulerとか)がHEXかRGBのコードしか書いてないので
まだちょっと使いにくいのもあります。。

HEXやRGBをhslに変換してくれるサービスもみたらないし。。
自分で変換するツール作ってみようかな(笑)

もし知らなかった人は試してみてください!

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)