カラーコード変換
HEX・RGB・HSL に加えてコントラスト判定も
ブラウザ内で処理
入力
結果
結果
#1FA89C
- HEX
#1FA89C - RGB
rgb(31, 168, 156) - HSL
hsl(175, 69%, 39%) - CMYK
cmyk(82%, 0%, 7%, 34%)
明暗スケール (クリックでその色に切り替え)
白背景でのコントラスト
2.94基準未満
黒背景でのコントラスト
7.14AAA
WCAG: 本文には4.5:1 (AA)、AAA では7:1 が必要です。CMYK はカラープロファイルを考慮しない目安値です。
デザインツールは HEX で話し、CSS アニメーションは HSL を求め、canvas のコードは RGB のチャンネルを求めます。一度色を選べばすべての表記が得られ、その上に置く文字が読めるかを決めるコントラストの数値も確認できます。
使い方
- 1 色を選ぶか、任意の形式のコードを貼り付けます。
- 2 他のすべての表記が同時に表示されます。
- 3 明暗のスケールを使えば、統一感のあるパレットを作れます。
- 4 文字の背景に使う前に、コントラスト比を確認してください。
よくある質問
コントラスト比はどのくらい必要ですか。
WCAG の AA は本文で4.5:1、大きな文字で3:1 を求めます。AAA は7:1 です。3:1 を下回ると「やや読みにくい」ではなく、多くの人にとって本当に読めません。
HEX ではなく HSL を使う理由は何ですか。
HSL は色相を彩度・明度と分離するため、「10%明るくする」が3チャンネルの当てずっぽうではなく数値1つで済みます。デザインシステムがスケールを HSL で組むのはそのためです。
CMYK の値は印刷に使えますか。
おおよその目安としてのみです。実際の変換は紙・インク・カラープロファイルに左右されます。印刷に出すものは、計算式ではなく印刷所から値をもらってください。