ベースカラーから調和する配色を自動生成
メインカラーから調和の取れた配色パターンを自動生成する無料ツールです。Webサイト、アプリ、プレゼン資料のデザインで、色の組み合わせに迷ったときに最適な配色を提案します。
補色（反対色）、類似色（隣接色）、トライアド（三角形）、テトラード（四角形）、スプリットコンプリメンタリーなどの配色理論に基づいたパレットを生成します。色彩理論を知らなくても、調和の取れた配色が得られます。
ブランドカラーからWebサイト全体の配色を決める、プレゼン資料のアクセントカラーを選ぶ、アプリのUIテーマを設計するなど、プロのデザイナーも日常的に使うカラーパレット生成機能です。
色は色相（Hue）・彩度（Saturation）・明度（Lightness）の3要素で表現できます。色相を円環状に並べたものが色相環で、配色技法の多くはこの色相環上の位置関係から導かれます。このツールはベースカラーをHSLに変換し、色相環上の角度を計算することで調和の取れた組み合わせを自動生成します。
補色は色相環の正反対（180度）に位置する色で、互いを最も引き立て合う関係です。類似色は色相環上で隣り合う色（このツールでは±30度）の組み合わせで、まとまりのある穏やかな印象を作ります。トライアドは色相環を3等分（120度ずつ）した3色で、バランスを保ちながら変化に富んだ配色になります。さらにこのツールでは、色相を固定したまま明度を5段階に変える明度バリエーションと、彩度を5段階に変える彩度バリエーションも生成します。これらは同系色のグラデーションや濃淡の階調を作るのに役立ちます。
配色に正解は1つではありませんが、色相環に基づいたこれらの技法を起点にすると、感覚に頼らず安定した配色を素早く決められます。Webサイトのテーマカラー設計、UIデザイン、資料作成など幅広い場面で活用できます。
| 配色名 | 色相環上の関係 | 特徴・使いどころ |
|---|---|---|
| 補色 | 反対側（+180度） | ベース色と反対色の2色。コントラストが強く、アクセントや強調に効果的 |
| 類似色 | 隣り合う（±30度） | ベース色と前後30度の3色。統一感があり、落ち着いた印象を作る |
| トライアド | 120度ずつ3色 | 色相環を3等分した3色。鮮やかでバランスの良い配色になる |
| 明度バリエーション | 同一色相・明度変化 | 色相と彩度を保ち明度を5段階に変化。同系色の濃淡・階調づくりに |
| 彩度バリエーション | 同一色相・彩度変化 | 色相と明度を保ち彩度を5段階に変化。鮮やかさの強弱を比較できる |
このツールは上記5種類のパレットを同時に表示します。各色をクリックすると、その色のHEXコードがコピーされます。