一个华丽且易于访问的用户界面颜色系统

全面色彩系统,助力设计美观且无障碍的网站与应用程序。

背景
交互组件
边界和分隔符
纯色
无障碍文本
1
2
3
4
5
6
7
8
9
10
11
12
GrayMauveSlateSageOliveSandTomatoRedRubyCrimsonPinkPlumPurpleVioletIrisIndigoBlueCyanTealJadeGreenGrassBronzeGoldBrownOrangeAmberYellowLimeMintSky
阴影、高光和叠加
1
2
3
4
5
6
7
8
9
10
11
12
BlackWhite

无障碍变得简单

文本颜色确保能够通过与相应背景色的目标对比度测试。

自动深色模式

切换到黑暗主题只需对容器应用一个类。黑暗模式即刻可用™。

透明变体

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

APCA 文本对比度

对比度目标基于现代 APCA 对比度算法,该算法能精准预测人眼对文本的感知效果。

P3 色域支持

针对广色域色彩空间中的混合差异进行调整,并实现最明亮的黄色与红色表现。

专为用户界面设计

每一步的设计都针对特定使用场景,例如背景、悬停状态、边框、遮罩层或文本。