プリセット
:root {
--color-1: #3b82f6;
--color-2: #f6af3b;
}機能の説明
Color Palette Generator は、任意のベースカラーを、古典的な色彩理論のルール - complementary（補色）、split-complementary（分裂補色）、analogous（類似色）、triadic（トライアド）、tetradic（テトラード）、monochromatic（モノクロマティック）- を使って調和のとれたパレットに変換します。色を選び、ハーモニーを選ぶと、ワンクリックでコピーできるスウォッチのセットが得られます。パレット全体を CSS カスタムプロパティ、Tailwind 設定スニペット、またはプレーンな JSON としてエクスポートできます。すべて 100% クライアントサイドで動作します：何もブラウザーの外に出ません。
使い方
- カラースウォッチでベースカラーを選ぶか、テキストフィールドに hex 値（例：
#3B82F6）を入力します。Randomize を押すと新しいベースが回ります。 - ハーモニースキームを選びます - Complement、Split-Complement、Analogous、Triadic、Tetradic、Monochromatic。Monochromatic の場合はステップ数（2〜9）を設定します。
- どのスウォッチでもクリックして hex をコピーできます - 値は読みやすい方の黒または白で、色の上に直接表示されます。
- Export パネルで CSS / Tailwind / JSON を選び、Copy export でパレット全体を一度に取得します。
- Copy link で共有可能な URL を取得します - ベースカラー、スキーム、ステップ数がリンクにエンコードされるため、開いた誰もがあなたの正確なパレットを見ます。
例
赤からの complementary パレット
ベース #FF0000 → [ #FF0000, #00FFFF ] - 赤とシアン、カラーホイール上で正反対です。
Tailwind エクスポート
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
palette: {
'1': '#3b82f6',
'2': '#f59e0b',
},
},
},
},
};CSS 変数エクスポート
:root {
--color-1: #3b82f6;
--color-2: #f59e0b;
}補足事項
- Monochromatic はベースの色相と彩度を保ち、選んだステップ数にわたって明度を広げます - UI のトーンスケール構築に最適です。
- プライベート: 生成はすべてブラウザー内でローカルに行われます - 独自のブランドカラーにも安全です。
- 共有可能: すべてのパレットが独自の URL を持ちます - ベースカラー、ハーモニー、ステップ数はリンクのハッシュに存在するため、ブックマークや共有で正確なパレットが再読み込みされます。
- フォーマット: hex が唯一の信頼できる値です。HSL は参考用に表示され、ハーモニー計算の内部で使われます。
- 関連ツール: Color & Design カテゴリのグラデーションおよびコントラストのツールを探してください。