カラーコードの文字列の意味、知ってました…?【カラーパレットの作り方】

こんにちは、財前です。

突然ですが皆さんは、カラーコードの文字列の意味って知っていますか？

カラーコードと言えば、CSSなどで色を指定するために記述する、

「#cbcb0b」とか、
「#4e53df」とか、
「#8b274e」とか

ですね。

もう、どう見たって、ランダムな文字列ですよね…

でもちゃんと意味があったのです…

何故こんな記事を書こうかと思ったというと、昨日、以下のようなアプリを個人的に作ってみたからです。

これを作るに当たって、（色だけに…）色々と勉強になたので、備忘録も兼ねて記事に残しておきます。

カラーコードの文字列の意味

結論から言うと、カラーコードの文字列は、

「赤」「緑」「青」の3色それぞれの強さを、16進数で表しています。

16進数といえば、10進数にアルファベットが加わったようなやつですね。

たとえば、「#f207f3」というカラーコードがあった時、プログラムで解析をしたければ、以下のような手順でRGB値を取り出します。
（RGB値　⇒　Red Green Blueそれぞれの強さ）

たとえば、
「#f207f3」
というカラーコードを、分解してみましょう。

“#f207f3” = “#” + “f2” + “07” + “f3”

　　　赤: f2
　　　緑: 07
　　　青: f3

上記を10進数に直すと以下のようになります。
　　　赤: 242
　　　緑: 7
　　　青: 243

2桁の16進数の最大値は「FF」ですから、
10進数で言うところの「255」が、それぞれの色の値の最大値になります。

そう考えると、赤: 242や、青: 243というのは、結構最大値に近い、大きな値だということが分かります。

赤と青が大きいということは、「#f207f3」というカラーコードは、紫色かな？

などという予想をすることもできますね。

ちなみに、実際の「#f207f3」の色は、以下のような色です。

こんな色

やっぱり、紫色ですね。

カラーコード以外の色指定方法

皆さんはCSSで色を指定する際には、カラーコードを記述されていますか？

自分は
「CSSの色はカラーコードで指定するものだ」
とばかり思っていたのですが、
以下のような記述もできるようですね。

RGB値による色指定

RGBから色を指定する方法ですね。
ぶっちゃけ16進数のカラーコードよりも、上記の書き方の方が分かりやすいですね…

書き方は違えど、カラーコードと意味するところは一緒です。

HSLによる色指定

上記のRGBとはまた違った軸として、HSLというものがあります。
HSLもRGBと同様、3つの軸を使って色を表現する方法なのですが、その軸が
「赤・緑・青」
ではなく、

「色相(Hue)、彩度(Saturation)、輝度（Lightness)」
の3つなのです。

頭文字をとって、HSLなのですね。

実は上記でご紹介した、私が個人的に作ったカラーパレットも、かなりこのHSLのお世話になっています。

たとえば、CSSの中で以下のように色を指定することができます。

たとえば、
hsl(0, 30%, 80%);
という指定を行った場合、これは以下のことを意味しています。

　色相: 0
　彩度: 30%
　輝度: 80%

「色相」は色の種類、
「彩度」は鮮やかさ、
「輝度」は明るさを、
意味しています。

色相

色相では、色の種類を指定しています。
指定の方法としては、色相環上での角度です。

赤いところを0度として、360度で一周して、また赤に戻ってくるイメージです。

なので、基本的に最大値は360です。

360以上を指定しても、2周目、3周目に突入するだけなので、あまり意味はありません。

先述のカラーパレットのアプリでは、以下のようなレンジ入力欄を利用して、最初に色相の指定をしてもらうようにしています。

色相 0～360 をグラデーション上に表示して、選択ができるようにしています。

彩度

彩度は、色の鮮やかさですね。
0%～100％の、パーセンテージで表現されます。

私が作成したカラーパレットで言うと、縦軸が「彩度」になっています。

上に行けば行くほど鮮やかに、
下の方は淡い色になっていることが、分かって頂けますでしょうか。

彩度が大きいと、鮮やかになります。

輝度

輝度は色の明るさですね。
こちらも0%～100％の、パーセンテージで表現されます。

上述のカラーパレットでいうと、横軸に当たります。

輝度が大きいと明るくなり、小さいと暗くなっていることが、おわかり頂けますでしょうか。

ちなみに輝度が最大の100%では、色相、彩度に関わらず、真っ白になります。
逆に輝度最小の0%では、色相、彩度に関わらず、真っ黒になります。

カラーコードは一般的に普及していて便利ですが、RGBやHSLで直接指定する方法も覚えておくと、Webサイトの色を表現するときの幅が広がるかも知れませんね。

カラーパレットの作り方

折角なので、上記のようなカラーパレットの作り方も、簡単にご紹介しておきます。

基本的な機能作成の流れとしては、以下のように行いました。

1. 現在選択されている色のHSLを保存しておくオブジェクトを作成
2. 作成したオブジェクトに初期値を代入（h: 300, s: 90, l: 50 等）
3. 色相を選択するレンジ入力欄と、彩度・輝度のテーブルを作成
4. テーブルのセルクリック時に、上記で作成したオブジェクトの値を更新

現在選択されている色のHSLを保存しておくオブジェクトを作成

上記のカラーパレットのアプリでは、現在選択されている色を、HSL形式で保持しています。

具体的には以下のようにしてリテラルのオブジェクトで初期値を与えながら、thisのプロパティとしてstateをセットしています。

ただ、私はReactというJavaScriptのフレームワーク（ライブラリ）を使っている関係上、上記のstateというオブジェクトを作ると楽だったのですが、
それ以外の方は、自身のやりやすいようにHSLを保持すれば問題ないと思います。

また、上記の記述だと「thisって誰だよ」と思われるかもしれませんが、そこはReactの事情ですので、気にしないでください。

素のJavaScriptやjQuery等で作るのであれば配列でも良いと思いますし、
3つ変数を宣言しても良いと思います。

上記では、最初に画面が開かれた時に選択されている色として、色相:300、彩度90%、輝度:50%という値を設定しています。

色相を選択するレンジ入力欄と、彩度・輝度のテーブルを作成

色相を選択するレンジ入力欄と、その下にある彩度・輝度のテーブルですが、
これらはどちらも、HTMLの<table>要素を用いて作られています。

<table>要素のそれぞれの<td>に対してbackground-colorを設定し、色を付けています。

JavaScript側で、色相・彩度・輝度を少しずつずらしながらforループを回し、
テーブルの各セルに着色を行うことで、グラデーションっぽくしています。

テーブルのセルクリック時に、上記で作成したオブジェクトの値を更新

上記のテーブルを作成したら、各<td>に対して、onClickイベントを設定します。

onClick時に行われる処理としては、自身のセルに設定されている色情報をもとに、
最初にオブジェクトとして作成した「現在選択されている色」の情報を更新します。

その上で画面の再描画を行い、選択された色に応じたカラーコードや、画面の色が表示されるようにします。

以上、ざっくりとした説明ですが、考え方を書いてみました。

自分はこのアプリを作ってみるまで、カラーコードというものについて深く考える機会がなかったので、良い機会になりました。
同じような機能の作成を検討されている方等の、考えるヒントになれば幸いです。