ロジカルな配色理論で導き出す、UIカラーパレットジェネレーター
メインカラーを選択してください
全体パレット
ベースカラー1
Background Light
ベースカラー2
Background Dark
メインカラー
Brand Primary
アクセント
Complementary
このパレットの配色理論
1. 補色調和 (Complementary)
メインカラーの反対色（補色）をアクセントに設定。最もコントラストが強くなる組み合わせで、重要なボタンや通知へ自然に視線を誘導します。
2. 同系色調和 (Monochromatic)
背景（ベース）にはメインカラーの色味を薄めたトーンを採用。画面全体に統一感が生まれ、白背景よりも温かみとUIの奥行き（階層）を表現できます。
3. アクセシビリティの担保
背景色の輝度（明るさ）を計算し、文字色を白か黒に自動判定。無彩色を選んだ際も色が同化しないよう、安全なコントラストを自動で維持します。
ボタンUI プレビュー
入力フォーム プレビュー
プロジェクトに導入する
生成されたカラーコードをSCSSとしてダウンロードするか、生成AI（ChatGPTやCursorなど）に読み込ませるプロンプトとしてクリップボードにコピーできます。