Skip to content

颜色

ZUI 的颜色体系基于 TailwindCSS 调色板 实现,主要包含语义化调色板、界面颜色和特殊颜色。下面分别进行介绍。

语义化调色板

ZUI 内置了 8 种语义化调色板,每种类型都来自 TailwindCSS 内置的调色板,你可以根据产品中的需要来更换现有调色板。

PRIMARY 主要
品牌、主题、可交互、正常
--color-primary-50
50
--color-primary-100
100
--color-primary-200
200
--color-primary-300
300
--color-primary-400
400
--color-primary-500
500
--color-primary-600
600
--color-primary-700
700
--color-primary-800
800
--color-primary-900
900
--color-primary-950
950
SECONDARY 次要
品牌、主题、次级、常态的
--color-secondary-50
50
--color-secondary-100
100
--color-secondary-200
200
--color-secondary-300
300
--color-secondary-400
400
--color-secondary-500
500
--color-secondary-600
600
--color-secondary-700
700
--color-secondary-800
800
--color-secondary-900
900
--color-secondary-950
950
SUCCESS 成功
完成、积极
--color-success-50
50
--color-success-100
100
--color-success-200
200
--color-success-300
300
--color-success-400
400
--color-success-500
500
--color-success-600
600
--color-success-700
700
--color-success-800
800
--color-success-900
900
--color-success-950
950
WARNING 关注
提示、重点
--color-warning-50
50
--color-warning-100
100
--color-warning-200
200
--color-warning-300
300
--color-warning-400
400
--color-warning-500
500
--color-warning-600
600
--color-warning-700
700
--color-warning-800
800
--color-warning-900
900
--color-warning-950
950
DANGER 警告
提示、异常、警醒
--color-danger-50
50
--color-danger-100
100
--color-danger-200
200
--color-danger-300
300
--color-danger-400
400
--color-danger-500
500
--color-danger-600
600
--color-danger-700
700
--color-danger-800
800
--color-danger-900
900
--color-danger-950
950
IMPORTANT 重要
优先
--color-important-50
50
--color-important-100
100
--color-important-200
200
--color-important-300
300
--color-important-400
400
--color-important-500
500
--color-important-600
600
--color-important-700
700
--color-important-800
800
--color-important-900
900
--color-important-950
950
SPECIAL 特殊
触动、激情
--color-special-50
50
--color-special-100
100
--color-special-200
200
--color-special-300
300
--color-special-400
400
--color-special-500
500
--color-special-600
600
--color-special-700
700
--color-special-800
800
--color-special-900
900
--color-special-950
950
GRAY 灰色
中立、背景、边界
--color-gray-50
50
--color-gray-100
100
--color-gray-200
200
--color-gray-300
300
--color-gray-400
400
--color-gray-500
500
--color-gray-600
600
--color-gray-700
700
--color-gray-800
800
--color-gray-900
900
--color-gray-950
950

提示

点击调色板中的颜色,可以复制颜色变量名称方便在代码中使用。

界面颜色

在 ZUI 中,界面上公共的颜色已被精心梳理和定义,尽可能使用更少的颜色来定义大部分界面元素上可能用到的颜色。界面颜色都应该来自语义化调色板,你可以根据产品中的需要来更换其他调色板。下面是这些颜色的定义:

--color-canvas
CANVAS 画布颜色
通常用于页面背景、组件背景等,在浅色主题中为白色,在深色主题中为深黑色。
--color-inverse
INVERSE 画布反色
通常用于界面突出部分的背景或文字颜色,例如工具提示背景等,在浅色主题中为黑色,在深色主题中为白色。
--color-surface-light
SURFACE-LIGHT 轻量的控件背景
轻量的控件的背景颜色
--color-surface
SURFACE 控件背景
用于控件的背景颜色,例如按钮背景、可交互面板背景等,在浅色主题中为浅灰色,在深色主题中为深黑色。
--color-surface-strong
SURFACE-STRONG 加重的控件背景
加重的控件的背景颜色
--color-fore
FORE 文本颜色
默认的文本颜色,在浅色主题中为深黑色,在深色主题中为浅灰色。
--color-focus
FOCUS 焦点颜色
可聚焦控件的焦点状态指示颜色,例如按钮获得焦点的轮廓颜色。
--color-link
LINK 链接颜色
链接的颜色,例如超链接、按钮链接等,通常与主题色保持一致。
--color-link-hover
LINK-HOVER 链接悬停颜色
链接的在鼠标悬停状态时的颜色
--color-link-visited
LINK-VISITED 链接访问后的颜色
链接的在点击访问后的颜色
--color-placeholder
PLACEHOLDER 占位文本颜色
通常用于输入框的占位文本颜色
--color-border
BORDER 边框颜色
控件的边框颜色
--color-border-strong
BORDER-STRONG 加重的边框颜色
加重的控件的边框颜色
--color-border-light
BORDER-LIGHT 轻量的边框颜色
轻量的控件的边框颜色

特殊颜色

在 ZUI 中会用到一些特殊颜色,这些颜色的定义是固定的,不会因为更换主题或调色板而改变。下面是这些颜色的定义:

--color-white
WHITE 白色
永远为纯白色 #FFFFFF,不会受主题影响
--color-black
BLACK 黑色
永远为纯黑色 #000000,不会受主题影响
--color-transparent
TRANSPARENT 透明色
Alpha 通道永远为 0,不会受主题影响
--color-inherit
INHERIT 继承色
继承父元素同属性的颜色值,由 CSS color 属性值 inherit 提供。
--color-current
CURRENT 当前色
继承父元素文本颜色属性的值,由 CSS color 属性值 currentColor 提供。

额外的颜色定义

除了 ZUI 中已经定义的界面颜色和特殊颜色,有时还需要用到其他颜色,这时应该通过自定义调色板来实现。例如为了让图表上的图形更有区分度,可以定义一系列额外的调色板,例如 Chart1、Chart2....,然后在图表中按需使用。推荐使用 Tailwind CSS Color Generator 等工具来生成调色板。

使用颜色

你拥有多种方式来使用颜色,下面分别进行介绍。

通过 CSS 变量

每种语义化颜色都被定义为 CSS 变量,变量名称拥有相同的格式,都以 --color- 开头,然后通过 - 连接颜色名称得到。例如 CSS 变量 --color-primary-500 可以引用 Primary 调色板上的第 500 号颜色。下面为一个在 HTML 代码中使用的例子:

这是一段使用 Primary 调色板上的第 500 号颜色的文本

html
<h4 style="color: var(--color-primary-500)">
  这是一段使用 Primary 调色板上的第 500 号颜色的文本
</h4>

使用 CSS 工具类

在 ZUI 中提供了大量 CSS 工具类,大部分定义与 TailwindCSS 的工具类一致。在这些工具类中为你提供了大量的颜色相关的工具类,你可以通过这些工具类来使用颜色。下面为使用 CSS 工具类的例子:

这是一段使用 Primary 调色板上的第 500 号颜色的文本

html
<h4 class="text-primary">
  这是一段使用 Primary 调色板上的第 500 号颜色的文本
</h4>

更多用法和例子参考 CSS 工具类 文档。

在设计中使用

为了实现统一流程的交互体验,应该在设计时使用 ZUI 的颜色体系,下面为一些具体的建议:

  • 在设计中使用 ZUI 的颜色体系,而不是使用设计工具自带的颜色体系;
  • 在设计工具中为颜色进行命名,命名方式与 ZUI 中的颜色名称一致,例如 color-primary-500
  • 如果需要实现不同风格,推荐定义新的调色板实现,而不是只修改调色板中的某一个颜色;
  • 因为界面颜色来自调色版,不建议手动进行修改,除非主题需要实现对比度更明显的风格;
  • 任何时候都不建议修改特殊颜色的定义。

自定义配色

通过自定义配色可以实现不通的主题风格。你可以在页面中通过定义新的颜色变量来覆盖默认的颜色定义,从而实现自定义配色。下面为一个例子:

css
/* 覆盖主要调色板的定义 */
:root {
  --color-primary-50: #faf5ff;
  --color-primary-100: #f3e8ff;
  --color-primary-200: #e9d5ff;
  --color-primary-300: #d8b4fe;
  --color-primary-400: #c084fc;
  --color-primary-500: #a855f7;
  --color-primary-600: #9333ea;
  --color-primary-700: #7e22ce;
  --color-primary-800: #6b21a8;
  --color-primary-900: #581c87;
  --color-primary-950: #3b0764;
  --color-primary-50-rgb: 250, 245, 255;
  --color-primary-100-rgb: 243, 233, 255;
  --color-primary-200-rgb: 233, 214, 254;
  --color-primary-300-rgb: 216, 182, 252;
  --color-primary-400-rgb: 191, 136, 249;
  --color-primary-500-rgb: 167, 92, 244;
  --color-primary-600-rgb: 146, 62, 231;
  --color-primary-700-rgb: 125, 46, 203;
  --color-primary-800-rgb: 106, 41, 166;
  --color-primary-900-rgb: 88, 34, 133;
  --color-primary-950-rgb: 59, 14, 99;
}

提示

在定义 CSS 变量覆盖调色板时,除了定义 50~950 的十六进制颜色外,还需要定义对应的 RGB 颜色,这是为了在一些特殊场景下通过改变透明度来实现颜色的变化。

注意

如果你需要自定义配色,建议只通过修改调色板来实现,不建议修改界面颜色,除非主题需要实现对比度更明显的风格,任何时候都不应该修改特殊颜色的定义。

更多关于主题的内容参考 主题 文档。

MIT License (MIT)