使い方
- HEXコードを入力するか、rgb()・hsl()を貼り付けるか、カラーピッカーで色を選びます。
- HEX・RGB・HSL・HSV・CMYKのどの欄を編集しても、ほかの値がすぐに更新されます。値をクリックするとコピーできます。
- コントラストチェッカーで文字色と背景色を設定すると、コントラスト比とAA/AAAの判定をプレビュー付きで確認できます。
- ティント・シェードの色をクリックするとHEXをコピー、ダブルクリックで現在の色に設定します。19色まとめてCSS変数でコピーもできます。
CURRENT
HEX
RGB
HSL
HSVHSB
CMYK
どの欄を編集しても、ほかの値がすぐに更新されます。HEX欄には rgb()・hsl() や tomato のようなCSSの色名も入力できます。数値欄では↑↓キーで増減できます（Shiftで10ずつ）。HSL・HSV・CMYKは必要なときだけ小数第1位まで表示するため、同じ値を入力し直してもまったく同じ色に戻ります。CMYKはカラープロファイルを使わない簡易変換なので、印刷時の値とは異なる場合があります。
WCAG 2.x CONTRAST
コントラストチェッカー
—:1
AA通常の文字 · 4.5
AA大きな文字 · 3
AAA通常の文字 · 7
AAA大きな文字 · 4.5
大きな文字＝24px（18pt）以上、または太字で18.66px（14pt）以上。アイコンや入力欄の枠線などのUI要素は3:1以上が必要です（1.4.11）。
大きな文字 24px — いろはにほへと ちりぬるを
太字 18.66px — わかよたれそ つねならむ
本文 16px — デザインシステムの本文テキストは、誰もが快適に読めるよう十分なコントラストが必要です。
キャプション 12px — 文字が小さいほど、コントラストが大切になります。
ボタンタグ
TINTS · SHADES
ティント・シェード（10段階）
TINT + 白
SHADE + 黒
各色は現在の色に白または黒を0〜90%混ぜたものです（sRGB混合、Sassの mix() と同じ）。クリックでHEXをコピー、ダブルクリックで現在の色に設定します。