色変換とコントラスト比チェッカー

このツールは HEX、RGB、HSL、CMYK の 4 つの形式をリアルタイムで相互変換します。カラーピッカーで色を選ぶか、どれか 1 つの欄に値を入力すると残り 3 つが即座に更新され、各欄にコピーボタンが付いています。たとえばアンバー色の #F59E0B は rgb(245, 158, 11)、hsl(38, 92%, 50%)、cmyk(0%, 36%, 96%, 4%) に変換されます。HEX 欄は #F90 のような 3 桁の省略形にも対応し、#FF9900 に展開されます。

形式ごとに役割があります。HEX は Web のコードやデザインツールで最も一般的な書き方、RGB は画面の赤・緑・青の光に対応します。HSL は色相・彩度・明度で色を表すため、同じ色味で少し明るくしたいときは L の値を変えるだけで済み、CSS で特に便利です。CMYK は印刷で使う 4 色のインクを表します。RGB・HSL・CMYK を入力するときは、rgb(255, 153, 0)、hsl(36, 100%, 50%)、cmyk(0%, 40%, 100%, 0%) のようにカンマ区切りの整数で書いてください。透明度（アルファ）には対応していません。

ここでの CMYK は RGB から簡易的な式で計算した値で、ICC プロファイルは使っていません。実際の印刷結果は用紙、インク、印刷機によって変わるため、入稿前には印刷会社の色見本や設定を基準にしてください。また HSL は整数に丸めるため、HSL から HEX に戻すとまれに 1 段階ずれることがありますが、これは通常の四捨五入によるものです。

「コントラストチェッカー」タブでは文字色と背景色を選ぶと、WCAG 2.1 の式でコントラスト比を計算し、通常テキスト（AA 4.5:1、AAA 7:1）、大きなテキスト（AA 3:1、AAA 4.5:1）、UI コンポーネント（3:1）の合否を表示します。下にはリアルタイムのプレビューもあります。たとえば白背景に #767676 のグレー文字は 4.54:1 でぎりぎり AA に合格しますが、#777777 は 4.47:1 で不合格です。配色の提案まで含めた詳しい分析には、当サイトのカラーコントラスト分析ツールを使ってください。