RGBからOKLCHへ変換

このRGBからOKLCHへの変換ツールは、一般的な3つのsRGBチャンネルを、知覚的に均等な円筒座標へ変換します。赤・緑・青に0から255の値を入力すると、OKLCHの明度、彩度、色相と、CSSで利用しやすい文字列を取得できます。計算は、sRGB伝達関数の復号、線形RGBからOKLabへの行列変換、OKLabからOKLCHへの円筒座標変換という決定的な手順で行います。値の欠落、有限でない数、不正な型、範囲外のチャンネルは、暗黙に切り詰めず、明確な検証エラーとして返します。

sRGB座標をOKLCHへ変換する理由

RGBはディスプレイが赤・緑・青の光をどのように混ぜるかを表しますが、各チャンネルの数値を同じ幅だけ変えても、人が感じる変化量は通常同じになりません。ある色域では20の増加が大きく見え、別の色域ではわずかな差にしか見えないことがあります。OKLabは、座標間の距離が知覚される色差により近づくよう設計されています。

OKLCHはOKLabを扱いやすい円筒座標に並べ替えます。明度は色の明るさ、彩度は無彩色軸からの距離、色相はその軸の周囲の角度を度数で示します。そのため、デザイントークンの段階作成、関連色の生成、パレット比較に便利です。

入力は0から255までの実際のsRGBチャンネルに限定し、小数も受け付けますが、16進数、割合、色名、広色域プロファイルは推測しません。色相は0以上360未満に正規化します。無彩色では色相が数学的に定義できないため、安定した決定的な規約として0を返します。

変換処理の計算方法

通常のsRGB値は伝達関数で符号化されているため、表示されているRGB数値にOKLab行列を直接適用することはできません。まず各チャンネルを255で割り、区分的なsRGB伝達関数で復号します。低い値には線形部分を、高い値にはべき関数を使います。

得られた3つの線形光成分に、OKLab定義の線形RGBからLMSへの固定行列を掛けます。各LMS成分の立方根を求め、2つ目の固定行列を適用すると、OKLab明度と反対色軸a、bが得られます。最後に、aとbのユークリッド長から彩度を、atan2から色相を計算し、ラジアンを度へ変換して正の円周上に正規化します。

明度は割合ではなく、sRGBではおおむね0から1となる標準OKLab尺度です。返されるoklch文字列にも同じ丸め済み値を使用します。

デザインやコードで安全に利用する方法

すべて必須で、有限かつ0から255までの範囲内でなければなりません。画像サンプリングや中間処理では8ビット整数以上の精度を保持する場合があるため、小数値も受け付けます。一方、数値文字列、NaN、Infinity、配列、オブジェクトはチャンネルとして受け付けません。

成功時には検証済みチャンネルを再掲し、l、c、hと簡潔なoklch文字列を返します。OKLCHは知覚的な編集に適していますが、彩度を上げたり明度を変えたりすると、対象ディスプレイや出力形式の色域外になる場合があります。

本ツールは入力されたsRGB色の座標を示すもので、色域マッピング、コントラスト検査、アルファ合成、プロファイル変換、アクセシビリティ認証は行いません。それぞれ専用ツールをご利用ください。ネットワーク、時計、乱数、可変状態を使わないため、同じ入力には常に同じ結果を返します。