カラーパレットジェネレーターとは？

ベースカラーを1色選ぶだけで、配色理論に基づいた調和のとれたカラーパレットを自動生成するツールです。補色、類似色、トライアド、スプリットコンプリメンタリーなど複数のパターンに対応しています。

配色理論とは？

色相環上の色の関係に基づく配色ルールです。補色（反対の色）、類似色（隣り合う色）、トライアド（三角形の3色）、テトラード（四角形の4色）などがあり、調和のとれた配色を作る指針になります。

補色、類似色、トライアド、スプリットコンプリメンタリー、テトラード、モノクロマティック、スクエアの7パターンに対応しています。

テキストと背景色のコントラスト比で、AA基準は4.5:1以上、AAA基準は7:1以上です。アクセシビリティ確保に重要な指標です。

はい、ライト/ダークモード切り替えで両テーマの配色を同時に確認できます。

Figmaのローカルスタイルとして使えるトークン形式で出力可能です。CSS変数形式でのコピーにも対応しています。

ベースカラーから調和する配色パターンを自動生成できる無料ツールです。補色、類似色、トライアドなどの配色理論に基づいた提案で、デザインの配色決定を効率化。Figma/CSS形式での出力にも対応。

7つの配色パターン

補色、類似色、トライアド、分割補色等に対応

多形式出力

HEX、RGB、HSL、CSS変数、Figmaトークン出力

コントラスト確認

WCAG AA/AAA基準でのコントラスト比を表示

Webデザイナー

サイト全体の配色を決めたいが、色の組み合わせに自信がないとき

配色理論に基づいたカラーパレットを自動生成、プロ品質の配色が数秒で完成

UIデザイナー

デザインシステムのカラートークンを定義したいとき

HEX/RGB/HSL/CSS変数形式で出力でき、Figmaやコードにそのまま反映可能

ブロガー・個人事業主

ブログやSNSのブランドカラーを決めたいとき

ベースカラー1色から統一感のある配色セットを自動提案、色選びの迷いを解消

カラーパレットジェネレーターとは？: ベースカラーを1色選ぶだけで、配色理論に基づいた調和のとれたカラーパレットを自動生成するツールです。補色、類似色、トライアド、スプリットコンプリメンタリーなど複数のパターンに対応しています。
配色理論とは？: 色相環上の色の関係に基づく配色ルールです。補色（反対の色）、類似色（隣り合う色）、トライアド（三角形の3色）、テトラード（四角形の4色）などがあり、調和のとれた配色を作る指針になります。
どんな配色パターンに対応していますか？: 補色、類似色、トライアド、スプリットコンプリメンタリー、テトラード、モノクロマティック、スクエアの7パターンに対応しています。
WCAG基準のコントラスト比とは？: テキストと背景色のコントラスト比で、AA基準は4.5:1以上、AAA基準は7:1以上です。アクセシビリティ確保に重要な指標です。
ダークモード用の配色も作れますか？: はい、ライト/ダークモード切り替えで両テーマの配色を同時に確認できます。
Figmaに取り込めますか？: Figmaのローカルスタイルとして使えるトークン形式で出力可能です。CSS変数形式でのコピーにも対応しています。