色について気になったので少し調べてみました

お花見はしましたか？

桜は毎年見ても飽きないですね。

一般的に、桜といえば、淡いピンク色が綺麗なソメイヨシノを思い浮かべる方も多いのではないでしょうか。

私の地元ではカンヒザクラという桜が主流で、ソメイヨシノと比べるとめっちゃ濃いピンクです。

同じ桜でもいろんな色の違いなども

ウェブ上でも結構微妙な色の違いなものもあって、桜の花びらのように、微妙な調整もできますよね。

ちょい薄いピンク！とか濃ゆめと薄めのグラデーション、とか。

ウェブでそれを表現するのは主にCSSなどを使うと思うのですが、

その時って、#ffffffとか、rgb(0 0 0)など、ぱっと見ではわからない値で設定されています。

これってそもそもなんなのか、どういう違いがあるのか、というのが気になったので調べてみました。

RGB

RGBとはRed（赤）、Green（緑）、Blue（青）の3つの光の3原色を用いて、様々な色を表現する加法混色のカラーモデルです。加法混色は色光（色の明るさ）を混ぜることにより、より明度の高い色を作ることができます。

RGBはそれぞれ0〜255の数値で表現されます。

数字が増えるほど明るさが増していきます。

具体的には、すべての色を一番低い（暗い）値にした場合（CSSで記載する場合）
rgb(0 0 0)（黒）

逆に一番高い（明るい）値にした場合は白になります。
rgb(255 255 255)（白）

ちなみに、色を混ぜて他の色を作ることを「混色」と言いますが、その方式は様々あるようです。

（加法混色、減法混色、継時混色、並置混色、中間混色）

方式により三原色は異なり、

前述したように、加法混色は赤、青、緑の三原色（色光の三原色）ですが、減法混色は、C（シアン）、M（マゼンタ）、Y（黄色）の三原色です。

ここでは混色の原理についての説明は省きますが、減法混色の例として、図画工作の時間などで水彩絵の具を使う時を思い出してみるといいかもしれません。（白画用紙に絵の具を塗り重ねていくと、色が濃ゆく暗くなるあの感じ）カラープリントなどでよく見かけるのではないでしょうか。

RGBとコンピュータ

みなさん知っての通り、コンピュータは情報を0と1のみで扱います。

1バイトのデータは8ビットで構成され、8ビットで表現できる組み合わせは最大で

2の8乗=256（通り）

になります。

その上で、0から数え始めると、最大値は255となり、色を0〜255の整数で表現できるといえます。

それぞれ256通りあるわけですから、RGBで表現できる色の数は

256 x 256 x 256 = 16,777,216（色）

となり、表現できる色の数としてはかなりの数ですね。

違いがはっきりと見てわかるかは別として、「黒は200色ある」というあの言葉もなんとなくわかる気もしてきます。

ちょこっと話　”Alpha値”

CSSでrgbaという関数を見かけることもあるかと思います。

ここにあるaというのは、alpha値を示しており、透過度を設定することができます。

rgba(0 0 0 0.5)またはrgba(0 0 0 50%)という風に使います。

この関数自体はrgb関数のエイリアスであり、rgb関数でalpha値（透過度）を設定したい場合は、

rgb(0 0 0 / 0.5)のように書きます。

写真などがお好きな方はよく聞くワードかもしれませんね！

HEX

HEXとは、Hexadecimalの意で、RGBカラーモデルを用いた6桁からなる16進数のカラーコードです。

このカラーコードは#の記号から始まり、そこに続く6桁は、それぞれ赤、緑、青の0〜255の強弱を16進数で表したものです。

0を16進数で表すと00

255を16進数で表すとFFになるので、

#000000は黒、#FFFFFFは白になります。

なぜ16進数なのか気になって調べてみたのですが、主な理由として以下のような説明が散見されました。

コンピュータとの親和性

コンピュータは内部的にすべての情報を2進数（0と1）で処理しています。16進数は2進数と非常に相性が良く、4ビットの2進数を1桁の16進数で簡潔に表現できます。8ビット（1バイト）の情報は2桁の16進数で表せるため、コンピュータが色情報を扱う上で効率的。

RGB値との直接的な対応

HEXカラーコードは、赤(R)、緑(G)、青(B)の各色の強さを2桁の16進数で表現します。RGBの各色の値は0から255の範囲ですが、これは16進数では00からFFに対応します。例えば、RGB(255, 0, 100)は、16進数ではFF0064となります。このように、RGB値を直接的に16進数に変換して表現できるため、対応関係が分かりやすいです。

簡潔な記述

16進数を使用することで、RGB値をより短く簡潔に記述できます。例えば、白はRGB(255, 255, 255)ですが、HEXでは#FFFFFFと記述できます。コード量が少なくなるため、記述ミスを減らし、可読性を向上させる効果があります。

慣習的な理由も結構大きいような気はしますが、コンピュータ的にも都合がいいということがわかりました。

変換の過程を理解するために関数を書いてみました。（ざっくりです）

rgbからhexへの変換

const convertRGBToHEX = (r, g, b) => {
    const convertToHex = (value) => {
        return value.toString(16);
    }
    return `${convertToHex(r)}${convertToHex(g)}${convertToHex(b)}`
}

hexからrgbの変換

function convertHEXToRGB(hex: string) {
    let hexVal = hex.replace('#', '');
    if (hexVal.length === 3) {
        // #FFFなどの場合に#FFFFFFに置き換える
        hexVal = `${hex[0].repeat(2)}${hex[1].repeat(2)}${hex[2].repeat(2)}`
    }
    const r = hexVal.parseInt(subString(0,2), 16);
    const g = hexVal.parseInt(subString(2,4), 16);
    const b = hexVal.parseInt(subString(4,6), 16);
    return `r: ${r}, g: ${g}, b: ${b}`;
}