カラーコードの仕組み

カラーコードってどんな仕組みか、知ってる？

ざっくりその辺の解説について。

カラーコードや色とは？

基本的に色はRGBの3原色で構成されているというのはご存じかと思います。
赤＋青で紫
赤＋緑で黄
全て合わせると白

みたいな形ですね。

これを16進数(HEX)にしたのがカラーコードとなります。
内訳はこんな感じ。

#DE5040は

Red = DE
Green = 50
Blue = 40

といった形で表現されています。
これらを10進数に変換したものがRGBとなります。

HEXをRGBのコードに変換するとしたらこんなコードで変換できます。

  // rgbを分解する。
  const [r, g, b] = '#de5040'.replace('#', '').match(/.{2}/g);

  // rgbを10進数に変換する。
  const red = parseInt(r, 16);
  const green = parseInt(g, 16);
  const blue = parseInt(b, 16);

  console.log(red, green, blue);
  // red: 222, green: 80, blue:64

ちなみにRGBをHEXに変換はこちら👇

const toBase16 = num => {
  const hex = num.toString(16);
  return hex.length === 1 ? `0${hex}` : hex;
}

const toHex = (red, green, blue) => {
  return `#${toBase16(red)}${toBase16(green)}${toBase16(blue)}`;
}

console.log(
  toHex(245, 144, 179) // #F590B3
);

red: 245, green: 144, blue:179 #f590b3

黒と白について

黒と白については最小値、最大値を入力すると表現することが可能です。

黒は#000000、白は#ffffffで表現が可能です。

この原則を知ると、こんなことが可能になる。

全ての色をHEXからRGBに変換して、RGBに同じ値を足すと明度を上げることが可能です。

例としてはこんな感じです。

red: 36, green: 54, blue:88 #243658
red: 66, green: 84, blue:118 #425476
red: 136, green: 154, blue:188 #889abc

HTMLなどで張り付けて大きな画面で見てもらうと分かると思います。

彩度をさげる方法は最大の値を変更せずに、他の2色を同じ値を足すと変更することができます。

こちらは色相も変わってしまうので、コメントもご参照ください！

色の世界が数字で表現できるというのはちょっと夢がないかもしれませんが、色の作り方として参考になるかもしれないので覚えておくといいかもしれないですね！