HEX
#1976D2主色 TokenMaterial Blue 700 是 Material Design 蓝色色板中更深的一档，色值为 #1976D2。它适合用于顶栏、按压态、导航和更稳重的产品表面，在保留 Material 语言的同时带来更强对比。
最佳文字颜色白色文字
正文对比度4.60:1
最佳用途更强的 CTA、导航栏与更高对比的 Material 系统
色阶
100#D6E6F7
300#95C0EA
500#428FDA
600#1976D2
800#125597
对比度检查
白色文字放在该颜色上
按钮、标签、填充型操作。
4.60:1可用于正文
深色文字放在该颜色上
大标题和局部模块。
3.73:1适合大字 / UI 组件
该颜色用在浅色表面上
浅底上的链接、边框和图标。
4.37:1适合大字 / UI 组件
最佳文字颜色白色文字对比度 4.60:1
专业参考
OKLCHoklch(56.5% 0.163 253)
相对亮度0.1782
来源类型设计系统色
颜色分类
蓝色系冷调中间调高饱和
来源上下文
来源类型
设计系统色
系统
Material
色阶
700
系统角色
- 适合导航、按压态和更强的层级锚点。
最接近颜色
Material Blue 800Material Blue 600Material Light Blue A700
可访问性矩阵
白色文字放在该颜色上
纯白文字放在当前颜色底上。
4.60:1AA
深色文字放在该颜色上
深色正文或标题放在当前颜色底上。
3.73:1适合大字 / UI 组件
该颜色用在浅色表面上
当前颜色用于浅色界面的链接、描边或图标。
4.37:1适合大字 / UI 组件
该颜色用在深色表面上
当前颜色用于深色壳层里的描边、标签或图标。
3.73:1适合大字 / UI 组件
最佳文字颜色白色文字对比度 4.60:1 · AA
适用场景
- 适合导航栏、按压态和更强的 CTA。
- 是更高对比的 Material 主色蓝。
- 可搭配白色、石板灰中性和更浅的 Material 蓝色。
参考说明
最后更新
2026-06-09
来源色库
Material Design 色板
整理方式
已核验来源色值 + 站内说明
颜色说明
Material 蓝色 700 收录自公开发布的 Material Design 色板，保留为可检索的参考色值，可直接用于产品、界面与品牌配色工作。
色相家族
稳定、专业、适合企业与产品系统的蓝色。
来源体系
设计系统色板
相关颜色
配色起点
实现片段
:root {
--color-material-blue-700: #1976D2;
--color-material-blue-700-rgb: 25 118 210;
}class="bg-[#1976D2] text-white"
class="hover:bg-[#125597] ring-1 ring-[#1976D2]"{
"materialBlue-700": "#1976D2",
"materialBlue-700Rgb": [25, 118, 210],
"materialBlue-700Hsl": [210, 79, 46]
}