无需登录 数据私有 本地保存

Material Design色板 - Google官方调色板

前端设计 参考工具 Material 色板 颜色
97
0
0
0
Material Design（Material Design设计语言）
由谷歌于2014年推出的统一设计语言，灵感来源于纸墨的物理属性与质感。它通过网格系统、层级结构、过渡动画和色彩体系等规范，帮助设计师和开发者创建跨平台的一致用户体验。Material Design不仅是视觉风格指南，更是一套完整的设计哲学和实现规范，广泛应用于Android应用、Web应用和Chrome OS界面设计中。
色阶（Color Shade / Tone）
Material Design色彩体系中，每一种主色都按照亮度从浅到深被划分为10个等级，分别以50、100、200、300、400、500、600、700、800、900编号。其中「50」是最浅色，接近白色，通常用于页面背景或卡片背景；「500」是该色系的标准基准色，代表该色系的中等明度，通常被定义为主色（Primary Color）；「900」是最深色，接近黑色，适合用于标题文字或强调性的深色背景。色阶之间呈现均匀的亮度递进关系，设计师可以根据需要选取不同深浅的颜色来构建丰富的视觉层次。
强调色（Accent Color）
在Material Design体系中，强调色是用于突出关键交互元素的色彩，具有更高的饱和度和更鲜明的视觉冲击力。强调色以A100、A200、A400、A700编号，其中A100饱和度最低、A400饱和度最高（最为鲜艳），A700明度最深。强调色与主色搭配使用，主色负责品牌识别和整体视觉基调，强调色负责吸引用户注意力和引导操作。典型的应用场景包括：按钮点击态、链接文字、进度条、开关滑块、表单输入框聚焦状态等。
HEX色值（十六进制颜色码）
HEX色值是一种以十六进制数字表示颜色的编码方式，格式为「#」后跟六位十六进制数字（0-9和A-F）。前两位表示红色通道（Red），中间两位表示绿色通道（Green），后两位表示蓝色通道（Blue）。例如「#F44336」表示红色值为F4（244）、绿色值为43（67）、蓝色值为36（54），混合后呈现为鲜艳的红色。HEX色值是Web开发中最常用的颜色表示方法，兼容所有浏览器和前端技术栈，同时也是设计工具中通用的颜色交换格式。
RGB色彩模式
RGB是一种加色法色彩模式，通过红（Red）、绿（Green）、蓝（Blue）三原色光的不同强度混合来呈现各种颜色。每个颜色通道的取值范围为0-255，三通道组合可以表示约1677万种颜色（256×256×256）。Material Design色板中的HEX色值本质上就是RGB色彩模式在十六进制下的表示形式，二者可以互相转换。
色相（Hue）
色相是色彩的基本属性之一，用于区分不同颜色种类，如红色、蓝色、绿色等。在色相环中，色相以角度（0°-360°）度量。Material Design色板按照色相将颜色分为红、粉、紫、蓝、青、绿、黄、橙、棕等系列，便于设计师按色系进行检索和选取。
饱和度（Saturation）
饱和度是指色彩的纯度或鲜艳程度，取值范围通常为0%-100%。饱和度越高，颜色越鲜艳浓烈；饱和度越低，颜色越接近灰色。Material Design的强调色（A系列）具有较高的饱和度，而标准色阶中的浅色（如50、100色阶）饱和度相对较低。在设计UI时，高饱和度的颜色适合用于需要吸引注意力的元素，低饱和度的颜色适合用于背景等次要元素。
明度（Lightness / Brightness）
明度是色彩从暗到亮的明暗程度。Material Design色阶系统中的50到900编号本质上反映了同一色相下不同明度的变化：编号越小（如50），明度越高，颜色越浅；编号越大（如900），明度越低，颜色越深。合理运用不同明度的色阶可以构建出清晰的视觉层级关系。
CSS变量（CSS Custom Properties）
CSS变量是CSS中定义的可复用颜色值或尺寸值的机制，以「--」前缀定义，通过var()函数引用。在使用Material Design色板时，开发者可以将主色、强调色等核心色值定义为CSS变量，如「--md-primary: #1976D2;」，然后在项目中统一引用，便于主题管理和全局换色。
🔧 相关工具