一个美观、易于访问的用户界面颜色系统

用于设计美丽、易于访问的网站和应用程序的全面颜色系统。

背景
交互组件
边框和分隔线
纯色
易于访问的文本
1
2
3
4
5
6
7
8
9
10
11
12
灰色淡紫色石板色鼠尾草绿橄榄色沙色番茄色红色红宝石色深红色粉色李子色紫色紫罗兰色虹膜色靛蓝色蓝色青绿色蓝绿色碧玉色绿色草绿色青铜色金色棕色橙色琥珀色黄色酸橙色薄荷色天蓝色
阴影、高光和覆盖
1
2
3
4
5
6
7
8
9
10
11
12
黑色白色

易于访问

文本颜色保证通过对应背景颜色的目标对比度比率。

自动暗模式

切换到暗色主题只需将一个类应用到容器上。暗模式 Just Works™。

透明变体

每个色阶都有一个匹配的 alpha 颜色变体,这对于需要融入彩色背景的 UI 组件非常方便。

APCA 文本对比度

对比度目标基于现代 APCA 对比度算法,该算法准确地预测了人眼如何感知文本。

P3 色彩空间支持

考虑了宽色域色彩空间中的混合差异,并能够实现最亮黄色和红色。

专为用户界面而设计

每个色阶都针对特定的用例而设计,例如背景、悬停状态、边框、覆盖或文本。