カラーパレット集 ― Web標準色・Material Designの定番カラーをコピーして使う
Web標準色・Material Designカラーシステム・グレースケールランプなど、デザインでよく使う定番カラーパレットをHEXコード付きで一覧表示。クリックだけでHEXコードをコピーできます。
Web標準色（ベーシックカラー）
Black
#000000
White
#FFFFFF
Red
#FF0000
Green
#008000
Blue
#0000FF
Yellow
#FFFF00
Cyan
#00FFFF
Magenta
#FF00FF
Gray
#808080
Silver
#C0C0C0
Maroon
#800000
Navy
#000080
Olive
#808000
Teal
#008080
Purple
#800080
Lime
#00FF00
Material Designカラーパレット
Material Red 500
#F44336
Material Pink 500
#E91E63
Material Purple 500
#9C27B0
Material Deep Purple 500
#673AB7
Material Indigo 500
#3F51B5
Material Blue 500
#2196F3
Material Cyan 500
#00BCD4
Material Teal 500
#009688
Material Green 500
#4CAF50
Material Lime 500
#CDDC39
Material Yellow 500
#FFEB3B
Material Amber 500
#FFC107
Material Orange 500
#FF9800
Material Deep Orange 500
#FF5722
Material Brown 500
#795548
グレースケール（ニュートラルカラー）
White
#FFFFFF
90% Gray
#E6E6E6
80% Gray
#CCCCCC
70% Gray
#B3B3B3
60% Gray
#999999
40% Gray
#666666
30% Gray
#4D4D4D
20% Gray
#333333
10% Gray
#1A1A1A
Black
#000000
使い方のヒント
- スウォッチ下の「コピー」ボタンを押すと、HEXコード（例: #F44336）がクリップボードに即座にコピーされます。
- CSSやFigma・Adobe XDなどのデザインツールにそのまま貼り付けて使えます。
- Material Designのカラーは「色名 + 明度番号（例: Red 500）」で管理されており、番号が大きいほど暗い色調を表します。
- グレースケールのランプは、テキスト色・背景色・枠線色などUIの階調表現を統一したいときの配色の指針として便利です。
- 配色に迷ったら、まずはWeb標準色の基本16色から組み合わせを試すと、視認性の高い配色になりやすいです。
よくある質問
Googleが2014年に発表したデザインシステム「Material Design」で定義されている、体系的なカラーパレットです。各色相について50〜900までの明度番号が用意されており、番号が大きいほど暗い色調になります。Android・Webアプリのデザインで広く採用されています。
どちらも同じ色を表す表記方法です。HEXコード（例: #F44336）は16進数2桁ずつでR・G・Bを表し、RGB値（例: rgb(244, 67, 54)）は10進数でR・G・Bを表します。互いに変換が可能で、意味する色は同じです。
Web標準色（black・red・blue等）はCSS登場初期から使われてきた基本的な色名で、Material Designのカラーシステムはそれよりも後にGoogleが体系立てて設計した配色ガイドラインだからです。用途に応じて使い分けられるよう、このページでは両方を掲載しています。
はい、そのまま
color: #F44336; のようにCSSのプロパティ値として使用できます。ほとんどのデザインツール・プログラミング言語でも同じ表記がそのまま使えます。
余談ですが ― なぜデザイナーは「なんとなく選んだ色」を避けるのか
Googleが2014年に発表した「Material Design」は、単なる見た目のスタイルガイドではなく、色・タイポグラフィ・モーション・レイアウトを一貫したルールで統一するためのデザインシステムでした。その中でもカラーパレットは特に体系的に設計されており、各色相（Red・Blue・Green等）について50から900までの明度番号を用意することで、デザイナーが感覚だけに頼らず、アプリ全体で統一感のある配色を組み立てられるようにしています。
任意の色をその場その場で選んでいくと、似ているようで微妙に違う色がアプリ内に散らばってしまい、統一感のないデザインになりがちです。あらかじめ体系化されたパレットから選ぶことで配色の一貫性を保ちながら、ボタンの状態変化（通常・ホバー・押下時など）を同じ色相の明度違いで自然に表現できるという利点もあります。
CSSにおける色の指定方法は歴史的に何度も拡張されてきました。1996年に登場したCSS1では16色の基本色名とHEXコードしか使えませんでしたが、現在ではHSL・HWB・LABなど人間の知覚に近い色空間も指定できるようになっています。それでも実務ではHEXコードが最も広く使われ続けており、デザイナーとエンジニアの共通言語として今も欠かせない存在です。