设计系统色板

系统	色值数	结构	官方来源
Material Design 色调	89	6 个色系 × 13 档	`Material Web v0.192 · md-ref-palette`
Tailwind CSS 色板	286	26 个色系 × 11 档	`Tailwind CSS v4 · theme.css`
UnoCSS 色板	264	24 个色系 × 11 档	`UnoCSS preset-mini · Tailwind v3 + Windi`
Panda CSS 令牌	242	22 个色系 × 11 档	`Panda CSS · @pandacss/preset-panda`
Vanilla Extract 主题	3	3 个语义 token	`vanilla-extract · createTheme docs example`
StyleX 令牌	6	6 个语义 token	`StyleX · defineVars docs example`
Bootstrap 色板	29	29 个语义 token	`Bootstrap v5.3.8 · _variables.scss`
Ant Design 色板	130	13 个色系 × 10 档	`Ant Design · @ant-design/colors 7.2.1`
Open Color	130	13 个色系 × 10 档	`Open Color 1.9.1 · open-color.js`
Chakra UI 色板	100	10 个色系 × 10 档	`Chakra UI · @chakra-ui/theme 3.4.1`
Radix Colors	360	30 个色系 × 12 档	`Radix Colors 3.0.0 · light scales`
Fluent UI 品牌色	64	4 个色系 × 16 档	`Fluent UI · @fluentui/tokens brandColors`
Primer 色板	20	20 个语义 token	`Primer · @primer/primitives 11.10.0 light`
Polaris 色板	192	12 个色系 × 16 档	`Shopify Polaris · polaris-tokens 9.4.2`

怎么用这些色板

1

选产品里已经在用的那套，色板值才能和你实际发出的 CSS 变量对上。

2

每个色块都能打开对应色页，查看 HEX、RGB、HSL、OKLCH 并检查对比度。

3

确定文字与背景搭配前，把两个颜色丢进对比度工具算一遍。

这些色值来自哪里？

每套色板都解析自设计系统官方发布的包 —— Tailwind 的 theme.css、Material / Bootstrap / Ant Design 等打包好的 token 文件。没有任何一个值是估算的。

为什么有的系统按家族列、有的按 token 列？

Tailwind 这类以色阶为基础的系统，每个色系有 11 个明度档；Primer 这类 token 系统给出的是带语义的名称。页面按各自真实结构呈现。

可以商用吗？

这些色板由其项目以宽松许可发布（多数是 MIT 或 Apache-2.0）。正式上线前请确认你所用系统的许可条款。

需要注册或 API Key 吗？

不需要。所有色值都能在页面上直接读到，同样的数据也通过免费 API 提供。

全部工具 传统色 API 文档 设计令牌