カラーピッカー
あらゆる形式で、色の正確なコードを見つけられます。
コントラストチェック
- AA
- AA（大きな文字）
- AAA
- AA
- AA（大きな文字）
- AAA
ブラウザ内で動作します。入力した内容はどこにも送信されません。
- 5つのカラー形式
- WCAGコントラストチェック
- 不透明度に対応
色の選び方
- 正方形内をドラッグして彩度と明度を設定し、色相スライダーを動かします。
- またはHEX、RGB、HSL、HSV、CMYKのいずれかの形式でコードを直接入力します。
- 必要なコードをコピーし、下でコントラストを確認します。
カラー形式の比較
以下の各行はすべて同じオレンジ色を表しています。表記方法が違うだけです。
| 形式 | 例 | 主な用途 |
|---|---|---|
| HEX | #f08a3c | CSS、HTML、デザインツール |
| RGB | rgb(240, 138, 60) | CSS、画像編集ソフト |
| HSL | hsl(24, 84%, 59%) | CSS、目視での調整が最も簡単 |
| HSV/HSB | hsv(24, 75%, 94%) | ペイント・デザインアプリのピッカー |
| CMYK | cmyk(0%, 43%, 75%, 6%) | 印刷デザインとインクの調合 |
Web用にはHEXかRGBを、色相を変えずに明度や彩度だけ微調整したいときはHSLを、印刷の出発点にはCMYKを使いましょう。
WCAGのコントラストレベル
下のコントラストチェックでは、選んだ色を白と黒それぞれと比較し、WCAG 2のレベルで評価します。
| レベル | 通常の文字 | 大きな文字 |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
大きな文字とは約24px、太字なら19px程度を指します。ほとんどのサイトはAAを満たせば十分です。AAAはより厳しい基準で、主に政府機関やアクセシビリティ重視のサイトで使われます。
アクセシブルな色を選ぶコツ
- HSLで色相はそのままに明度だけ下げると、ホバーやアクティブ状態用の同系色の濃い色が作れます。
- 白背景でAAに合格する色でも、色付きの背景では不合格になることがあります。白や黒だけでなく、実際のページの背景で確認しましょう。
- スポイト機能はパソコン版のChromeとEdgeでのみ動作します。FirefoxとSafariはまだEyeDropper APIに対応していません。
- 大量印刷の前には必ず印刷会社の色校正を確認してください。同じ数値でもコート紙と非コート紙では見え方が変わります。
カラーピッカーのFAQ
画面上の色のコードを取得するには？
パソコン版のChromeやEdgeでは、「画面から選択」をクリックしてから画面上の任意の場所をクリックします。他のブラウザはまだこの機能を提供していないため、スクリーンショットを撮って画像用のカラーピッカーで開いてください。
HEX、RGB、HSLの違いは何ですか？
同じ色を異なる方法で表しています。HEXとRGBは赤・緑・青の量を示し（HEXは16進数で表記）、HSLは色相・彩度・明度で表すため、手作業での調整がしやすくなっています。
読みやすい文字に必要なコントラスト比は？
WCAGのAAレベルでは通常の文字で4.5:1以上、大きな文字（約24px、太字なら19px）で3:1以上が必要です。AAAレベルでは通常の文字の基準が7:1に上がります。
CMYKの値は正確ですか？
RGBから直接計算で変換した値です。実際の印刷の色はインク、用紙、プリンターのプロファイルによって変わるため、あくまで目安とし、必ず印刷の色校正で確認してください。
不透明度のスライダーは何を変えますか？
透明度を0（透明）から100（不透明）まで設定します。100未満になるとHEXコードに2桁が追加され、RGBはrgba()になります。コントラストは各背景上での見え方に基づいてチェックされます。
RGBにはないHSVの利点は何ですか？
HSVは色相と、どれだけ明るく鮮やかに見えるかを分けて扱います。そのため、ペイントツールや写真編集ソフトでは赤・緑・青を目分量で混ぜる代わりに、色相用と明度用のスライダーがそれぞれ用意されています。
ここからPantoneカラーを取得できますか？
いいえ。Pantoneは特定のインクに紐づいたライセンス制のスポットカラーシステムで、RGBやCMYKからの単純な数式変換ではありません。CMYKの値を目安にして、正確な色は印刷会社に確認してください。