カラーパレット生成ツール
ベースカラーを選ぶだけで、類似色・補色・三色配色・四色配色・単色配色パレットを即座に取得 — 100% ブラウザ内で完結。
入力
パレット
カラーパレットとは？
カラーパレットは、視覚的に調和するよう厳選された色のセットです。ウェブサイト、ブランド、イラスト、ダッシュボードの一貫性を保つためにデザイナーが使用します。同じ何色かを繰り返すことでリズムと認識性が生まれるからです。パレットには通常、ドミナントカラー、1〜2つのアクセントカラー、一連のニュートラルまたはサポートトーンが含まれます。ランダムに色を選ぶのではなく、デザイナーは色相環の幾何学に基づいて視覚的に心地よい組み合わせを生み出す色彩調和ルール（類似色、補色、三色配色、四色配色、単色）に依存します。
本ツールはこの 5 つのクラシックな調和ルールを実装し、ベースカラーを変更すると即座にパレットを再生成します。計算はすべて HSL 変換でブラウザ内で実行されるため、アップロードなしで自由に実験できます。
カラーパレットを生成する場面
前もってパレットを生成することで時間を節約し、アドホックな色選びによる視覚的混乱を防げます。よくある場面は以下の通りです：
- 新規ウェブサイト・アプリの立ち上げ。 ブランドカラーを 1 色選び、ジェネレーターにサポートアクセントとニュートラルを生成させます。
- デザインシステムの構築。
--accent、--accent-complement、--accent-triadic-2などのトークン名が生成スウォッチに直接対応します。 - イラストとデータビジュアライゼーション。 三色配色と四色配色は多系列チャートに十分な区別のある色相を与え、かつ衝突しません。
- マーケティング素材。 補色ペアはブランド背景に対するコールトゥアクションボタンに強いコントラストを生みます。
- テーマとリブランディング。 ベースカラーを変えるとパレット全体が追従し、ライト/ダークや季節テーマが簡単になります。
- 色彩理論の学習。 色相オフセットが調和ルールにどう変換されるかを観察すると、読むよりも速く直感が身につきます。
パレットを得たら、CSS 変数やデザイントークンに固定し、すべてのコンポーネントが同じ真実の情報源を参照するようにします。
パレット調和ルールの解説
本ツールが生成する 5 つの調和ルールは HSL 色相環の色相角度に基づきます：
- 類似色。 色相環上で隣り合う色（通常 ±30° と ±60°）。色相が共通のベースを共有するため、穏やかでまとまりのある結果になります。
- 補色。 正反対の 2 色相（180° 離れる）。最大のコントラストと鮮やかさを生み、ドミナント背景上のアクセントに最適です。
- 三色配色。 色相環上に均等に配置された 3 色相（120° 離れる）。鮮やかでバランスが良く、遊び心のある大胆なデザインに有用です。
- 四色配色。 均等に配置された 4 色相（90° 離れ）、色相環上に長方形を形成します。豊かな多様性を提供しますが、1 色をドミナントにしないと他色が競合します。
- 単色。 単一の色相に様々な輝度（時に彩度）を組み合わせたもの。繊細で洗練された結果となり、ミニマルやテキスト中心のインターフェースに最適です。
5 つのルールすべてが同じベース色相から派生するため、見た目が大きく異なっても家族的類似性を共有します。
一般的なパレットの使用例
下表は各調和ルールが典型的なデザイン用途にどう対応するかを示します。
| ルール | 色相オフセット | 最適な用途 |
|---|---|---|
| 類似色 | ±30°, ±60° | 調和のとれた背景、グラデーション、自然テーマ |
| 補色 | 180° | コールトゥアクションボタン、高コントラストアクセント |
| 三色配色 | 0°, 120°, 240° | 遊び心のあるブランディング、多系列チャート |
| 四色配色 | 0°, 90°, 180°, 270° | 豊かなイラスト、4 カテゴリダッシュボード |
| 単色 | 0°（輝度を変化） | ミニマル UI、タイポグラフィ、上品なテーマ |
最良の結果を得るには、1 色をドミナント、もう 1 色をサポートとし、残りは控えめにアクセントとして使います。
パレットを生成する方法
このツールでの生成は一瞬で、すべてブラウザ内で完結します。アップロード、登録、インストールは不要です。以下の手順で行います：
- ベースカラーを選ぶ。 カラーピッカーを使うか、HEX 入力欄に 6 桁の HEX コード（
#付きまたはなし）を入力します。 - パレットを確認。 5 つの調和行がリアルタイムで更新され、各スウォッチの下に生成された HEX コードが表示されます。
- コードをコピー。「全 HEX をコピー」をクリックしてすべてのスウォッチの HEX 値をコピーし、CSS、デザインツール、スタイルガイドに貼り付けます。
すべてのステップは JavaScript でブラウザのローカルで実行されるため、色の選択はサーバーにアップロードされません。これによりパレット生成は完全にプライベートかつ即時に行われます。
このカラーパレット生成ツールは無料ですか？
はい、完全に無料で、登録、透かし、制限はありません。
どの調和ルールに対応していますか？
類似色、補色、三色配色、四色配色、単色 — すべて同じベースカラーから生成されます。
ピッカーではなく HEX コードを入力できますか？
はい。6 桁の HEX コード（# 付きまたはなし）を入力するとパレットが即座に更新されます。
すべての色を一度にコピーするには？
「全 HEX をコピー」をクリック — すべてのスウォッチの HEX 値がスペース区切りでクリップボードにコピーされます。
入力はアップロードされますか？
いいえ。すべての処理はローカルで行われ、色がブラウザの外に出ることはありません。