sRGB 色域ビューア

できること

• 立体を動かす。マウスでは、ドラッグで回転、右ドラッグか Shift+ドラッグで移動、Ctrl+ホイール（Mac は ⌘+ホイール）で拡大・縮小します。全画面ではホイールだけで拡大・縮小できます。スマートフォンでは、1本指で回転、2本指で移動と拡大・縮小をします。「視点を戻す」で最初の向きと大きさに戻ります
• 「中から見る」で立体の中に入る。カメラが立体の中心（L* 50 の位置）まで進み、その場所から周りを見回せます。ドラッグで見る向きを変え、ホイール（記事枠の中では Ctrl+ホイール）で前後に少しずつ（Shift を押しながら回すと大きく）、右ドラッグか Shift+ドラッグで上下左右に動きます。色A・色B の「ここから見る」を押すと、その色の位置に立って明度の軸の方を向きます
• 色相角 h_ab・明度 L*・クロマ C*_ab のボタンで色を絞り込む。どの列も複数選べて、ALL で選択を外します
• 並べ方を「CIELAB」と「RGB立方体」で切り替える。同じ色が、R・G・B の値のとおりの立方体に並び直します
• 色A・色B に色を置く。立体の色をタップするか、カラーピッカーか HEX で指定します。2色を置くと、CIELAB 上の距離 ΔE*_ab を表示します
• 「自動で巡る」で、カメラが立体の中を、ゆるやかに曲がりながら進み続ける。明るい側（L* の大きい側）と、明度の軸に近い淡い色のあたりを多めに巡り、淡い色のあたりではゆっくり進みます。速さは区間ごとに変わり、ときどき止まって漂います。ドラッグやホイールで向きや位置を変えると、そこから続けます
• 「全画面」で、立体を画面いっぱいに表示する。3秒操作しないとボタンと操作パネルが隠れます。立体をタップすると、また出ます
• 「♪ 音楽」で、ゆったりした音を流す。音はブラウザの中で合成しています。最初は止まっていて、もう一度押すと止まります。流しているあいだは、ボタンの横のつまみで音量を変えられます（選んだ音量はこの端末に保存されます）

表示している色

sRGB の R・G・B の値（0〜255）を、それぞれ0から255まで16等分し、小数を四捨五入した17段（0, 16, 32, 48, 64, 80, 96, 112, 128, 143, 159, 175, 191, 207, 223, 239, 255）にし、その組み合わせの色を並べています。 17×17×17 で4,913色です。 sRGB の8ビットの値で表せる約1,677万色のうち、区切りの点にあたる色だけを並べています。 区切りのあいだの色は、色A・色B に HEX やカラーピッカーで指定すると、その位置に印が出ます。

各色は、sRGB の値を線形化して XYZ 三刺激値（白色点 D65）に変換し、そこから CIE 1976 L*a*b* の座標を計算しています。 白色刺激には sRGB の白（D65）を使っています。 変換式は、W3C「CSS Color Module Level 4」のサンプルコードと同じです。

立体の形は、sRGB で表せる色の範囲の形です。 画面に見える色は、お使いの画面の設定によって変わります。

黒と白の扱い

4,913色には、黒（R・G・B がすべて0）と白（すべて255）が含まれます。 黒は L* 0、白は L* 100 で、どちらも a* と b* が0です。 立体では、明度の軸の下の端に黒、上の端に白を置いています。

黒と白はクロマ C*_ab が0なので、色相角が決まりません。 そのため色相角のボタンでは「N」に入ります。 明度のボタンでは黒が「0-10」、白が「90-100」、クロマのボタンではどちらも「0-10」に入ります。

背景の色によって、背景に近い明るさの色は見分けにくくなります。 背景「黒」（#121214）は L* 5.5 で、4,913色のうち22色はこれより暗い色です。 背景「白」（#FBF9F6）は L* 98.0 で、10色はこれより明るい色です。 背景「灰」（#7A7A7A）は L* 51.2 です。

用語

明度 L*

CIE 1976 L*a*b* 色空間で、明度の相関量として計算する値です。白色刺激と同じ明るさの色で 100、黒で 0 になります。

a*・b*

CIE 1976 L*a*b* 色空間の色座標です。クロマと色相角は、この2つから計算します。

クロマ C*_ab

クロマの相関量です。C*_ab = √(a*² + b*²) で計算します。

色相角 h_ab

色相の相関量です。a*・b* の平面で、+a* の向きから +b* の向きへ測った角度（0〜360°）です。

CIE 1976 L*a*b* 色空間は、ほぼ均等な三次元色空間とされています。 2色の距離 ΔE*_ab は、2色の L*・a*・b* の差から計算した値です。

色彩101による整理

次のきまりは、このページのために色彩101で決めたものです。

• R・G・B を各17段に分けて、4,913色にしたこと
• 色相角を30°ごとの12区分にしたこと。クロマ C*_ab が5未満の色は「N」にまとめています
• 明度とクロマを10ごとに区切ったこと
• RGB立方体を、黒から白への対角線が縦になる向きに置き、赤の角を CIELAB の赤と同じ向きにそろえたこと

出典

• W3C「CSS Color Module Level 4」
• JIS Z 8781-4:2013 測色―第4部：CIE 1976 L*a*b* 色空間
• JIS Z 8721:1993 色の表示方法―三属性による表示
• 立体の描画には three.js（MIT License）を使っています