概要
アプリケーションのカラーコード、皆さんどのように書いていますか？
一般的には #FF00CC など、hex コードを利用していると思いますが、それでも Named Color のメリットもあると思うので、Named Color の魅力とその理由についてまとめていこうと思います。よろしくお願いします。
「Hex Color」か「RGB(RGBA) Color」が優れているところ
元々 CSS では色指定に「Hex Color #00ff99」か「RGB(RGBA) rgb(244, 112, 132)」 などを使ってきていると思います。
これらの色指定には、Named Color には表せない微妙な色表現ができるという利点がありますが
、それに加えて「Hex Color」か「RGB(RGBA) Color」を使ったほうがよりコードはわかりやすいものになると思います。
ここで Named Color を使ったときの例を紹介します。この３色はそれぞれ赤系統の色になっていますが
color: IndianRed;
color: Salmon;
color: LightCoral;
見た時どうでしょう？赤系統の色であることはわかりますが、どれがより赤みが強いのか、より暗いのかブラウザで表示してみるまで判断することは出来ません。
一方で、この３色をHex Color Code で表現すると
color: #CD5C5C; // IndianRed
color: #FA8072; // Salmon
color: #F08080; // LightCoral
となります。ぱっとコードを見るだけで赤み具合、他の色の混ざり具合がわかります。
以上のように、「Hex Color」か「RGB(RGBA) Color」を使うことで、よりコードは見えやすくなってきています。
近年の色変数の使い方
近年の開発では、Webでは SASS/SCSS が主流となり（なっていると思っている）。以下のような定義が増えてきたのではないでしょうか。
$light-blue: #ADD8E6;
$white: #FFF;
$xxx-white: #EFEFEF;
そこで今回のブログタイトルに戻ってくるのですが、 $white: #fff; という変数定義は、本当に便利なのか、ということです。
$white が #FFFFFF と定義されているとき
さぁこの変数を使っている箇所の例を見てみると、以下のような形になると思います。
// 色名を変数に定義して利用する
$white: #FFFFFF;
.before-text {
color: $white;
}
まず１点に、同じつづりを打つのに $ 必要になっていることもありますが、開発で一番困るのは
$white が本当に #FFFFFF を表現してるのか、定義元を見るまでわからないということがあります。
$white: #EFEFEF;
.before-text {
color: $white; // このコードを見て `$white` が本当に `#FFFFFF` なのかわからない（特にファイルが違う場合）
}
結論、実装するときは？
基本的に Named Color と同じ名前の色変数はつくらず、サービス名の省略形など、プレフィックスをつけた命名にしましょう。
そして、 直感的に色がわかる Named Color と同じ値の色変数は使わず、Named Color を使いましょう。
$xxx-blue: #0f52ba;
$xxx-lightblue: #aee3e5;
h1 {
color: $xxx-blue;
}
h2 {
color: white;
}
終わりに
ということで color: white; をもっと使っていきましょう。
とはいえ、チームによっては色はすべて変数化したものを使う運用で統一する、というのもきっぱりしていて悪くもないと思っています。。何はともあれ、いろいろ頑張っていきましょう。
Ref
P.S.
最初に作られた17の色変数ですら fuchsia 直感的にどんな色なのか全くわからないものもあった。
| color name | hex code |
|---|---|
| aqua | #00ffff |
| black | #000000 |
| blue | #0000ff |
| fuchsia | #ff00ff |
| gray | #808080 |
| green | #008000 |
| lime | #00ff00 |
| maroon | #800000 |
| navy | #000080 |
| olive | #808000 |
| orange | #ffa500 |
| purple | #800080 |
| red | #ff0000 |
| silver | #c0c0c0 |
| teal | #008080 |
| white | #ffffff |
| yellow | #ffff00 |
Discussion