# 颜色 (/zh/components/color)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 954 · updated: 2026-07-30 -->
Related: [折叠面板](/zh/components/accordions.md), [徽章](/zh/components/badge.md), [横幅](/zh/components/banner.md), [标注框](/zh/components/callouts.md), [卡片](/zh/components/cards.md), [代码分组](/zh/components/code-groups.md)

在文档中使用 Color 组件来展示颜色调色板。以紧凑的网格形式显示颜色，或在带有标签行的表格中进行分组展示。

<div id="compact-variant">
  ## 紧凑样式 [#紧凑样式]
</div>

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

<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>

```mdx title="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>
```

<div id="table-variant">
  ## 表格样式 [#表格样式]
</div>

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

<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>

```mdx title="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>
```

<div id="color-formats">
  ## 颜色格式 [#颜色格式]
</div>

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

<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>

```mdx title="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>
```

<div id="theme-aware-colors">
  ## 随主题变化的颜色 [#随主题变化的颜色]
</div>

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

<Color variant="compact">
  <Color.Item name="bg-primary" value="{ light: &#x22;#FFFFFF&#x22;, dark: &#x22;#000000&#x22; }" />

  <Color.Item name="bg-secondary" value="{ light: &#x22;#F9FAFB&#x22;, dark: &#x22;#0A0A0A&#x22; }" />

  <Color.Item name="text-primary" value="{ light: &#x22;#111827&#x22;, dark: &#x22;#F9FAFB&#x22; }" />
</Color>

```mdx title="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>
```

<div id="properties">
  ## 属性 [#属性]
</div>

<div id="color">
  ### 颜色 [#颜色]
</div>

<ResponseField name="variant" type="string">
  颜色调色板的显示样式。可选值：`compact` 或 `table`。
</ResponseField>

<ResponseField name="children" type="Color.Item | Color.Row">
  要显示的颜色项或行。
</ResponseField>

<div id="colorrow">
  ### Color.Row [#colorrow]
</div>

<ResponseField name="title" type="string">
  颜色行的标签。
</ResponseField>

<ResponseField name="children" type="Color.Item">
  该行中要显示的颜色项。
</ResponseField>

<div id="coloritem">
  ### Color.Item [#coloritem]
</div>

<ResponseField name="name" type="string">
  颜色的名称或标签。
</ResponseField>

<ResponseField name="value" type="string | { light: string, dark: string }">
  使用任意 CSS 格式表示的颜色值，或包含 light 和 dark 两种模式值的对象。
</ResponseField>