01
3桁でも6桁でも基準色を決める
HEX入力とOSのカラーピッカーを使えます。初期色は#3B82F6で、入力が止まると自動更新されます。設定をまとめて変えたい場合は自動生成を切り、CtrlまたはCmd＋Enterで実行できます。
色とアクセシビリティ
カラーパレット生成— 基準色から使えるCSS変数へ
HEXの基準色から配色を比べ、9段階の色と白文字の読みやすさを確認します。
カラーパレット生成
計算はこのブラウザー内で完結し、色は送信しません。
生成結果
配色パレット
5色中5色を表示
9段階の明度階調
2色の混色
基準色のHEX
2色の混色
混色する2色目のHEX
生成完了・表示中5色
CSS変数
ブランドの青は決まっていても、補助色やボタン色まで一つずつ決めるのは難しいものです。カラーパレット生成なら基準色を固定したまま、類似色、補色、トライアドなどの関係を見比べられます。配色ジェネレーターが示すのは候補であり、デザインの良し悪しを自動判定するものではありません。
このカラーパレット生成には、基準色から作る9段階の明度階調、別の色との割合付き混色、白文字のコントラスト確認もあります。配色パレットで採用した候補を絞り込んでから、現在見えている色と階調をCSS変数にまとめられます。
カラーパレット生成を使う理由
色相の調和と文字の読みやすさを、別々の根拠で確認できます。
基準色を保ったまま関係だけ変える
一つのHEXから補色・類似色や三方向のトライアドを切り替えます。カラーパレット生成は基準色をランダムな別色に置き換えません。明度階調も同じ基準色から作るため、配色ルールの違いを比べやすくなります。
白文字が読める候補を数字で選ぶ
各色に白文字とのコントラスト比を表示します。4.5:1の絞り込みを有効にすると、通常文字のAA基準に届かない色が配色とCSS出力から外れます。色自体は勝手に補正しません。
基準色を実装用の色値にするまで
02
配色と混色を混同しない
初期ルールは落ち着いた類似色です。補色やトライアドに切り替えると、色相環上の位置に応じて色数も変わります。別のHEXとの混色は初期値50%で、RGBとHSLでは中間色が異なる場合があります。
03
絞り込み後の色数を確かめる
白文字の比率と表示色数を見てからAA絞り込みを使います。候補が0色になっても基準色は変わりません。単色HEXをコピーするか、表示中の配色・9段階の階調・混色をCSS変数で保存します。
配色からコードまでを一続きに
6種類の配色ルール
類似色、補色、トライアド、スプリット補色、テトラード、単色を選べます。色相環の位置関係だけを変えるので、基準にしたブランドカラーは維持されます。
基準色を挟む9段階
明るい4色、基準色そのもの、暗い4色を出します。明度階調は背景、枠線、ホバー、文字などの候補に使えます。白と黒へのRGB混合であり、知覚的な等間隔は保証しません。
割合を指定する混色
2色目と0～100%の割合を指定します。RGBはチャンネルを補間し、HSLは色相の短い側を通ります。どちらも画面用HEXの計算で、絵の具の混ざり方とは異なります。
白文字のAA候補だけを表示
最終的なsRGB色値を使ってコントラスト比を計算します。絞り込みは4.5:1未満の色を隠すだけで、黒文字や画像の上の文字までは検査しません。
表示結果に合うCSS変数
コピーとCSSファイルの保存に対応します。現在見えている配色、9段階の階調、混色が入り、絞り込みで外れた色は書き出しません。
計算結果を使う前に知っておくこと
- 不透明なHEXのみ
- 入力できるのは#RGBと#RRGGBBです。透明度、画像からの抽出、広色域色は対象外です。透明色のコントラストは背景との合成を決めなければ計算できません。
- 調和と美しさは別
- 色相環上の角度は候補を作るだけです。色の面積比、ブランドとの相性、実際のUIでの印象は数値だけでは決まりません。
- AA表示には検査範囲がある
- WCAGの相対輝度式で、白い通常文字と不透明な色見本の比を計算し、4.5:1で判定します。黒文字、大きな文字の例外、画像背景、半透明レイヤーやアイコンは未検査です。
- 絞り込みは色を修正しない
- 基準未達の配色だけを表示とCSS出力から除きます。基準色、9段階の階調、混色結果は変えず、0色になった場合もその事実を示します。
- 混色は画面上の数値
- RGBとHSLの補間はディスプレイ向けのHEXを返します。インクや絵の具の反射特性は扱わないため、印刷後の色を保証しません。
カラーパレット生成のよくある質問
カラーコードはどの形式を使えばいいですか？
Webでそのまま使うなら、このページが返す6桁のHEXが扱いやすい形式です。入力は3桁も受け付け、コピーする結果は6桁にそろえます。RGBやHSLを入力する機能はありません。
WCAGコントラスト比とは何ですか？
文字色と背景色の相対輝度から求める比率です。ここでは白い通常文字を各色見本に置いた場合に限り、4.5:1以上をAAとして示します。
補色と類似色はどちらを使えばいいですか？
補色は強い色相差が必要なアクセント向け、類似色は近い色で落ち着いた印象を作りたいときの候補です。どちらでも文字のコントラストは別に確かめてください。
生成したパレットを保存できますか？
このページではCSS変数のコピーまたはダウンロードで値を残せます。パレットの保存履歴や共有URLはありません。ブラウザーを閉じる前に必要な値を書き出してください。
補色を使ったのに色がぶつかって見える場合は？
補色は色相環では向かい合っていても、同じ面積で強く並べると競合して見えることがあります。基準色を主役にし、補色を小さなアクセントとして試し、白文字の比率も確認してください。
配色についてほかに聞きたいことは？