カラーパレット生成
基準の色を1つ選ぶだけで、補色・類似色・トライアドなど6通りの配色を自動で作ります。色をクリックすればHEXコードをそのままコピーできます。
| 役割 | HEX | HSL | 色相差 |
|---|---|---|---|
| 基準 | #3e5bfe | 231, 99%, 62% | — |
| 補色 | #fee13e | 51, 99%, 62% | +180° |
色相環の正反対。もっとも強い対比が生まれ、目立たせたいときに使う。色をクリックするとHEXコードをコピーします。彩度と明度は基準の色に合わせています （単色の濃淡のみ明度を変えています）。
使い方
カラーピッカーかHEXコードで基準の色を決め、配色の種類を選ぶだけです。 生成された色をクリックするとHEXコードがコピーされます。表にはHSL値と色相差も出るので、 微調整したいときの手がかりになります。
6つの配色の考え方
色は色相環という輪の上に並んでいます。この輪のどこを取るかで、配色の印象が決まります。
| 配色 | 色相の取り方 | 印象と使いどころ |
|---|---|---|
| 補色（2色） | +180° | 色相環の正反対。もっとも強い対比が生まれ、目立たせたいときに使う |
| 類似色（3色） | −30° / +30° | 色相環で隣り合う色。まとまりが出て落ち着いた印象になる |
| トライアド（3色） | +120° / +240° | 色相環を3等分。にぎやかでバランスが取りやすい |
| スプリット補色（3色） | +150° / +210° | 補色の両隣。補色より穏やかな対比になる |
| テトラード（4色） | +90° / +180° / +270° | 色相環を4等分。色数が多いので配分に差をつける |
| 単色の濃淡（5色） | 色相はそのまま、明度を変える | 色相を変えず明るさだけ変える。統一感が出る |
生成の例（#3d5afe）
このサイトのアクセント色 #3d5afe（HSL 231, 99%, 62%）を基準にすると、次のようになります。
| 配色 | 生成される色 |
|---|---|
| 補色 | #3e5bfe → #fee13e（青の反対は黄） |
| 類似色 | #3ebbfe / #3e5bfe / #813efe |
| トライアド | #3e5bfe / #fe3e5b / #5bfe3e |
| スプリット補色 | #3e5bfe / #fe813e / #bbfe3e |
| 単色の濃淡 | #011798 / #0124e9 / #3e5bfe / #8fa0fe / #e1e5ff |
HEXコードの下2桁がわずかに変わることがありますが、これはHSLへ変換して戻すときの丸めによるものです。 見た目に差は出ません。
配色を決めるときのコツ
- 面積に差をつける — 3色使うなら、およそ70%・25%・5%の配分にすると落ち着きます。同じ面積で並べると散らかって見えます。
- 強い色は差し色に — 補色は目を引く一方、広く使うと疲れます。ボタンや強調したい数字だけに使うのが効果的です。
- 背景は彩度を落とす — 生成された色をそのまま背景に使うと主張が強すぎることがあります。明度を上げ、彩度を下げると使いやすくなります。
- 読みやすさは別に確認する — 見た目の相性と読みやすさは別問題です。文字に使うならコントラスト比を必ず確認してください。
使うときの注意
- 色相環上の関係にもとづく機械的な生成です。ブランドの制約や文化的な意味づけは考慮していません。
- 彩度・明度は基準の色をそのまま引き継ぎます（単色の濃淡を除く）。必要に応じて手で調整してください。
- 色だけで情報を伝えると、色の見え方が異なる人に届きません。形や文言も併用してください。
- 画面によって色の見え方は変わります。印刷物に使う場合は必ず試し刷りで確認してください。
よくある質問
補色とは何ですか？
色相環でちょうど反対側にある色のことです。青（色相231度）の補色は黄色（51度）になります。もっとも対比が強く、目立たせたい部分に使うと効果的ですが、面積を同じにすると目がちらつくため、片方を少しだけ使うのがコツです。
配色はどれを選べばいいですか？
落ち着いた印象にしたいなら類似色か単色の濃淡、はっきり目立たせたいなら補色かスプリット補色、にぎやかにしたいならトライアドが向いています。迷ったら類似色から試すと失敗しにくいです。
生成した色をそのまま使って大丈夫ですか？
文字色として使う場合は、背景とのコントラスト比を確認してください。彩度の高い色は読みにくくなることがあります。コントラスト比チェックで4.5:1以上あるかを確かめるのが確実です。
彩度や明るさも変えられますか？
「単色の濃淡」を選ぶと明るさだけを5段階に変えたパレットが出ます。ほかの配色では、基準の色の彩度と明るさをそのまま保ったまま色相だけを回しています。
色数はいくつまで使うべきですか？
画面全体では2〜3色に絞るのが基本です。それ以上使う場合も、面積の配分に大きな差をつける（およそ70:25:5）と、まとまりが保てます。
入力した色は送信されますか？
いいえ。生成はすべてブラウザ内で行われ、入力した色が外部へ送信・保存されることはありません。
関連ツール
HEX・RGB・HSLの相互変換は カラーコード変換、文字色と背景色の読みやすさは コントラスト比チェック で確認できます。画像の縦横比は アスペクト比計算、印刷物の寸法は 用紙サイズ早見 をどうぞ。