Color.edu.kg
返回资源
界面套件

UI工具包

面向按钮、卡片、提示、图表和表单状态的可复用色彩决策。

模式

8

状态

24

适用场景

设计系统

有用的 UI 工具包不只是装饰,而是定义可重复的角色:表面、边框、文字、操作、反馈和数据颜色。

精选资源

无障碍按钮

操作与交互状态

主要、次要、危险和禁用按钮的色彩角色,并以对比度作为默认约束。

色值

#2563EB
#1D4ED8
#E5E7EB
#DC2626
#9CA3AF
表单反馈

验证与输入状态

统一成功、警告、错误、信息、焦点环和辅助文字颜色。

色值

#16A34A
#D97706
#DC2626
#0284C7
#6366F1
仪表盘图表

分析与对比视图

在常见色觉模拟下仍尽量保持区分度的分类图表色。

色值

#2563EB
#059669
#D97706
#9333EA
#DB2777
内容卡片

列表、卡片和资源布局

用于密集卡片网格和文章索引的表面、边框、阴影与文字色。

色值

#FFFFFF
#F8FAFC
#E2E8F0
#475569
#0F172A
最佳实践
  • 先按角色命名颜色,再按色相描述颜色,因为角色比具体色值更稳定。
  • 把 hover、active、focus、disabled 和 loading 状态与默认组件一起记录。
  • 将图表颜色与状态颜色分开,避免数据分类产生意外语义。
UI工具包 - Color.edu.kg | Color.edu.kg