HP制作で実際に使える色とパレットの図鑑。色相ごとに整理されたカラースケール51種と、用途別の配色パレット40種をまとめました。HEXコードはクリックでコピー、お気に入り保存も可能。
青〜緑系の全11階調スケール。50(最も明るい)から950(最も暗い)まで。Tailwind CSSと互換。
赤〜黄系の全11階調スケール。エラー、警告、ハイライト、CTAでよく使う色。
グレースケール5種。ベース色、テキスト色、背景色の選定に。微妙なトーンの違いで全体の印象が変わる。
柔らかく淡いパステルカラー。子供向け、ライフスタイル、ウェルネス系で使うやさしい色。
日本の伝統色をベースにしたスケール。和テイストのサイト、文化的なコンテンツに。
GoogleのMaterial Designの色味。コントラストが強めで、Android系のUIで定番。
自然素材を思わせる落ち着いた色味のスケール。オーガニック、ライフスタイル、ホテル系で頻出。
信頼感、誠実さを表現する配色。テック系・SaaS・BtoBサイトで頻出のパターン。
温かみと親しみを感じさせる配色。飲食店、子供向け、ライフスタイル系に。
クールでモダンな配色。テック、医療、金融、コンサルなど信頼性が必要な業種に。
日本らしい雰囲気のある配色。和食店、伝統工芸、旅館、和コスメなどに。
白黒+少しのアクセント。ポートフォリオ、ミニマル系、エディトリアルに。
明るく派手な配色。ファッション、エンタメ、Y2Kリバイバル、イベント系に。
深みのある配色で品格を。コスメ、ジュエリー、高級レストラン、不動産プレミアムに。
暗い背景ベースの配色。テック系、ゲーム、ストリーミングサービスで頻出。
HP制作で使える6つの実践ポイント。
ベース色60% + メイン色30% + アクセント色10%。これだけ守れば配色は崩れない。プロジェクト最初に決めるべき比率。
#000は強すぎて目が疲れる。#1a1a1a〜#333の少し柔らかい黒の方が読みやすい。背景白なら#fafafaもおすすめ。
WCAG AAは本文と背景でコントラスト比4.5:1以上が必要。WebAIMのコントラストチェッカーで確認しよう。
パレットを作る時、同じ色相の濃淡(50〜900スケール)を使うと自然と統一感が出る。Tailwindのスケールはこのために設計されている。
注目させたい要素を増やしすぎると、結局どれも目立たなくなる。CTA・重要メッセージに絞ろう。
--color-blue-500: #3b82f6;のように管理すると、ダークモード対応や色調整が楽になる。