カラー変換ツール

HEX、RGB、HSL、HSV、CMYK、XYZ、Lab間で色を変換し、Adobe RGBの近似値を確認できます。また、Tailwind風のシェードスケールやカラーパレットを生成することも可能です。

色変換結果

#3B82F6

RGB: -
HSL: -
HSV: -
CMYK: -
XYZ (D65): -
CIE Lab: -
Adobe RGB (近似値): -

シェードスケール

入力した色から生成されたTailwind風の50～950のスケールです。シェードを選択すると現在の色として使用できます。

使い方

色空間の変換は、RGB、HSL、HSV、CMYK、XYZ、Labなどのモデル間で色の値を変換します。RGB、HSL、HSVは同じsRGBの色を異なる方法で表現しており、CIE XYZはAdobe RGBなどの他の色空間へ変換する際に用いられるデバイス非依存の中間形式です。Labは明度と色度を分離することで、知覚的に均等な比較を可能にします。

色を入力
HEXコードを入力するか、RGBまたはHSLのスライダーをドラッグしてください。
すべての形式を表示
RGB、HSL、HSV、CMYK、XYZ、Lab、およびAdobe RGBの近似値が連動して更新されます。
スケールまたはパレットの作成
UIトークンにはシェードスケールを、配色にはパレット生成ツールをご利用ください。

CIE XYZを経由した変換

各RGB色空間は、その原色と白色点をCIE XYZ三刺激値として定義しています。変換では3x3行列を適用してソースRGBをXYZに変換し、次に別の行列でXYZをターゲットRGBに変換します。sRGBとAdobe RGBはどちらもD65白色点を使用しているため、両者間では色順応は不要ですが、DCI-P3シアター標準は異なる白色点を使用するため、色順応が必要です。

Adobe RGBで色が異なって見える理由

Adobe RGBはsRGBよりも特にシアングリーン領域で著しく広い色域を持ちます。同じRGB数値でも、Adobe RGBではより彩度の高い色を表します。これは緑の原色がCIE図上でより外側に位置しているためです。アプリケーションがファイルに埋め込まれたプロファイルを無視してsRGBとみなした場合、Adobe RGBでのみ有効な色は意図した色よりもくすんで表示されます。

色域外の色

正規化された値でいずれかのチャンネルが0未満または1を超える場合、その色はターゲット色空間において色域外となります。知覚的レンダリングインテントは色域全体を比例的に圧縮します。相対的な比色インテントは色域内の色を変えずに色域外の値を境界にクリッピングし、絶対的な比色インテントは白色点の差異も保持します。

写真編集におけるsRGBとAdobe RGB

出力先がWebや一般的な画面である場合、ほぼすべてsRGBに対応しているため、sRGBで編集すると意図しない過飽和を防げます。広色域のインクジェットプリンタやオフセット印刷で出力する場合は、Adobe RGBを使用することで緑やシアンのディテールをより多く保持できます。sRGBとAdobe RGBは同じD65白色点（約x=0.3127, y=0.3290）を共有しているため、両者間の変換には白色点の適応処理は不要で、色域のマッピングのみが必要です。

よくある質問

ファイルをsRGBとAdobe RGB間で移動すると、なぜ色が違って見えるのですか？

Adobe RGBは特にシアンから緑の領域において、はるかに広い色域を持っています。Adobe RGBでのRGB値(0, 200, 0)は、sRGBでの同じ値よりも鮮やかな緑を表します。これは、Adobe RGBの緑の原色がCIE図上でより外側に位置しているためです。埋め込みプロファイルを無視してsRGBを前提とするアプリケーションでファイルを開くと、これらのsRGB範囲外の色は正しく表示されず、意図した色よりもくすんで見えます。

CIE XYZを経由した色空間の変換はどのように機能しますか？

各RGB色空間は、その原色と白色点をCIE XYZ三刺激値として定義しています。変換では3x3行列を適用してソースRGBをXYZ（絶対比色）に変換し、次に別の行列でXYZをターゲットRGBに変換します。これら2つの行列はそれぞれの色空間の原色に基づいています。この2段階のプロセスは浮動小数点精度の範囲内で正確であり、入力と出力の間に視認できる差がある場合は、その色がターゲットの色域外であることを意味します。

変換中に色が色域外になった場合、どうなりますか？

色域外の色は、変換先のカラー空間において正規化値で0未満または1を超えるRGBチャンネルを少なくとも1つ持っています。レンダリングインテントによりマッピング方法が決まります。知覚的インテントは色域全体を比例的に圧縮し、相対比色インテントは色域内の色を維持したまま色域外の値を境界にクリッピングし、絶対比色インテントはホワイトポイントの差も保持します。PhotoshopなどのICC準拠アプリケーションでは、変換時にレンダリングインテントを選択できます。

写真編集はsRGBとAdobe RGBのどちらで行うべきですか?

出力先がWebや一般的な画面である場合、そのほとんどはsRGBのため、sRGBで編集することで過度な彩度上昇を防げます。広色域インクを使用する高品質なインクジェットプリンタやオフセット印刷向けには、Adobe RGBを使用するとCMYK対応プリンタで再現可能な緑やシアンのディテールをより多く保持できます。将来の再利用に備える場合や出力メディアが未定の場合は、最終的なWeb書き出し時のみsRGBに変換し、作業用カラースペースとしてAdobe RGBやProPhoto RGBを使用するのがプロの間で一般的です。

主要なカラー空間の正しいホワイトポイントは何ですか?

sRGBとAdobe RGBはどちらもD65(約6,500K、CIE色度x=0.3127、y=0.3290)を使用します。映画上映用のDCI-P3シアター規格はD60相当の白色点(約6,300K、x=0.3140、y=0.3510)を採用しています。Appleのコンシューマー向け派生規格であるDisplay P3はD65を使用するため、sRGBワークフローとの互換性が高くなっています。Rec. 2020もD65を使用します。変換時に適応処理を行わずに白色点が一致していないと色かぶりが発生するため、白色点の境界を越える際は必ず色順応(BradfordまたはVon Kries行列)を適用してください。