カラーパレットジェネレーター
スペースキーを押して無限に配色を生成。お気に入りの色を固定（ロック）して調和する組み合わせを探求できます。
#2A39D8
#A841FA
#DF887E
#D04AAA
#ED011B
カラーパレットジェネレーターとは？
色彩理論に基づいた美しい5色のカラーパレットをブラウザ内で瞬時に自動生成し、WebデザインやUI/UX設計のインスピレーションを提供します。
使い方
- 生成： キーボードの
Spaceキーを押すか、「パレット生成」ボタンをクリックします。 - ロック： 気に入った色があれば鍵マークのアイコンをクリックして固定します。
- コピー： HEXコードをクリックするとクリップボードにコピーされます。
ナレッジベース & FAQ
よくある質問 (FAQ)
よくある疑問、技術的課題、業界標準に対する分かりやすい解説と解決策。
UIおよびWebデザインにおける「60-30-10の法則」とは何ですか？expand_more
60-30-10の法則は視覚的なバランスと階層を生み出す配色黄金比です：
- 60%（ベースカラー）： 背景となる無彩色（白、スレート、ダーク背景など）。
- 30%（メインカラー）： カード、サイドバー、ヘッダーなどに使用し深みを持たせる色。
- 10%（アクセントカラー）： CTAボタン、リンク、重要バッジなどに限定して使用する高コントラストな注目色。
作成したカラーパレットがアクセシビリティ監査に合格することを確認するには？expand_more
法的アクセシビリティ（WCAG 2.1 AA）をクリアするために：
- テキスト色と背景色のコントラスト比が最低4.5:1以上あることを確認します。
- 純粋な黄色（
#FFFF00）や明るい黄緑に白文字を重ねてはいけません（比率1.1:1程度で判読不能）。 - 本サイトの WCAGコントラストチェッカー を活用して事前に検証してください。
パレットをTailwind CSSやCSS変数にエクスポートする方法は？expand_more
生成したパレットの色をCSSカスタムプロパティとして定義できます：
:root {
--color-primary: #4F46E5;
--color-secondary: #06B6D4;
--color-accent: #F43F5E;
--color-neutral: #1E293B;
--color-surface: #F8FAFC;
}tailwind.config.jsのtheme.extend.colorsに登録することでユーティリティクラスとして利用可能です。暖色系と寒色系のパレットが持つ心理的効果の違いは？expand_more
暖色系（赤、オレンジ、黄）はエネルギー、活気、購買意欲を喚起し、飲食サービスやセールLPに適しています。寒色系（青、ティール、ネイビー、緑）は清潔感、知性、信頼感を醸成し、金融、ITインフラ、医療SaaSの定番です。
標準的なデザインシステムには何色程度設定すべきですか？expand_more
実用的なデザインシステムでは通常以下を定義します：
- 主要ブランドカラー1色（50〜950のシェード階調）。
- 補助カラー1色（視覚的多様性）。
- アクセントカラー1色（重要アクション用）。
- ニュートラルスケール（テキストや枠線用のグレー階調8〜10色）。
- 4つのセマンティック色： 成功（緑）、警告（黄）、エラー（赤）、情報（青）。