無料・登録不要

カラーパレットジェネレーター

ベースカラーから美しい配色を自動生成

生成されたパレット

プレビュー

サンプルカード

テキストの表示例です。このカラーパレットを使用したデザインのプレビューを確認できます。

このツールについて

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

7つの配色パターン

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

多形式出力

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

コントラスト確認

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

活用シーン

Webデザイナー

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

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

UIデザイナー

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

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

ブロガー・個人事業主

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

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

使い方

  1. ベースカラーを設定

    カラーピッカーまたはHEX値でベースカラーを入力します。

  2. 配色パターンを選択

    補色、類似色、トライアド等から配色パターンを選びます。

  3. パレットを調整

    生成された配色を微調整し、コントラスト比を確認します。

  4. 出力する

    HEX/RGB/CSS変数/Figmaトークン形式でコピーします。

よくある質問

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

関連ツール

関連ガイド記事