HEX
#03A9F4主色 TokenMaterial Light Blue 500 是 Material Design 色板中更明亮的一支蓝色，色值为 #03A9F4。它适合用于移动端界面、卡片、图表、引导层和更开阔的产品表面，比 Material Blue 500 更轻快。
最佳文字颜色深色文字
正文对比度6.52:1
最佳用途清新的应用点缀、移动端表面与更亮的 Material 风格高亮
色阶
100#D2F0FD
300#8BD7FA
500#30B8F6
600#03A9F4
800#027AB0
对比度检查
白色文字放在该颜色上
按钮、标签、填充型操作。
2.63:1需拉开明度差
深色文字放在该颜色上
大标题和局部模块。
6.52:1可用于正文
该颜色用在浅色表面上
浅底上的链接、边框和图标。
2.50:1需拉开明度差
最佳文字颜色深色文字对比度 6.52:1
专业参考
OKLCHoklch(69.9% 0.157 239)
相对亮度0.3493
来源类型设计系统色
颜色分类
蓝色系冷调中间调高饱和
来源上下文
来源类型
设计系统色
系统
Material
色阶
500
系统角色
- 通常是设计系统里的基础品牌色或主产品色。
最接近颜色
Material Light Blue A400Tailwind Sky 500Material Light Blue 600
可访问性矩阵
白色文字放在该颜色上
纯白文字放在当前颜色底上。
2.63:1需拉开明度差
深色文字放在该颜色上
深色正文或标题放在当前颜色底上。
6.52:1AA
该颜色用在浅色表面上
当前颜色用于浅色界面的链接、描边或图标。
2.50:1需拉开明度差
该颜色用在深色表面上
当前颜色用于深色壳层里的描边、标签或图标。
6.52:1AA
最佳文字颜色深色文字对比度 6.52:1 · AA
适用场景
- 适合移动端表面、图表点缀和更亮的应用高亮。
- 是更轻快的 Material 蓝，适合更清新的产品 UI。
- 可搭配白色、海军蓝中性和更深的蓝色锚点。
参考说明
最后更新
2026-06-09
来源色库
Material Design 色板
整理方式
已核验来源色值 + 站内说明
颜色说明
Material 浅蓝色 500 收录自公开发布的 Material Design 色板，保留为可检索的参考色值，可直接用于产品、界面与品牌配色工作。
色相家族
稳定、专业、适合企业与产品系统的蓝色。
来源体系
设计系统色板
相关颜色
配色起点
实现片段
:root {
--color-material-light-blue-500: #03A9F4;
--color-material-light-blue-500-rgb: 3 169 244;
}class="bg-[#03A9F4] text-white"
class="hover:bg-[#027AB0] ring-1 ring-[#03A9F4]"{
"materialLightBlue-500": "#03A9F4",
"materialLightBlue-500Rgb": [3, 169, 244],
"materialLightBlue-500Hsl": [199, 98, 48]
}