カラーパレット

配色パレットの作り方

デザインで色に迷うのは、たいてい「何色を使うか」ではなく「何色を、どの関係で組み合わせるか」が決まっていないからです。基準になる1色を決め、そこから決まった角度で色相をずらすと、破綻しない組み合わせが機械的に出せます。このツールは基準色を1つ選ぶだけで、補色・類似色・トライアド・濃淡の4種類のパレットを同時に生成し、HEXのコピーとPNG保存ができます。

4つの配色の使い分け

• 補色（色相を180°ずらす）／いちばん目立つ組み合わせ。CTAボタン、警告、強調したい1点に
• 類似色（隣り合う色相）／まとまりが出て落ち着く。背景やグラデーション、全体のトーンづくりに
• トライアド（120°ずつ3色）／にぎやかでバランスが取れる。イラスト、図解、子ども向けの配色に
• 濃淡（同じ色相で明度を変える）／文字と背景の強弱、表の縞、状態の段階表現に

実際に使うときの配分

色数より配分のほうが仕上がりを決めます。目安はベース70％・サブ25％・アクセント5％。アクセントに補色を使うなら、面積は本当に小さくしてください。全体の3割を補色にすると、途端に落ち着かない画面になります。文字色と背景色の組み合わせは、明度差がないと読めなくなるので、濃淡パレットの端どうしを当てるのが安全です。

作った色を使う場所

パレットはページを閉じると消えるので、気に入ったらPNG保存か「全HEXをコピー」で手元に残してください。コピーにはHEXとRGBの両方が入っています。CSS変数の形でも書き出せるので、そのままスタイルシートに貼れます。決めた色はバナー・サムネ作成やQRコード作成の色指定に、印刷物なら表彰状メーカーや席札・名札にも持ち込めます。