Color to LCH

LCH 色空間とは？

CIE LCH（LCH や L*C*h° とも表記）は CIE LAB 色空間の円筒形です。LAB と同じ明度（L）を保持しますが、矩形の a* と b* 軸の代わりに彩度（C）と色相（H）を使用します。彩度は中性グレー軸からの距離 — 色がどれほど鮮やかか — で、色相はその軸周りの角度で、0° から 360° の度数で表されます。

LCH は LAB を極座標で書き直したものにすぎないため、まったく同じ色域をカバーします。利点は読みやすさです。同じ C で異なる H を持つ 2 色は同じ鮮やかさを共有し、同じ L を持つ 2 色は同じ明るさに見えます。これにより LCH はパレットを構築するデザイナーにとって最も直感的な知覚空間となります。

RGB を LCH に変換する方法

LCH はまず RGB を LAB に変換し、次に矩形の a*、b* ペアを極座標 C と H に変換することで生成されます。完全なパイプラインは：

R' = ((R/255 + 0.055) / 1.055)2.4（線形 RGB）
X = 0.4124·R' + 0.3576·G' + 0.1805·B'（XYZ、D65）
L = 116·f(Y/Yn) − 16、a = 500·(f(X/Xn) − f(Y/Yn))、b = 200·(f(Y/Yn) − f(Z/Zn))
C = √(a² + b²)
H = atan2(b, a) × 180 / π（0–360 に正規化）

ここで f(t) は立方根 LAB 関数、(X_n, Y_n, Z_n) は D65 参照白色です。このツールは色を拾く際にすべてのステップをリアルタイムで実行します。

LCH を使用するタイミング

色相と彩度の知覚制御が必要な場合はいつでも、LCH が正しい選択です：

• カラーパレット。 L と C を固定し、H を変化させて調和のとれた知覚均一な見本を生成。
• ブランドシステム。 色相角度でブランドカラーを定義し、彩度で鮮やかさを制御。
• アクセシビリティ。 異なる色相間で明度 L を一致させ、テキストの可読性を維持。
• デザインツール。 Figma、Sketch、最新の CSS lch() がこの正確な空間を使用。
• 色域チェック。 高い C と極端な H は sRGB 範囲外の色を明らかにする。

日常の Web スタイリングでは、すべてのブラウザが受け入れるため HEX と RGB がまだ最も便利です。LCH は色相回転が知覚明度を維持する必要があるデザインシステムで輝きます。

LCH と LAB、RGB、HEX の違い

LCH と LAB はまったく同じ色を記述します — LCH は LAB の極形式です。RGB と HEX は画面が発する色を記述し、LCH は定義された光源の下で人間がどのように色を知覚するかをデバイスに依存せず記述します。これにより LCH は sRGB より広いです — モニターが表示できない色を含みます。

LCH と LAB の実用的な違いは人間の読みやすさです。LAB では「より赤い」はより大きな a* を意味しますが、a* と b* の両方がなければ色相を判断できません。LCH では色相は単一の角度です — 0° は赤み、90° は黄み、180° は緑み、270° は青み — そのためデザイナーは色の方向を直接推論できます。彩度も「どれほど鮮やかか」の単一の数値を与え、a* と b* を精神的に組み合わせるよりも容易です。

色を LCH に変換する方法

このツールで色を LCH に変換するのは一瞬で、すべてブラウザ内で完結します。アップロード不要、登録不要、インストール不要。以下の手順で行います：

1. 色を拾います。 カラーピッカーを使用するか、RGB 入力に赤、緑、青の値（0–255）を入力します。
2. 結果を読みます。 L、C、H 値と完全な lch() 文字列がリアルタイムで更新されます。
3. LCH をコピーします。 「LCH をコピー」をクリックして値をコピーし、デザインツールや CSS に貼り付けます。

すべてのステップは JavaScript でローカルに実行されるため、色の選択がブラウザから離れることはありません。これによりツールは完全にプライベートで即時です。