HP制作で実際に使える色のグラデーション図鑑。寒色・暖色・ニュートラル・パステル・和色・Material・ナチュラル・ビビッドの色相別に、細かい階調のグラデーションを収録。気に入った色を選んで、上の「カスタム配色を作る」で自分だけのパレットも組めます。HEXはクリックでコピー、お気に入り保存も可能。
3つのボードで配色を組み立て・比較できます。スウォッチをクリックで色を編集、HEXを貼り付け/入力で追加。保存した配色は下にまとまり、HEX / CSS変数でコピーできます。
青〜緑系の全11階調スケール。50(最も明るい)から950(最も暗い)まで。Tailwind CSSと互換。
赤〜黄系の全11階調スケール。エラー、警告、ハイライト、CTAでよく使う色。
グレースケール5種。ベース色、テキスト色、背景色の選定に。微妙なトーンの違いで全体の印象が変わる。
柔らかく淡いパステルカラー。子供向け、ライフスタイル、ウェルネス系で使うやさしい色。
日本の伝統色をベースにしたスケール。和テイストのサイト、文化的なコンテンツに。
GoogleのMaterial Designの色味。コントラストが強めで、Android系のUIで定番。
自然素材を思わせる落ち着いた色味のスケール。オーガニック、ライフスタイル、ホテル系で頻出。
彩度を最大限まで上げた鮮やかな色のグラデーション。CTA・キャンペーン・ポップ/Y2K・スポーツ・エンタメ系など、目を引かせたい場面に。
HP制作で使える6つの実践ポイント。
ベース色60% + メイン色30% + アクセント色10%。これだけ守れば配色は崩れない。プロジェクト最初に決めるべき比率。
#000は強すぎて目が疲れる。#1a1a1a〜#333の少し柔らかい黒の方が読みやすい。背景白なら#fafafaもおすすめ。
WCAG AAは本文と背景でコントラスト比4.5:1以上が必要。WebAIMのコントラストチェッカーで確認しよう。
パレットを作る時、同じ色相の濃淡(50〜900スケール)を使うと自然と統一感が出る。Tailwindのスケールはこのために設計されている。
注目させたい要素を増やしすぎると、結局どれも目立たなくなる。CTA・重要メッセージに絞ろう。
--color-blue-500: #3b82f6;のように管理すると、ダークモード対応や色調整が楽になる。