カラーパレット集 ― Web標準色・Material Designの定番カラーをコピーして使う
Web標準色・Material Designカラーシステム・グレースケールランプなど、デザインでよく使う定番カラーパレットをHEXコード付きで一覧表示。クリックだけでHEXコードをコピーできます。
Web標準色（ベーシックカラー）
Material Designカラーパレット
グレースケール（ニュートラルカラー）
カラーパレットとは
このページは、デザインでよく使われる定番カラーパレットをHEXコード付きで一覧表示するカラーパレット集です。CSS登場初期から使われているWeb標準色16色、Googleが体系化したMaterial Designカラーシステムの代表色、そして白から黒までを10段階に分けたグレースケールランプの3種類をまとめており、気に入った色のコード（例: #2196F3）をクリックひとつでコピーして、CSSやデザインツールにそのまま貼り付けられます。
配色を1色ずつ思いつきで選んでいくと、似た色調が乱立してまとまりのないデザインになりがちです。このページに載っている色はいずれも「体系として設計された色」であり、Material Designの明度番号（50〜900）やグレースケールの階調（90%グレー・80%グレーなど）に沿って選ぶだけで、色相・明度が揃った一貫性のある配色を組み立てやすくなります。配色のセオリー（補色・類似色などの組み合わせ方）は用語集セクションで解説しています。
カラーパレットの使い方
- 目的に合うグループを選ぶ Web標準色・Material Design・グレースケールの3グループが縦に並んでいます。用途に近いグループまでスクロールして探します。
- スウォッチで色味を確認する 色見本（スウォッチ）と色名・HEXコードが並んで表示されるので、画面上で実際の見え方を確認しながら候補を絞り込みます。
- 「コピー」ボタンを押す 気に入った色の下にある「コピー」ボタンをクリックすると、HEXコードがクリップボードに自動でコピーされます。
-
CSSやデザインツールに貼り付ける
コピーしたHEXコードを、CSSの
colorプロパティやFigma・Adobe XDなどのカラーピッカーにそのまま貼り付けて使います。
使いこなすためのヒント
- スウォッチ下の「コピー」ボタンを押すと、HEXコード（例: #F44336）がクリップボードに即座にコピーされます。
- CSSやFigma・Adobe XDなどのデザインツールにそのまま貼り付けて使えます。
- Material Designのカラーは「色名 + 明度番号（例: Red 500）」で管理されており、番号が大きいほど暗い色調を表します。
- グレースケールのランプは、テキスト色・背景色・枠線色などUIの階調表現を統一したいときの配色の指針として便利です。
- 配色に迷ったら、まずはWeb標準色の基本16色から組み合わせを試すと、視認性の高い配色になりやすいです。
カラーパレットの活用シーン
Web配色の下地選び
サイト全体の基調色を決めるとき、Material Designの明度ランプから同系色の濃淡を選ぶと、ヘッダー・本文・ボタンの色分けが自然にまとまります。
UIコンポーネントの状態色
ボタンの通常・ホバー・押下時の色を、同じ色相の明度違い（例: Blue 500→Blue 700）で用意すると、統一感を保ったまま状態変化を表現できます。
テキスト・背景のコントラスト設計
グレースケールランプから背景色と文字色を選ぶ際は、離れた階調同士を組み合わせると視認性が高くなります。厳密な判定には別途コントラストチェッカーの利用が有効です。
プレゼン資料・図表の配色統一
スライドやグラフの配色を毎回感覚で選ぶ代わりに、このページの色名とHEXコードを社内の配色ガイドとして流用すると、資料間で色がぶれなくなります。
配色の用語集
- HEXコード
- 色を「#RRGGBB」のように16進数6桁で表す表記方法です。R（赤）・G（緑）・B（青）それぞれを2桁ずつで指定し、CSSやデザインツールで最も広く使われています。
- Material Design
- Googleが2014年に発表したデザインシステムです。色相ごとに50〜900の明度番号でカラーパレットを体系化しており、番号が大きいほど暗い色調を表します。
- 補色（コンプリメンタリーカラー）
- 色相環の中で正反対の位置にある色の組み合わせです。互いを強調し合うため、強いコントラストを出したいアクセントカラーの選び方として使われます。
- 類似色（アナロガスカラー）
- 色相環で隣り合う色同士の組み合わせです。色相の差が小さいため、まとまりのある落ち着いた配色になりやすく、Webサイトの基調色選びによく使われます。
- トライアド配色
- 色相環を三等分する位置にある3色を組み合わせる配色技法です。補色よりも穏やかで、類似色よりも変化のあるバランスを取りやすい組み合わせです。
- グレースケール
- 色相を持たない、白から黒までの明暗だけで構成された階調です。背景色と文字色の明度差を調整し、視認性を確保する土台として使われます。
- HSL
- 色を色相（Hue）・彩度（Saturation）・明度（Lightness）の3要素で表す表現方法です。HEXよりも「同じ色相で明るさだけ変える」といった直感的な調整がしやすい特徴があります。
よくある質問
color: #F44336; のようにCSSのプロパティ値として使用できます。ほとんどのデザインツール・プログラミング言語でも同じ表記がそのまま使えます。
余談ですが ― なぜデザイナーは「なんとなく選んだ色」を避けるのか
Googleが2014年に発表した「Material Design」は、単なる見た目のスタイルガイドではなく、色・タイポグラフィ・モーション・レイアウトを一貫したルールで統一するためのデザインシステムでした。その中でもカラーパレットは特に体系的に設計されており、各色相（Red・Blue・Green等）について50から900までの明度番号を用意することで、デザイナーが感覚だけに頼らず、アプリ全体で統一感のある配色を組み立てられるようにしています。
任意の色をその場その場で選んでいくと、似ているようで微妙に違う色がアプリ内に散らばってしまい、統一感のないデザインになりがちです。あらかじめ体系化されたパレットから選ぶことで配色の一貫性を保ちながら、ボタンの状態変化（通常・ホバー・押下時など）を同じ色相の明度違いで自然に表現できるという利点もあります。
CSSにおける色の指定方法は歴史的に何度も拡張されてきました。1996年に登場したCSS1では16色の基本色名とHEXコードしか使えませんでしたが、現在ではHSL・HWB・LABなど人間の知覚に近い色空間も指定できるようになっています。それでも実務ではHEXコードが最も広く使われ続けており、デザイナーとエンジニアの共通言語として今も欠かせない存在です。