---
title: 颜色
description: Color 组件以色板形式展示颜色，适用于记录设计系统、品牌指南或任何颜色规范。
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
Color 以可点击复制的色块显示十六进制、RGB 和 RGBA 值。它提供两种布局变体：紧凑网格和分组表格，并内置浅色和深色模式支持。
在以下情况下使用 Color：
- **记录包含品牌颜色的设计系统**
- **展示浅色和深色模式的主题颜色**
- **显示颜色刻度**（primary-100 到 primary-900）
- **分享包含十六进制/RGB 值的品牌指南**
## 用法
```mdx
```
## 紧凑变体
默认布局以响应式网格显示颜色：
```mdx
```
## 表格变体
将颜色分组到带标签的行中，以便整理色板：
```mdx
```
## 颜色命名约定
| 模式 | 示例 | 用途 |
|---------|---------|---------|
| 语义化 | `success`, `error`, `warning` | 反馈颜色 |
| 数值刻度 | `primary-500`, `gray-100` | 色板 |
| 描述性 | `brand-blue`, `accent-gold` | 品牌颜色 |
## 主题感知颜色
通过传入包含 `light` 和 `dark` 属性的对象，为浅色和深色模式定义不同的颜色：
```mdx
```
## 颜色格式
该组件支持标准 CSS 颜色格式：
```mdx
```
## 属性
### Color
布局样式：`compact`（网格）或 `table`（分组行）。
`ColorItem` 或 `ColorRow` 元素。
### ColorRow
显示在行上方的标签。
`ColorItem` 元素。
### ColorItem
颜色的显示名称。
CSS 字符串形式的颜色值；对于主题感知颜色，则使用 `{ light: string, dark: string }`。
## 接下来做什么？
浏览所有可用组件
了解如何在 MDX 中使用组件