カラー変換 — HEX、RGB、HSL、CMYK 間で変換
HEX、RGB、HSL、CMYK 間で色を変換し、ライブプレビューを表示。リアルタイムカラースウォッチとアクセシビリティのコントラスト比チェックを、すべてブラウザ内で。
色は単一の視覚的知覚を、媒体に応じて 4 通りの方法で符号化したものです。画面は RGB（赤・緑・青チャンネル、各 0-255）で表現します。Web コードは HEX（16 進の RGB、#3B82F6）で表現します。デザイナーやカラーピッカーは HSL（色相、彩度、輝度 — 濃淡を選ぶためのより直感的なモデル）で表現します。印刷は CMYK（シアン、マゼンタ、イエロー、キー／ブラック — 光ではなく顔料を混合する減法混色モデル）で表現します。各モデルはそれぞれの媒体に適しており、相互変換は厳密ではありません。RGB と HEX は同じ色を異なる記法で表したもの、HSL は同じ RGB 色空間の別のパラメータ化、CMYK はより小さい色域のため RGB のすべての色を表現できません。
色変換で自明ではないのは、4 つのモデルの表現力が等しくないことです。RGB と HEX は画面が表示できるすべての色（合計約 1670 万色）を表現できます。HSL は RGB の再パラメータ化なので、同じ 1670 万色を知覚的性質で分類し直したものに過ぎません。CMYK は減法混色で、シアン、マゼンタ、イエロー、ブラックのインクを重ね合わせて再現できる色のみを表現し、sRGB 色域の約 70% にすぎません。画面で完璧に表示される高彩度の青や緑は、印刷するとくすんだ色になることが少なくありません。具体的な差異を知るには、印刷プルーフを確認するか、カラーマネジメントされたワークフローを用いる必要があります。
最終的なハンドオフについて：Web サイトの色を選ぶ場合、CSS では HEX と RGB が使われ、HSL は濃淡を選ぶのに扱いやすい入力形式です。印刷会社に色を渡す場合、本ツールの CMYK 値は出発点にすぎません。ソースファイル（PDF、AI、INDD）を持参し、印刷会社のカラーマネジメントに最終的なインク配合を任せてください。アクセシビリティ設計では、コントラスト比チェックが最も重要です。WCAG に不合格の色は、どれほど美しくてもテキスト色としては使えません。
使い方
任意の形式で色を入力
HEX コード（#3B82F6）、RGB トリプレット（59, 130, 246）、HSL 値（217°、91%、60%）を入力するか、デザインソフトから貼付けします。入力形式は入力内容から自動検出されます。
4 形式を一度に確認
出力パネルには同じ色の HEX、RGB、HSL、CMYK 値が表示されます。右側のライブスウォッチは入力に応じて更新されるため、リアルタイムで色を確認できます。
コントラスト比をチェック
アクセシビリティパネルは、白と黒の背景に対する WCAG コントラスト比と、本文テキストと大テキストそれぞれの AA/AAA 合格・不合格バッジを表示します。アクセシビリティガイドラインを満たすテキスト色を選ぶのに役立ちます。
よくある質問
CMYK の値が Photoshop の表示と異なるのはなぜですか？
CMYK 変換はカラーマネジメントに依存します。本ツールは標準的な sRGB から CMYK への変換（多くの Web デザインツールで採用されているもの）を使用するため、印刷会社の ICC プロファイルに対応した変換とは異なる場合があります。印刷の場合は、デザインソフトから適切なプロファイルでソースを書き出してください。
変換は可逆ですか？
HEX、RGB、HSL は数学的に等価で、損失や丸めは発生しません。CMYK は sRGB よりも小さい色空間であるため、sRGB → CMYK → sRGB と変換すると彩度の高い色はシフトします。シフトは小さく（各チャンネル数ユニット）、キャリブレーション済みのディスプレイでは視認できます。
Alpha チャンネルは何をしますか？
Alpha をオンにすると不透明度スライダー（0-100%）が追加されます。出力には RGBA と HSLA 値が含まれます。なお CSS は Alpha 付き CMYK をサポートしていないため、印刷色は常に不透明で、CMYK は Alpha 成分なしで表示されます。
コントラスト比はどのように算出されますか？
コントラスト比は WCAG 2.1 の式 (L1 + 0.05) / (L2 + 0.05) に従います。L1 と L2 は 2 色の相対輝度です。本文テキストは AA で 4.5:1、大テキストは 3:1 が必要です。AAA ではそれぞれ 7:1 と 4.5:1 が必要です。
色を後で保存できますか？
サイドパネルの履歴リストに、このセッションで変換した直近 12 色が保持されます。永続的に保存するには、HEX コードをデザインシステムファイルや Figma ライブラリにコピーしてください。セッションをまたいで保存されることはありません。
制限事項
- Pantone マッチング非対応Pantone 色は印刷用のプロプライエタリなスポットインキです。本ツールは Pantone コードとの相互変換はできません。Pantone から CMYK への近似値は、Pantone の見本帳や印刷会社の参照チャートをご利用ください。
- CMYK は近似値sRGB から CMYK への変換は、カラーマネジメントされた ICC プロファイルではなく標準的な数式を使用します。紙種や印刷機が異なる印刷会社では、若干異なる結果になります。印刷の場合は、デザインソフトから印刷会社のプロファイルで書き出してください。
- 色覚シミュレーションなしアクセシビリティチェックは輝度コントラスト（WCAG 2.1）をカバーしますが、1 型色覚（protanopia）、2 型色覚（deuteranopia）、3 型色覚（tritanopia）のシミュレーションは含まれません。色覺チェックは、赤緑または青黄色覚異常の見え方で色を表示するツールをご利用ください。
プラットフォーム別の注意点
- macOS
- Digital Color Meter（Applications > Utilities 内）はカーソル下の色を読み取れます。サンプリングした色を、macOS のカラーピッカーが表示しない HSL や CMYK に変換するには本ツールが適しています。
- Windows
- PowerToys の Color Picker は画面上の任意のピクセルを読み取れます。CSS やデザインツール、印刷スペックに貼付けできるコード形式（HEX、RGB、HSL、CMYK 文字列）の変換には、本ブラウザツールが適しています。
- Linux
- GIMP のカラーピッカーと KDE の KColorChooser は HEX、RGB、HSV を表示します。本ブラウザツールは HSL と CMYK 出力を追加し、アクセシビリティ用のコントラスト比チェックも備えています。
- Web
- 完全にクライアントサイドで動作します。ページ読み込み後はオフラインでも動作します。コントラスト比はパース処理以外で唯一計算が必要な部分で、デザインレビューやアクセシビリティ監査で役立ちます。