カラーパレット生成 - 調和のある配色を自動生成
ベースカラーを選ぶだけで、色彩理論に基づいた調和のあるカラーパレットを自動生成します。補色・類似色・トライアド・テトラド・分裂補色から選べ、CSS変数形式でコピーできます。
#3398db
#db7633
:root {
--color-primary: #3398db;
--color-primary-light: #8ac4ea;
--color-primary-dark: #19608f;
--color-secondary: #db7633;
--color-secondary-light: #eab18a;
--color-secondary-dark: #8f4819;
}
パレット生成とは？
カラーパレット生成は、1つのベースカラーから色彩理論（補色・類似色・トライアド等）に基づいて調和のある配色を自動生成するツールです。WebデザインやUIデザインの配色決定を支援します。
関連: カラーコード変換 · コントラストチェッカー
使い方
- ベースカラーをカラーピッカーまたはHEX入力で選択します
- ハーモニー種類（補色・類似色・トライアド・テトラド・分裂補色）を選択します
- 生成されたパレットの色をクリックしてHEX値をコピーします
- CSS変数コピーボタンでパレット全体をコピーします
よくある質問
- ハーモニーの種類はどう選べばよいですか？
- 補色はインパクトのある配色、類似色は穏やかな配色、トライアドはバランスの良い3色配色に向いています。
- 明暗バリエーションとは何ですか？
- 各色の明度を±20%変化させた、明るい版と暗い版の色です。ホバー状態やグラデーションに活用できます。
- どのように使いますか？
- カラーピッカーでベースカラーを選択し、ハーモニー種類を選ぶと自動でパレットが生成されます。各色をクリックするとHEX値をコピーできます。
- 画像データはサーバーに送信されますか？
- このツールは画像を使用しません。入力した色情報の処理はブラウザ上で完結し、データはサーバーに送信されません。
- CSS変数としてエクスポートできますか？
- はい。「CSS変数をコピー」ボタンでパレット全体を--color-1: #xxxxxx;形式のCSS変数としてコピーできます。
関連ツール
更新情報
最終更新日: 2026-02-20
- 2026-02-20 初回リリース