カラーパレット生成
基準色
パレット種別
シェアする
使い方
- 1 ベースカラーをHEX(#RRGGBB)で入力するか、カラーピッカーから選択します。
- 2 配色タイプを選択: 補色(2色)・類似色(4色)・トライアド(3色)・テトラード(4色)・濃淡(6色)。
- 3 「生成」ボタンを押すと、選んだ配色のすべての色が表示されます。
- 4 各色のスウォッチをクリックでHEXをコピー。リスト表示でRGB・HSLも併記されます。
カラーパレット生成について
よくある質問
Q 初心者におすすめの配色は?
類似色(Analogous)が最も失敗しにくい配色です。色相環で隣接する3〜4色を選ぶだけで、自然と調和した印象に。例えばベース「青(#3B82F6)」に対して、青緑・青紫・水色を組み合わせる。<strong>「正解の組み合わせを思いつかない」初心者は、まず類似色から始めるのが鉄則</strong>。慣れてきたらアクセント色として補色を追加するのが王道です。
Q 補色を使うとどんな効果?
<strong>強烈なコントラスト</strong>で目を引く効果があります。例: 赤+緑(クリスマス、信号)、青+オレンジ(SNSアプリ、スポーツチーム)。CTA(ボタン)・警告・販促バナーで「絶対に見てもらいたい部分」に最適。ただし主色と補色の両方を50:50で使うと目に痛くなるため、<strong>主色90%・補色10%</strong>程度のアクセント使用が推奨です。
Q ダークモードのパレットを作るには?
<strong>濃淡モード</strong>で明度違いの色を生成し、明度を反転(Light=10% → Dark=90%)することでダークモード対応。例: ライトモードの背景#FFF→ダークモード#1A1A1A、テキスト#1A1A1A→#E0E0E0。Tailwind CSS等の現代ツールはこの自動反転をサポート。本ツールの濃淡モードは6段階の明度を一括生成するため、ライト/ダーク両用パレット作成に有用。
Q WCAG基準を満たす配色は?
文字色と背景色のコントラスト比4.5:1以上(通常文字)が必須。<strong>本ツールで生成した色を必ずWebAIM Contrast Checker等で実測</strong>してください。一般的な指針: 白背景なら明度40%以下のテキスト色、黒背景なら明度70%以上のテキスト色を使うとAA基準クリアしやすい。HSL明度40%/70%が目安です。
Q 類似色とトライアドの違いは?
</p><ul class="ri-ul"><li><strong>類似色(30°×4)</strong>: 隣接する4色を使用、調和的・落ち着いた印象</li><li><strong>トライアド(120°×3)</strong>: 三角形に配置された3色、バランスよく活発</li></ul><p>例えばベース青(#3B82F6)の場合: 類似色は青系(青紫・青緑・水色)、トライアドは赤・黄・青(全く違う色相)。サイトの個性を出したいならトライアド、まとまりを出したいなら類似色がおすすめ。
Q 60-30-10ルールとは?
プロデザイナーが使う黄金比例で、画面内の色比率を<strong>主色60%・副色30%・アクセント10%</strong>に分けるルール。これに従うと自然とバランスが取れた画面になります。例: 白(60%背景)+ 紺(30%セクション)+ 赤(10%CTAボタン)。本ツールで3〜4色を生成し、この比率で配置すると、初心者でもプロ級の配色が作れます。
Q 同じパレットでも印象が違う理由?
<strong>面積比・コンテキスト・隣接色</strong>で印象は大きく変わります。例えば同じ赤でも、白背景なら鮮やかに、黒背景ならくすんで見える(対比効果)。明度・彩度を1〜2段階調整するだけで全く違う雰囲気に。試行錯誤が必要なため、本ツールで5〜6パターン生成してから、Figma・Photoshop等で実際のコンテキストでテストするのが効率的。
Q 多すぎる色は何色まで?
UIデザインでは<strong>主要色5〜7色まで</strong>が目安。それ以上は使い分けが難しく、ユーザーが混乱します。データ可視化(グラフ等)では最大10〜12色まで許容ですが、<strong>カテゴリ数が多い場合は明度・彩度を変えた濃淡で表現</strong>する方が見やすい。Material Designでは主色1+副色1+ニュートラル3〜5+セマンティック(成功・警告・エラー)3で構成されます。
Q デザイン初心者がやってはいけない配色は?
</p><ul class="ri-ul"><li><strong>赤+緑だけ</strong>(色覚異常者に区別困難、約8%が影響)</li><li><strong>純色(彩度100%)を多用</strong>(目が疲れる、本ツールでは彩度50〜80%に抑える方がプロ級)</li><li><strong>4色以上の補色組み合わせ</strong>(統一感が崩れる)</li><li><strong>低コントラスト</strong>(WCAG 4.5:1未満は読めない人が出る)</li><li><strong>明度違いだけのモノクローム</strong>(本ツールの濃淡モード)を「これがプロっぽい」と勘違い(個性が消える)</li></ul>