カラーコード変換ツールの使い方
- 色を選ぶをクリックして好きな色を選ぶか、カラーコードを入力欄にHEX・RGB・HSLの値を貼り付けます。
- HEX・RGB・HSL・HSV・CMYKの値が表に表示され、コピーボタンでそのままコピーできます。
- コントラスト比の欄で、白文字と黒文字のどちらが読みやすいかを確認します。
- 下のパレットから同系統の明るい色・暗い色をクリックすると、その色をすぐに選択できます。
HEXをRGBに変換する方法
HEXコード #RRGGBB は、赤・緑・青の値をそれぞれ16進数2桁（00〜FF、10進数で0〜255）で書いたものです。2桁ずつ区切って10進数に直すとRGBになります。
#FF8800 → FF＝255、88＝136、00＝0 → rgb(255, 136, 0)
逆にRGBをHEXに変換するときは、各値を16進数2桁に直してつなげます。37 → 25、99 → 63、235 → EB なので、rgb(37, 99, 235) は #2563EB です。3桁のHEX（#F80）は、各桁を2回ずつ書いた #FF8800 と同じ色です。16進数の計算方法が気になる方は進数変換ツールもご利用ください。
HSL・HSV・CMYKはどう違うの？
| 形式 | 構成 | 主な用途 |
|---|---|---|
| RGB / HEX | 光の三原色の強さ（0〜255） | Webサイト、画面上のデザイン |
| HSL | 色相（0〜360°）・彩度・輝度 | CSSで明るさだけを調整したいとき |
| HSV（HSB） | 色相・彩度・明度 | Photoshopなどグラフィックソフトのカラーピッカー |
| CMYK | インク4色（シアン・マゼンタ・イエロー・ブラック）の割合 | チラシ・名刺などの印刷物 |
CMYKの値はRGBから計算式で求めた近似値です。実際の印刷色は用紙やプリンターのカラープロファイルによって変わるため、大切な印刷物は入稿前に印刷会社の色の基準や推奨設定を確認してください。
コントラスト比4.5:1の基準と文字色の選び方
Webアクセシビリティのガイドライン（WCAG 2.1）では、通常の文字と背景のコントラスト比を4.5:1以上（AA）、大きな文字（約24px以上、または太字で約18.66px以上）は3:1以上にすることを推奨しています。7:1以上なら、より厳しいAAA基準も満たします。日本の規格 JIS X 8341-3 もWCAGと同じ基準を採用しているため、官公庁や自治体のサイト制作でもこの数値が目安になります。
コントラスト比は、2色の相対輝度Lを使って (明るい方のL + 0.05) ÷ (暗い方のL + 0.05) で計算します。白と黒の組み合わせが最大値の21:1です。ボタンやバナーの色を決めるときは、上の結果で「AA合格」と表示された文字色を選べば、多くの人にとって読みやすくなります。
CSSでカラーコードを使う方法
変換した値はそのままCSSに貼り付けて使えます。次の3つはすべて同じ色です。
color: #2563EB;color: rgb(37, 99, 235);color: hsl(221.2, 83.2%, 53.3%);
半透明の色が必要な場合は、rgb(37 99 235 / 50%) のようにスラッシュの後に透明度を書くか、HEXの末尾に2桁を追加して #2563EB80 のように書きます（80は不透明度約50％）。