カラーパレット 作成
赤 #ff0000 の補色は、色相環の反対側にある #00ffff です。赤のトライアド配色では #00ff00 と #0000ff が加わります。白地に黒文字のコントラスト比は 21:1 です。
使い方
- カラーボックスで基準の色を選ぶか、#0b7a6a のようなHEXコードを入力します。rgb(11, 122, 106) のようなRGBやHSLの書き方でも入力できます。
- 補色、類似色、トライアド、同系色から配色を選びます。基準の色には枠がつきます。
- HEX・RGB・HSLの行をクリックするとその値をコピーできます。「HEXをすべてコピー」でパレット全体をまとめてコピーします。
- 各色に表示される2行のコントラストを確認します。その色の上に白い文字と黒い文字を置いたときの読みやすさです。
計算方法
色はHSLで扱います。色相は色相環上の位置（0〜360度）、彩度は鮮やかさ、明度は明るさです。配色は色相だけを回して彩度と明度はそのままにするので、パレット全体の雰囲気がそろいます。
補色は色相環で180度反対の色を加えます。類似色は左右30度ずつ隣の色、トライアドは120度ずつ離れた3色です。同系色は色相と彩度を保ったまま明度だけを15ポイントずつ変え、両端が真っ白や真っ黒にならないよう8〜92%の範囲に収めます。
コントラスト比はWCAG 2の計算式に従います。各チャンネルをリニアな光の量に変換して相対輝度 L = 0.2126 R + 0.7152 G + 0.0722 B を求め、（明るい方の L + 0.05）÷（暗い方の L + 0.05）で1:1から21:1の比を出します。
WCAGでは通常の文字に4.5:1以上（AA）、AAAなら7:1以上を求めています。大きな文字（約24px、太字なら約19px以上）はAAで3:1です。比の下の表示は通常の文字の基準で判定し、大きな文字の基準だけ満たす場合は「AA大」と表示します。
コントラスト比の基準
| レベル | 比 | 用途 |
|---|---|---|
| AA大 | 3:1 | 大きな文字とUI部品 |
| AA | 4.5:1 | 通常の本文 |
| AAA | 7:1 | より高い読みやすさ |
よくある質問
補色とは何ですか？
色相環で基準の色のちょうど反対側、180度離れた色です。組み合わせるとコントラストが強く、背景に対して目立たせたいボタンなどに向いています。
Webサイトにはどの配色がいいですか？
落ち着いた画面にするなら同系色がいちばん無難です。類似色はまとまりがありつつ少し変化が出ます。補色とトライアドは主張が強いので、1色をメインにして残りは小さなアクセントに使いましょう。
コントラスト比は必ず高くないとだめですか？
文字ならそうです。本文は背景に対して4.5:1以上がほしいところです。装飾の図形や大きな見出しは低めでもかまいませんが、ボタンやリンクの中の文字は基準を満たすようにしましょう。
生成された色が手で選んだ色と少しずれるのはなぜ？
基準の色は入力したとおりに保ちます。ほかの色はHSLで計算してRGBの整数に丸めるので、手で選んだ色と1段階ずれることがあります。
色は保存されますか？
されません。計算はすべてブラウザの中で行います。基準の色と配色を残したいときは「リンクを共有」でURLに保存してください。