カラーコンバーター

HEX、RGB、HSL、HSV、CMYK間で変換します。ライブプレビュー。アクセシビリティのためのWCAGコントラストチェッカー。何もブラウザを離れません。

カラーコンバーターの仕組み

カラーコンバーターは入力するとすぐに、HEX、RGB、HSL、HSV、CMYKフォーマット間で色を変換します。また、選択した2色のWCAGコントラストチェックを実行し、コントラスト比と通常テキスト、大きなテキスト、UIコンポーネントのAA/AAAの合格/不合格結果を表示します。すべての計算はブラウザ内で行われ、データはどこにも送信されません。入力したものはデバイスの外に出ることはありません。

同じ色が異なるカラーモデルでどのように見えるかを理解することは、デザインのハンドオフに役立ちます。デザイナーはブランドカラーをHEX #1A4F8Cとして指定するかもしれません。CSS開発者はテーマのためにHSL同等値が必要です。印刷チームはCMYKの内訳が必要です。このツールはすべての方向に同時に変換するため、複数の個別コンバーターを実行する必要はありません。

執筆者： Bastien Sulyan

カラーコンバーターの使い方をステップごとに解説

HEX値を入力するか、カラースウォッチをクリックするか、RGB、HSL、HSV、またはCMYKの値をそれぞれのフィールドに入力します。
他のすべてのフォーマット表現がすぐに更新されて等価の色を表示します。
コントラストチェックを実行するには、2つのカラーピッカーを使ってフォアグラウンドとバックグラウンドの色を選択します。
WCAGコントラスト比とAAおよびAAAコンプライアンスレベルの合格/不合格バッジを確認します。
各フィールドの横のコピーアイコンを使って任意のカラー値をコピーします。

よくある使用例

UIデザイナーがブランドのHEXコードをHSLに変換して、テーマシステムのCSSカスタムプロパティを記述する場合。
Web開発者がコンポーネントを出荷する前に、テキストカラーとバックグラウンドのコントラスト比を確認してWCAG AAコンプライアンスを確認する場合。
印刷デザイナーがWebのHEXカラーを受け取り、印刷ブローシャーで一致させるためのCMYK同等値が必要な場合。
開発者がデザイントークンのRGB内訳をキャンバス描画関数に個別チャンネル値として渡す必要がある場合。

よくある質問

ツールはアルファ（透明度）値をサポートしていますか？

現在のコンバーターは完全に不透明な色（アルファ=1）で機能します。HEXA（8桁のhex）とRGBAはまだスコープ外です。不透明度については、CSSでrgba()またはoklch()記法を使用してアルファチャンネルを別途設定してください。

入力した色はどこかに保存または送信されますか？

いいえ。カラー変換はブラウザのJavaScriptエンジン内で完全に実行される純粋な算術（チャンネルのリマッピングと範囲スケーリング）です。ここに入力したものはサーバーや外部サービスには届きません。

チェッカーはどのWCAGコントラストレベルをサポートしていますか？

ツールはWCAG 2.1の達成基準に対してレポートします。AAは通常テキスト（18pt未満または14pt未満のボールド）に最低4.5:1、大きなテキストとUIコンポーネントに3:1のコントラスト比を必要とします。AAAは通常テキストに7:1、大きなテキストに4.5:1を必要とします。

このツールのCMYK値が専門デザインソフトウェアと異なるのはなぜですか？

このツールが実行するRGBからCMYKへの変換は、カラープロファイルなしの数学的な式です。プロのデザインアプリケーションはインクのドットゲインと基材の特性を考慮するICCカラープロファイルを適用します。ここのCMYK値は概算に役立ちます。制作印刷の場合は、専用のソフトウェアで印刷プロファイルを必ず適用してください。

「cornflowerblue」のようなCSSカラー名をここで変換できますか？

CSSの名前付きカラーはコンバーターフィールドに直接入力できません。名前付きカラーを変換するには、まずCSSリファレンスでそのHEX値を見つけ（cornflowerblueは#6495EDです）、そのHEXをHEXフィールドに貼り付けて他のすべてのフォーマットを確認してください。

ページが読み込まれた後もツールはオフラインで動作しますか？

はい。カラー変換は外部依存関係のない算術です。ページがブラウザキャッシュにある場合は、ネットワーク接続なしに開いてもすべての変換が正常に動作します。