カラーコード変換ツール
HEX / RGB / HSL / HSV の相互変換に対応したカラーツール。カラーピッカーから選ぶだけで、各形式の CSS コードを同時に生成します。コントラスト比も自動計算。
✅ 完全無料・登録不要・サーバーへのデータ送信なし
CSS 形式
コントラスト比
白背景 (#FFF)
黒背景 (#000)
WCAG AA: 通常文字 4.5 以上・大文字 3.0 以上 / AAA: 通常文字 7.0 以上
トーンバリエーション
うまく動かない・表示がおかしい場合は お問い合わせフォームからご報告ください。
📖 使い方
-
1
色を選択カラーピッカーで選ぶか、HEX / RGB / HSL のいずれかの表記で直接入力します。
-
2
全形式で確認HEX / RGB / RGBA / HSL / HSV / CMYK などすべての形式が即座に計算されます。
-
3
コントラスト比を確認背景色と組み合わせた WCAG コントラスト比 (AA / AAA) が表示されます。アクセシビリティ対応に必須。
❓ よくある質問
WCAG のコントラスト比の基準は?
通常テキスト (18pt 未満) は AA で 4.5:1 以上、AAA で 7:1 以上。大きなテキスト (18pt 以上) は AA で 3:1、AAA で 4.5:1 が必要です。
HEX と RGB の違いは?
HEX (#FF5733) は 16 進数で 3 バイトを表現、RGB は 10 進数で同じ情報を示します。HEX は CSS / HTML で最短、RGB は透明度 (alpha) を扱いやすいのが特徴です。
HSL と HSV の使い分けは?
HSL は「色相・彩度・輝度」で、デザインシステムで色のトーンを作るのに便利。HSV は「色相・彩度・明度」で、カラーピッカー UI で直感的。どちらも可逆変換できます。
Tailwind の色パレットは対応していますか?
選択した色に近い Tailwind の色 (gray-500 / blue-600 など) を自動で提案します。Tailwind プロジェクトでそのまま使える色を選べます。