配色卡参考大全 ― 复制标准Web色与Material Design色
汇总设计中常用的标准配色：Web标准色、Material Design色彩系统、灰阶渐变，每个色块均附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）用两位十六进制数分别表示R、G、B，而RGB值（例如 rgb(244, 67, 54)）用十进制数表示。两者可以相互换算，表示的是同一个颜色。
Web标准色（black、red、blue等）是CSS诞生初期就已使用的基础色名，而Material Design的配色系统是Google后来才系统化设计的配色规范。为了方便按不同用途选用，本页将两者分开列出。
可以，直接写成
color: #F44336; 这样的CSS属性值即可使用。大多数设计工具和编程语言也都可以直接使用同样的写法。
闲话 ― 为什么设计师不会“凭感觉”选色
2014年Google发布的“Material Design”并不只是一份视觉风格指南，而是一整套将色彩、字体、动效与布局统一在同一套规则之下的设计系统。其中的配色板设计得尤为严谨：每种色相（Red、Blue、Green等）都配备了从50到900的明度编号，让设计师无需仅凭感觉，就能在整个应用中搭建出统一协调的配色方案。
如果每次都临时挑选颜色，应用内很容易散落着看似相近却又略有差异的色调，导致设计缺乏统一感。从事先体系化好的配色板中选色，既能保持配色的一致性，又能通过同一色相内明度的变化，自然地表现按钮的不同状态（默认、悬停、按下等）。
CSS指定颜色的方式在历史上经历过多次扩展。1996年出现的CSS1只支持16种基础命名色和HEX色值，如今则可以使用更贴近人眼感知的HSL、HWB、LAB等色彩空间。即便如此，HEX色值在实际工作中依然是使用最广泛的表示法，至今仍是设计师与工程师之间不可或缺的通用语言。