このツールについて
デザインツールから受け取った色は HEX、CSS の既存コードでは RGB、デザインシステムの定義では HSL や OKLCH と、扱う形式は場面によってばらばらです。このツールは入力された文字列がどの形式かを自動的に判定し、対応するすべての表記を一度に表示します。形式を選ぶ操作は必要ありません。
透明度つきの表記にも対応しています。`#rrggbbaa` や `rgba()` を入力すると、アルファ値を保ったまま他の形式へ変換します。アルファをスライダーで調整すれば、すべての表記が同時に更新されます。
変換結果の下には、白文字・黒文字を載せたときのコントラスト比を表示します。WCAG の達成基準（AA / AAA）を満たしているかをその場で確認できるため、配色を決める段階で読みやすさを判断できます。
使い方
- 入力欄にカラーコードを貼り付けます。`#3f51b5`、`rgb(63 81 181)`、`hsl(231 48% 48%)`、`rebeccapurple` などが使えます。
- 形式は自動で判定され、他のすべての表記が一覧で表示されます。
- 各行のコピーボタンを押すと、その表記をクリップボードにコピーできます。
- アルファのスライダーを動かすと、透明度を含めた表記に切り替わります。
特徴
形式の自動判定
HEX（3/4/6/8桁）、rgb()、rgba()、hsl()、hsla()、hwb()、oklch()、CSS 色名を判別します。
一括変換
1つ入力すれば、対応するすべての表記が同時に表示されます。形式を選ぶ必要はありません。
透明度に対応
アルファ値を保ったまま変換します。スライダーでの調整も可能です。
コントラスト比の確認
白・黒それぞれとのコントラスト比と、WCAG AA / AAA の判定を表示します。
よくある質問
OKLCH とは何ですか？
人間の知覚に近い形で色を表す新しい CSS の色表記です。明度を変えても色味の印象が保たれやすく、配色の調整に向いています。主要なブラウザで利用できます。
CSS の色名はどこまで対応していますか？
CSS で定義されている 148 種類の色名すべてに対応しています。`transparent` も扱えます。
変換結果に誤差が出ることはありますか？
HSL や OKLCH は小数を含むため、表示は丸められています。再変換すると 1 未満の差が生じることがありますが、見た目に影響する差ではありません。
コントラスト比の基準は何ですか？
WCAG 2.1 の定義に基づいて計算しています。通常サイズの文字では 4.5:1 以上で AA、7:1 以上で AAA を満たします。