カラーピッカーの使い方
- 大きな色見本をクリックしてOS標準のカラーピッカーを開くか、
#1E90FFのようなカラーコードやtomatoのようなカラー名を入力します。 - HEX・RGB・HSL・HSV・CMYKから必要な形式をコピーします。ティント・シェード・配色パターンの色見本をクリックすると、そのカラーコードをコピーできます。
- コントラストの欄で、その色の上に置いた白文字・黒文字がWCAGのレベルAAまたはAAAを満たしているかを確認します。
16進数カラーコードの仕組み
#FF6347のようなカラーコードは3バイトで構成されています。赤（FF = 255）、緑（63 = 99）、青（47 = 71）です。各チャンネルは00からFFまでの値をとり、256 × 256 × 256 = 16,777,216色を表現できます。3つが同じ値ならグレーになり、#000000は黒、#808080は中間のグレー、#FFFFFFは白です。値が大きいほど色は明るくなります。
ティント・シェードと配色パターン
ティントは元の色に白を混ぜた色、シェードは黒を混ぜた色です。このツールでは両方を10%刻みで表示するので、ブランドカラーに合わせたホバー時の色、枠線、背景色を作るのに便利です。
配色パターンは、彩度と明度を保ったまま色相環の上で色相を回転させて作ります。
- 補色（180°）：色相環の反対側にある色。強いコントラストを出したいときや、CTAボタンに向いています。
- 類似色（±30°）：色相環で隣り合う色。落ち着いた統一感のある配色になります。
- トライアド（±120°）：色相環を3等分する3色。鮮やかでバランスのよいデザインに向いています。
色のコントラストとWCAG
Web Content Accessibility Guidelines（WCAG）では、通常のテキストに4.5:1以上（レベルAA）、レベルAAAでは7:1以上のコントラスト比が求められます。大きなテキスト（18pt以上、または太字の14pt以上）は、AAなら3:1以上で十分です。コントラスト比は文字色と背景色の相対輝度を比べたもので、1:1（同じ色）から21:1（白地に黒）までの値をとります。
よくある質問
16進数カラーコードとは何ですか？
16進数カラーコードは、6桁の16進数で色を表す表記法です。赤・緑・青に2桁ずつ割り当て、たとえば#FF6347（tomato）のように書きます。CSS、HTML、デザインツール、画像編集ソフトのいずれでも使えます。
カラーコードで表現できる色は何色ですか？
256 × 256 × 256 = 16,777,216色です。アルファ値の2桁を加えた形式（#RRGGBBAA）では、それぞれの色に256段階の透明度も指定できます。
どのCSSカラー名に対応していますか？
CSS Color Moduleで定義された148色すべてに対応しています。aliceblueからyellowgreenまで、rebeccapurpleも含みます。カラーコードの入力欄に名前を入力するか、ツール下の一覧で絞り込み、色をクリックすると選択できます。