🎨 配色パレット自動生成ツール

ベースカラーを1色選ぶだけで、系統別の配色パレットを自動生成します。カラーコードはクリックでコピー、サンプルUIで配色の見え方も確認できます。

#3F72AF
画像をアップロードすると、よく使われている色を抽出してベースカラーに使えます

ベースカラーの色相(Hue)を基準に、系統ごとのロジックで5色を算出します
生成されたパレット

スウォッチ/コードをタップでコピー、鍵アイコンでロック、◀▶で並び替え。Spaceキー(またはシャッフルボタン)でロック中の色以外を再生成します

配色プレビュー
BADGE

サンプル見出し

この配色をボタンや背景に適用した場合の見え方のサンプルです。

CSS変数として一括コピー

    
  
他形式で書き出し

Adobe Swatch Exchange(.ase)形式で書き出します。Photoshop・Illustratorのスウォッチパネルに読み込めます。

配色理論の基本

類似色(アナロガス)

色相環でベースカラーに近い色相(本ツールでは±30°刻み)を組み合わせる配色です。色の系統がまとまっているため、統一感があり落ち着いた印象を作りやすいのが特徴です。

補色(コンプリメンタリー)

色相環でベースカラーの反対側(色相+180°)にある色を組み合わせる配色です。コントラストが強く出るため、目を引きたい箇所や強調したい要素に向いています。

トライアド

色相環を均等に3分割した位置(±120°)の色を組み合わせる配色です。類似色よりメリハリがありつつ、補色よりはバランスの取れた、賑やかで明るい印象になりやすい配色です。

モノクロ(モノクロマティック)

色相と彩度を固定し、明度(明るさ)だけを変化させる配色です。色相を変えないため最もまとまりやすく、同じトーンで強弱をつけたい場合に向いています。

どんな場面で使えるか

Webサイトやアプリのデザイン、プレゼン資料、名刺・チラシなどの配色決めに使えます。CSS変数として一括コピーできるため、そのままコーディングに利用したり、ASE形式で書き出してPhotoshop・Illustratorのスウォッチに読み込むといった使い方もできます。

よくある質問

どの配色系統を選べばいいか分かりません
まとまりのある落ち着いた印象にしたいなら類似色、特定の要素を目立たせたいなら補色、賑やかで元気な印象にしたいならトライアド、シンプルで統一感を出したいならモノクロがおすすめです。実際にサンプルUIに反映した見た目を確認しながら選ぶと判断しやすくなります。
生成された色を一部だけ変えたい場合はどうすればいいですか?
各色のスウォッチにある鍵アイコンでその色を「ロック」すると、シャッフルボタンやSpaceキーで再生成した際にロックした色だけそのまま保持され、残りの色だけが新しく生成されます。
画像から抽出した色はどう使うのですか?
アップロードした画像の中でよく使われている色を自動的に抽出し、候補として一覧表示します。候補をタップするとベースカラーとして反映され、その色を基準に配色パレットが再計算されます。ロゴや写真の雰囲気に合わせた配色を作りたいときに便利です。
生成した配色はそのままコードに使えますか?
「CSS変数として一括コピー」ボタンで、生成した5色をCSS変数の形式でまとめてコピーできます。Photoshop・Illustratorで使いたい場合は、ASE形式での書き出しにも対応しています。