色彩ラボ

機能

• 混色：RGB 線形と OKLab を並べて表示し、違いが一目で分かります
• 明暗の調整：OKLCH の L（知覚）と HSL の L（幾何）を切り替え
• 色階：白を足す tints、黒を足す shades、OKLCH の等明度ラダー
• 色差：CIE76・CIE94・CIEDE2000 を単独または三種類すべて
• 並べ替え：色相・明度・彩度・WCAG 知覚輝度
• 配色の幾何：中間色・分裂補色・トライアド・類似色
• 1 行に 1 色：#hex、rgb()、hsl()、CSS 色名に対応
• 各結果にカラーチップと hex / rgb / hsl の三表記
• 1 行ずつ、またはまとめてコピー
• 計算はすべて端末内で完結し、ページは一切要求を送りません

使い方

1. 色の値を 1 行に 1 つ入力します（混色と色差は 2 行以上）
2. モードを選びます：混色・明暗・色階・色差・並べ替え・配色
3. モードに応じて比率・度合い・段数・方式を調整します
4. 結果がすぐに表示されます。行末のボタンで必要な色をコピーできます

よくある質問

RGB 線形混合と OKLab 混合は何が違いますか？

RGB 線形混合は 3 チャンネルそれぞれの中間値を取る、表示器が 2 ピクセルを重ねる方式です。欠点は中間で灰を通ること：赤と緑の半々は `#808000` という暗く濁ったオリーブになります。OKLab 混合は知覚的に均一な OKLab に換算してから補間するので、中間が灰に落ちません —— 赤と緑はより明るい黄になります。グラデーションや混色、中間色では OKLab の結果が人の期待に近く、現代のデザインツールが既定で使う理由です。

明るくする方式が二つあるのはなぜですか？

OKLCH の L は知覚上の明度で、L を 1 に寄せると同じ色相の明るい色が得られ、彩度の高い色相も保たれます。デザインツールの既定です。HSL の L は幾何的な明度で、L を 100 に寄せると色が白く濁ります —— 色相環の端に近いシアン・青・マゼンタは彩度を失い、灰に近づきます。「濁らせたい」ときの効果でもあるので、両方を残しています。

三種類の色差はどれを見ればよいですか？

CIE76 は Lab 空間のユークリッド距離で、最も単純で粗い方式です。CIE94 は彩度と色相の重みを加えた、グラフィック分野でよく使われる折衷案です。CIEDE2000 は色相回転の項を加えた最も目の感覚に近い方式で、現在の推奨です。識別の目安はおおむね、1 未満は判別不能、1〜2 は訓練された目で判別可、5 を超えると明らかに別の色です。ただししきい値は方式ごとに少しずれるので、同じ方式どうしで比べてください。

どの入力表記に対応していますか？

1 行に 1 つ：`#hex`（3 桁または 6 桁）、`rgb()`、`hsl()`、そして `tomato` などの CSS 色名です。解析は「カラー変換」ツールと同じコードを共有しているため、そちらで使える表記はこちらでも使えます。解析できない行は黙って捨てずに報告します。