カラーパレット生成（5つの配色スキーム）

ベース色を選び、色彩理論のスキームを選択すると、調和のとれたパレットを生成。スウォッチクリックで個別HEXをコピー、デザインツールやCSS変数でそのまま使えます。

ベース色

配色スキーム

仕組み

補色: カラーホイールの正反対（180°）に位置する2色。高コントラストで鮮やか。アクセント、CTAボタン、フォーカルポイント作成に。

類似色: ホイール上で隣接する3色（30°間隔）。調和的で心地よく低コントラスト。自然界に多い、背景やUI面に最適。

トライアド: 等間隔（120°間隔）の3色。鮮やかでバランスの取れた配色。遊び心のあるエネルギッシュなデザインに。

テトラード（矩形）: 90°間隔の4色で長方形を形成。豊かなパレットだがバランスが難しく、1色を主、他をアクセントとして使うのが定石。

モノクロマティック: 単一色相のトーン・ティント・シェード。洗練されており統一感あり。ミニマリストデザインや企業ブランディングに多い。

ブランド色: 既存のロゴやブランド色から始めることが多い。5つのスキーム全部でテストして最適な組み合わせを見つける。

インスピレーション: 写真・アート・自然から色を選ぶ。鮮やかな色（高彩度、中明度）がベースとして最適、非常に淡い・暗い色は色あせたパレットになりやすい。

アクセシビリティ: 最終パレットがテキストに十分なコントラストを持つことを確認。コントラストチェッカーでWCAG AA（通常テキスト4.5:1）を満たすか検証。

CSS変数: パレット色を:root変数（--color-primary、--color-accent等）として定義、テーマ切替がワンタッチに。

デザインツール: HEX値をFigma・Sketch・Adobe XDのカラーライブラリに貼り付け。ほとんどのツールはHEX直接対応、HSLや名前付きCSS色も受け付けることが多い。

使用量を制限: 5色あっても、実際のデザインは2-3色を主に、残りは控えめに使うのが定石。60-30-10ルール（60%主色、30%副色、10%アクセント）が便利な出発バランス。

›どのスキームを使うべき？

類似色がほとんどのデザインで安全 — 3つの近接色が調和を作り単調にならない。補色は強調（CTAボタン）に。モノクロマティックはミニマル/洗練ブランドに。トライアドは遊び心のあるエネルギッシュな雰囲気に。

›5色以上取得できる？

本ツールでは不可 — 標準的な2-5色スキームを生成します。より大きなパレットは類似色出力をベースに各色のモノクロマティックシェードを作成（スキーム合成）。

›知覚的に均等な色空間を使っている？

本ツールはHSL演算で高速かつ予測可能。知覚的均等性（アクセシビリティ調整パレットに有利）が必要な高度ツールはOKLCHやCIELABを使用。HSLは多くのデザイン作業に十分。

›パレットはアクセシブル？

自動的にはなりません。色彩理論スキームは美的調和を保証しますが、テキスト用コントラストは保証しません。出荷前にコントラストチェッカーで文字×背景の組み合わせを必ず確認。

›お気に入りのパレットを保存できる？

未対応 — HEXコードをデザインシステムやノートにコピーしてください。ブックマーク可能なパレットURLは今後の機能。

›Material DesignやTailwindパレットとの関係は？

それらは事前キュレートされたシステム。ここでベーススキームを生成し、類似のMaterial/Tailwind色を探す方法。一部のアプリはこれらシステム互換のHEXを直接エクスポート可。

›パレットが「平坦」に見える理由は？

ベース色が非常に淡い（高明度）か非常に暗い（低明度）と、生成パレットのダイナミックレンジが狭くなる。中明度（40-60%）と高彩度（70%以上）のベースで鮮やかな結果に。

›データは送信されますか？

送信されません。すべての計算はローカル、サーバーには何も送信されません。