跳转到主要内容
在文档中使用 Color 组件来展示颜色调色板。颜色既可以以紧凑的网格形式显示，也可以在带有标签行的表格中进行分组展示。

​
紧凑样式

以简单的网格布局显示颜色及其名称和值。

blue-500

#3B82F6

blue-600

#2563EB

blue-700

#1D4ED8

blue-800

#1E40AF

Compact example
<Color variant="compact">
  <Color.Item name="blue-500" value="#3B82F6" />
  <Color.Item name="blue-600" value="#2563EB" />
  <Color.Item name="blue-700" value="#1D4ED8" />
  <Color.Item name="blue-800" value="#1E40AF" />
</Color>

​
表格样式

将颜色按标签行进行整理，用于设计系统文档。

主色

辅助色

Table example
<Color variant="table">
  <Color.Row title="主色">
    <Color.Item name="primary-500" value="#3B82F6" />
    <Color.Item name="primary-600" value="#2563EB" />
    <Color.Item name="primary-700" value="#1D4ED8" />
  </Color.Row>
  <Color.Row title="辅助色">
    <Color.Item name="secondary-500" value="#8B5CF6" />
    <Color.Item name="secondary-600" value="#7C3AED" />
  </Color.Row>
</Color>

​
颜色格式

该组件支持所有 CSS 颜色格式，包括 hex、rgb、rgba、hsl 和 oklch。

hex

#FF5733

rgb

rgb(51, 255, 87)

rgba

rgba(51, 87, 255, 0.7)

hsl

hsl(180, 70%, 55%)

oklch

oklch(70% 0.2 145)

Color formats example
<Color variant="compact">
  <Color.Item name="hex" value="#FF5733" />
  <Color.Item name="rgb" value="rgb(51, 255, 87)" />
  <Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />
  <Color.Item name="hsl" value="hsl(180, 70%, 55%)" />
  <Color.Item name="oklch" value="oklch(70% 0.2 145)" />
</Color>

​
随主题变化的颜色

使用包含 light 和 dark 属性的对象，为浅色和深色模式分别定义不同的颜色。

bg-primary

bg-secondary

text-primary

Theme-aware example
<Color variant="compact">
  <Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />
  <Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />
  <Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
</Color>

​
属性

​
颜色

​
variant
string
required
颜色调色板的显示样式。可选值：compact 或 table。
​
children
Color.Item | Color.Row
required
要显示的颜色项或行。

​
Color.Row

​
title
string
颜色行的标签。
​
children
Color.Item
required
该行中要显示的颜色项。

​
Color.Item

​
name
string
颜色的名称或标签。
​
value
string | { light: string, dark: string }
required
使用任意 CSS 格式表示的颜色值，或包含 light 和 dark 两种模式值的对象。