使い方
- 色をCSSの任意の形式（#2440c4、rgb(36 64 196)、hsl(229 69% 46%)、teal などの色名）で入力するか、カラーピッカーで選びます。
- 表から必要な形式をコピーします。
- コントラスト比で、この色の文字が白背景・黒背景で読みやすいか（またはその逆）を確認します。
- 明るさのバリエーションの色をクリックすると、その色に切り替わります。
コントラスト比の基準（WCAG）
- AA：通常の文字で4.5:1以上。
- AA Large：大きな文字（24px以上、または太字19px以上）で3:1以上。
- AAA：通常の文字で7:1以上。
ウェブアクセシビリティの日本産業規格JIS X 8341-3も、同じWCAG 2の基準を採用しています。
CMYKについて
ここでのCMYKはRGBからの簡易変換です。実際の印刷色は用紙・インク・カラープロファイルによって変わるため、ロゴなど重要な色は印刷会社に確認してください。
よくある質問
OKLCHとは何ですか？
人の目に感じる明るさと鮮やかさに基づいた、新しいCSSの色の形式です。Lの値だけを変えると均等に明るく・暗くなるため、デザインシステムの配色作りに便利です。
HSLとHSVの違いは？
どちらも色相と彩度で色を表します。HSLの明度は黒→純色→白、HSVの明度は黒→純色です。PhotoshopなどではHSVを「HSB」と呼びます。
どんな形式で入力できますか？
ブラウザが理解できる形式なら入力できます。HEX（3桁・6桁）、rgb()、hsl()、hwb()、CSSの色名（148色）などです。