カラーパレット生成器 - 配色パターン作成 オンライン
色彩理論で調和のとれたパレットを生成。補色、類似色、トライアド、スプリットコンプリメンタリー配色をインタラクティブ色相環で。
よくある質問
カラーパレットジェネレーターとは何ですか？
カラーパレットジェネレーターは、色彩理論の原則に基づいて調和のとれた色のセットを作成するオンラインツールです。1つの基本色から、カラーホイール上の数学的関係（補色、類似色、トライアドなどの調和）を使用して関連する色を計算し、視覚的に美しいパレットを生成します。
このツールの使い方は？
インタラクティブなカラーホイールで基本色を選択するか、HEX/RGB/HSL値を入力してください。ハーモニーモード（補色、類似色、トライアド、テトラッド、分裂補色、モノクロマティック）を選択します。生成されたパレットがカラースウォッチとして表示されます。個々の色をロックして他を再生成できます。CSS変数、Tailwind設定、JSON、SCSS変数としてエクスポートできます。
色データは安全ですか？
色データは100%安全で、ブラウザから外部に送信されることはありません。すべての色計算はクライアントサイドのJavaScriptで実行されます。サーバーにデータが送信されることはなく、ブランドカラーの探索に安全に使用できます。
カラーハーモニーとは何ですか？
カラーハーモニーは、カラーホイール上の位置に基づいた美的に心地よい色の組み合わせです。6つの主なハーモニータイプ：補色（高コントラスト）、類似色（穏やかな印象）、トライアド（バランスの取れたパレット）、テトラッド（豊かなスキーム）、分裂補色（緊張感の少ないコントラスト）、モノクロマティック（統一された外観）。
カラーコンバーターとの違いは？
カラーコンバーターは色形式の変換に焦点を当てています。カラーパレットジェネレーターはインタラクティブなカラーホイール、6つのハーモニーモード、パレットロック、シェード・ティントスケール生成、複数のエクスポート形式を備えたパレット作成に特化したツールです。
生成したパレットをTailwind CSSプロジェクトで使用できますか？
はい。このツールはシェード値（50-900）を含むTailwind CSS設定エクスポートを提供します。出力をコピーしてtailwind.config.jsファイルのcolorsキーに直接追加できます。
シェード・ティントスケールとは何ですか？
シェード・ティントスケールは基本色から非常に明るい（50）から非常に暗い（900）まで10段階の色のバリエーションを生成します。これはTailwind CSSおよび一般的なデザインシステムの命名規則に従います。ティントは明度を上げ、シェードは明度を下げて生成されます。
コード例
// Color Palette Generator
function hslToHex(h, s, l) {
s /= 100;
l /= 100;
const a = s * Math.min(l, 1 - l);
const f = (n) => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color).toString(16).padStart(2, '0');
};
return `#${f(0)}${f(8)}${f(4)}`;
}
function generatePalette(baseHue, saturation, lightness, harmonyType) {
let hues;
switch (harmonyType) {
case 'complementary':
hues = [baseHue, (baseHue + 180) % 360];
break;
case 'analogous':
hues = [(baseHue - 30 + 360) % 360, baseHue, (baseHue + 30) % 360];
break;
case 'triadic':
hues = [baseHue, (baseHue + 120) % 360, (baseHue + 240) % 360];
break;
case 'monochromatic':
return [15, 30, 50, 70, 85].map(l => hslToHex(baseHue, saturation, l));
default:
hues = [baseHue];
}
return hues.map(h => hslToHex(h, saturation, lightness));
}
const palette = generatePalette(220, 70, 50, 'triadic');
console.log(palette);