配色卡参考大全 ― 复制标准Web色与Material Design色
汇总设计中常用的标准配色：Web标准色、Material Design色彩系统、灰阶渐变，每个色块均附HEX色值，一键即可复制。
Web标准色（基础色）
Material Design 配色板
灰阶（中性色）
色彩调色盘是什么
本页是将设计中常用的经典色彩调色盘连同 HEX 色码一併列表显示的调色盘集。汇整了自 CSS 初期沿用至今的网页标准色16色、Google 所体系化的 Material Design 色彩系统代表色，以及将白至黑分为10阶的灰阶梯度三种，只需点选中意色彩的色码（例：#2196F3）一次即可复制，直接贴入 CSS 或设计工具。
若逐色凭感觉挑选配色，容易出现相近色调林立、缺乏整体感的设计。本页所载色彩皆为「作为体系所设计的色」，只需沿 Material Design 的明度编号（50〜900）或灰阶的层次（90%灰、80%灰等）挑选，便能轻易组出色相与明度一致的配色。配色理论（补色、类似色等组合方式）于用语集章节说明。
色彩调色盘的使用方式
- 选择符合目的的群组 网页标准色、Material Design、灰阶三个群组纵向排列。捲动至与用途相近的群组寻找。
- 以色票确认色调 色样（色票）与色名、HEX 色码并列显示，可一边在画面上确认实际外观，一边收敛候选。
- 按下「复制」按钮 点选中意色彩下方的「复制」按钮，HEX 色码便会自动复制至剪贴板。
-
贴入 CSS 或设计工具
将复制的 HEX 色码直接贴入 CSS 的
color属性，或 Figma、Adobe XD 等的检色器中使用。
用好本工具的小技巧
- 点击色块下方的“复制”按钮，即可把HEX色值（例如 #F44336）瞬间复制到剪贴板。
- 复制的色值可以直接粘贴到CSS或Figma、Adobe XD等设计工具中使用，无需再做转换。
- Material Design的色彩以“色名 + 明度编号（例如 Red 500）”管理，编号越大代表色调越深。
- 灰阶渐变很适合用来统一文字、背景、边框等UI元素的色调层次。
- 如果拿不定主意，从Web标准色的16种基础色开始搭配，通常能得到对比清晰、易读的配色。
色彩调色盘的活用场景
网页配色的底色选择
决定全站基调色时，自 Material Design 的明度梯度中挑选同色系浓淡，页首、内文、按钮的色彩区分便能自然协调。
UI 元件的状态色
将按钮的一般、滑过、按下时的色彩以同色相的不同明度（例：Blue 500→Blue 700）备妥，即可在保持统一感的同时表现状态变化。
文字与背景的对比设计
自灰阶梯度挑选背景色与文字色时，组合相距较远的层次可提高辨识度。严格判定则另行使用对比检查工具较为有效。
简报资料与图表的配色统一
与其每次凭感觉挑选投影片与图表的配色，不如将本页的色名与 HEX 色码沿用为公司内部配色指南，如此各资料间的色彩便不会偏移。
配色的用语集
- HEX 色码
- 指以「#RRGGBB」这般16进位6位数表示色彩的表记方法。R（红）、G（绿）、B（蓝）各以两位数指定，为 CSS 与设计工具中最广泛使用者。
- Material Design
- 指 Google 于2014年发表的设计系统。依色相以50〜900的明度编号将调色盘体系化，编号愈大代表色调愈暗。
- 补色
- 指色相环中位于正对面位置的色彩组合。因彼此相互强调，常用于想突显强烈对比的强调色挑选。
- 类似色
- 指色相环上彼此相邻的色彩组合。因色相差异小，容易形成协调沉稳的配色，常用于网站基调色的挑选。
- 三分配色
- 指组合色相环三等分位置上三种色彩的配色技法。较补色柔和、较类似色富变化，易于取得平衡。
- 灰阶
- 指不具色相、仅由白至黑明暗构成的层次。用于调整背景色与文字色的明度差，作为确保辨识度的基础。
- HSL
- 指以色相（Hue）、彩度（Saturation）、明度（Lightness）三要素表示色彩的表现方法。较 HEX 更易进行「同色相仅改变明暗」这类直觉调整。
常见问题
color: #F44336; 这样的CSS属性值即可使用。大多数设计工具和编程语言也都可以直接使用同样的写法。
闲话 ― 为什么设计师不会“凭感觉”选色
2014年Google发布的“Material Design”并不只是一份视觉风格指南，而是一整套将色彩、字体、动效与布局统一在同一套规则之下的设计系统。其中的配色板设计得尤为严谨：每种色相（Red、Blue、Green等）都配备了从50到900的明度编号，让设计师无需仅凭感觉，就能在整个应用中搭建出统一协调的配色方案。
如果每次都临时挑选颜色，应用内很容易散落着看似相近却又略有差异的色调，导致设计缺乏统一感。从事先体系化好的配色板中选色，既能保持配色的一致性，又能通过同一色相内明度的变化，自然地表现按钮的不同状态（默认、悬停、按下等）。
CSS指定颜色的方式在历史上经历过多次扩展。1996年出现的CSS1只支持16种基础命名色和HEX色值，如今则可以使用更贴近人眼感知的HSL、HWB、LAB等色彩空间。即便如此，HEX色值在实际工作中依然是使用最广泛的表示法，至今仍是设计师与工程师之间不可或缺的通用语言。