2018年07月03日

CSSの色を指定する方法3パターン はてなブックマーク - CSSの色を指定する方法3パターンこのエントリーをはてなブックマークに追加

こんにちは。白井です。

さて、私は最近、弊社プログラマーの宮田と共同でサービスの開発を行っています。
私は主にプログラマーからやってきた仮組みのUIを装飾して返すということをやっていますが、ここで気になることが一つ。

プログラマーからやってくるCSSの色指定がすべてRGBで行われているんです。
カラーコードで育った私は「プログラム界隈ではRGBが主流なのか…?🤔」などと思ったりしたのですが、そんなわけがあるのかとちょっと気になって調べてみました。

color


さてさて、CSSにおいて色の指定方法はおおよそ4種類程度あるかと思います。

🔸カラーコード
#(シャープ)から始まる16進数6桁の英数字で色を表します。
カラーコードはHTMLの中でも使用でき、古いブラウザから見ても色を表示できるため、モダンから化石まで幅広いブラウザに対応する必要がある場合に便利です。ただし透明度情報は扱えません。
1・2桁目、3・4桁目、5・6桁目がそれぞれ同じ値の場合は3桁に省略して表記することができます。
#000000は#000、#AABBCCは#ABCと書いてもいいわけですね。

🔸色名
redやblueなど色の名前を直接指定するものです。100色以上の色に対応しているようなので、だいたいであれば思ったとおりの色を再現できるのではないでしょうか。直感的に色を指定できるので急いでいるときも便利です。
ちなみにaliceblueという色名はブラウザによっては全く違う色で再現されることがあるそうです。

🔸RGBa
RedGreenBlueとAlphaを指定する方法です。色はそれぞれ0から255の256段階、アルファ(透明)は0から1の中で小数点を使って調整します。
透明度情報を扱えるうえ、多くのブラウザにも対応しているため、多くの場面で使われるようです。

🔸HSLa
あたらしいCSSことCSS3から使えるようになった指定方法です。
Hue(色相),Saturation(彩度),Lightness(明度),Alpha(透明度)で色を指定します。色相、再度、明度はパーセンテージで、透明度はRGBaと同じく0から1.0の中で指定します。

✨✨✨✨✨✨

…ということで、RGBaがよく使われているのはおそらく多くのブラウザに対応していて且つ透明度も扱えるからではないかな?というところが今日の結論(感想)です。

私はIllustratorやPhotoshopから色を抜いてくることが多いことと、RGBよりカラーコードのほうが見た目スッキリに感じるため、透明度情報を扱わないときはカラーコードを使っています。
ただ、透明度情報を扱うときはRGBaを使いますし、普段自分で色を作るときはHSLを使っています。要は使い分けということですね。
みなさんも目的に合わせて楽しいカラーライフをお過ごしください🙌

sakamo_knowledgeflow at 18:24コメント(0)開発・技術  この記事をクリップ!

コメントする

名前:
URL:
  情報を記憶: 評価:  顔   星
 
 
 
PR広告
月別アーカイブ
最新コメント
最新トラックバック
livedoor Readerに登録
RSS
livedoor Blog(ブログ)