🎨 カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換する無料ツール。白文字・黒文字を載せたときのコントラスト比とアクセシビリティ基準の判定、明度違いの色の一覧も同時に確認できます。
「#1F6FEB」「1f6feb」「#FFF」のいずれの形でも入力できます。
コピー用の表記
| HEX | — |
|---|---|
| RGB | — |
| HSL | — |
文字色との組み合わせ
明度を変えた色（ホバー用などに）
| 明度 | HEX | 見本 |
|---|
使い方
- 色を選ぶか、HEX・RGB・HSLのどれかに直接入力します。
- ほかの表記が自動で計算され、コピー用の書式が表示されます。
- 白文字・黒文字を載せたときのコントラスト比も同時に確認できます。
コントラスト比の基準
| レベル | 通常の文字 | 大きな文字（18pt以上） |
|---|---|---|
| AA（推奨される最低ライン） | 4.5:1 以上 | 3:1 以上 |
| AAA（より高い水準） | 7:1 以上 | 4.5:1 以上 |
コントラストが足りない配色は、視力の弱い方や、屋外の明るい場所でスマートフォンを見ている人に 読めなくなります。特に薄いグレーの文字は見た目が上品でも読みにくいため、 本文には最低でも4.5:1を確保してください。
HSLで配色を組み立てる
基準となる色を1つ決めたら、HSLの明度だけを変えることで、 統一感のある色の組を作れます。たとえばボタンの通常色の明度が52%なら、 ホバー時は45%、押した状態は38%、といった具合です。 色相と彩度を固定したまま明度を動かすと、色味がぶれません。
補色（反対色）が欲しいときは、色相に180を足します。色相215の反対は35です。 3色でまとめたいときは色相を120ずつずらすと、バランスの取れた組み合わせになります。
よくある質問
HEXとRGBはどう違いますか？
表し方が違うだけで、同じ色を指しています。HEXは「#FF5733」のように16進数2桁ずつで赤・緑・青を表し、RGBは「rgb(255, 87, 51)」と10進数で表します。CSSではどちらも使えます。
HSLを使うとどんな利点がありますか？
色相（Hue）・彩度（Saturation）・明度（Lightness）で表すため、「同じ色味のまま少し明るくする」といった調整が直感的にできます。ボタンのホバー時の色を作るときなど、明度だけを10%下げれば自然な変化になります。
コントラスト比はどれくらい必要ですか？
ウェブアクセシビリティの国際基準（WCAG）では、通常の文字で4.5:1以上、18ポイント以上の大きな文字で3:1以上が求められます。より厳しいAAAレベルではそれぞれ7:1、4.5:1です。
「#FFF」のような3桁の指定は使えますか？
使えます。3桁の場合は各桁が2回繰り返されたものとして扱われ、「#FFF」は「#FFFFFF」と同じ白になります。このツールも3桁の入力に対応しています。
透明度（アルファ値）も扱えますか？
このツールは不透明な色のみを扱います。CSSで透明度を指定したい場合は、rgba(255, 87, 51, 0.5) のように4つ目の値を、あるいはHEXなら8桁の「#FF573380」の形式を使ってください。