カラーパレットジェネレーター
ベースカラーを選択して、配色理論に基づいたカラーパレットを自動生成できます。CSS変数やTailwind Config形式でエクスポートも可能です。
HSL: 217, 91%, 60%
37
パレット
#3CF6AF
HEX: #3CF6AFRGB: 60, 246, 175HSL: 157, 91%, 60%
#3CE0F6
HEX: #3CE0F6RGB: 60, 224, 246HSL: 187, 91%, 60%
#3C83F6
HEX: #3C83F6RGB: 60, 131, 246HSL: 217, 91%, 60%
#523CF6
HEX: #523CF6RGB: 82, 60, 246HSL: 247, 91%, 60%
#AF3CF6
HEX: #AF3CF6RGB: 175, 60, 246HSL: 277, 91%, 60%
UIプレビュー
Sample Card Title
This is a preview of how your color palette looks in a typical card layout with heading, body text, and a button.
Color 1Color 2Color 3Color 4Color 5
エクスポート
:root {
--color-1: #3CF6AF;
--color-2: #3CE0F6;
--color-3: #3C83F6;
--color-4: #523CF6;
--color-5: #AF3CF6;
}配色理論（カラーハーモニー）とは
配色理論（カラーハーモニー）とは、色相環上の色の位置関係に基づいて調和のとれた配色を作る手法です。 色相環（Color Wheel）は、赤・黄・青を基本とする12色の円形配置で、色同士の関係性を視覚的に理解するための基本ツールです。
適切な配色を選ぶことで、Webサイトやアプリのデザインに統一感と視覚的な魅力を持たせることができます。 このツールでは、ベースカラーを1色選ぶだけで、配色理論に基づいた調和のとれたパレットを自動生成します。
配色パターンの種類
| パターン | 色数 | 特徴 |
|---|---|---|
| 補色（Complementary） | 2色 | 色相環で180度反対の色。コントラストが強く、インパクトのあるデザインに。 |
| 類似色（Analogous） | 3-7色 | 色相環で隣接する色。自然で落ち着いた印象。背景やグラデーションに最適。 |
| トライアド（Triad） | 3色 | 色相環で120度ずつ離れた3色。バランスが良く、活発な印象。 |
| テトラード（Tetradic） | 4色 | 色相環で90度ずつ離れた4色。豊かで多彩な配色。ダッシュボードやチャートに。 |
| 分裂補色（Split-comp.） | 3色 | 補色の両隣を使う配色。補色ほど強くないが適度なコントラスト。 |
| モノクロマティック | 3-8色 | 同じ色相で明度を変えた配色。統一感が最も高く、洗練された印象。 |
活用シーン
- Webサイトやアプリのカラースキーム設計
- プレゼンテーション資料の配色選び
- ブランドカラーからサブカラーを導出
- UIコンポーネントのカラーバリエーション作成
- CSS変数やTailwind設定ファイルへの即時エクスポート
- デザインシステムのカラーパレット構築
関連記事
よくある質問
- Q. ベースカラーから何色生成されますか？
- 配色パターンによって異なります。補色は2色、トライアドは3色、テトラードは4色、類似色は3〜7色、モノクロマティックは3〜8色を自動生成します。
- Q. 生成したパレットをコードに反映するには？
- CSS変数、Tailwind Config、SCSS変数の3形式でエクスポートできます。コピーボタンでクリップボードにコピーし、プロジェクトに直接貼り付けてください。
- Q. 配色パターンの選び方がわかりません
- 落ち着いた印象なら類似色、インパクトを出したいなら補色、バランスの良い配色ならトライアドがおすすめです。デザインの目的やターゲットに合わせて選びましょう。
関連ツール
開発者
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。