---
title: Color
description: El componente Color muestra paletas de colores para documentar sistemas de diseño, directrices de marca o cualquier especificación de color.
---

Color muestra valores hex, RGB y RGBA como muestras con función de clic para copiar. Dos variantes de diseño — una cuadrícula compacta y una tabla agrupada — con soporte integrado para modo claro/oscuro.

Usa Color cuando:
- **Documentes sistemas de diseño** con colores de marca
- **Muestres colores de tema** para modos claro y oscuro
- **Visualices escalas de color** (primary-100 hasta primary-900)
- **Compartas directrices de marca** con valores hex/RGB

## Uso

```mdx
<Color>
  <ColorItem name="Primary" value="#635BFF" />
</Color>
```

## Variante Compacta

El diseño predeterminado muestra los colores en una cuadrícula responsive:

<Color>
  <ColorItem name="Primary" value="#3b82f6" />
  <ColorItem name="Success" value="#22c55e" />
  <ColorItem name="Warning" value="#f59e0b" />
  <ColorItem name="Error" value="#ef4444" />
</Color>

```mdx
<Color>
  <ColorItem name="Primary" value="#3b82f6" />
  <ColorItem name="Success" value="#22c55e" />
  <ColorItem name="Warning" value="#f59e0b" />
  <ColorItem name="Error" value="#ef4444" />
</Color>
```

## Variante de Tabla

Agrupa los colores en filas etiquetadas para paletas organizadas:

<Color variant="table">
  <ColorRow title="Brand Colors">
    <ColorItem name="Primary" value="#3b82f6" />
    <ColorItem name="Secondary" value="#6366f1" />
  </ColorRow>
  <ColorRow title="Feedback Colors">
    <ColorItem name="Success" value="#22c55e" />
    <ColorItem name="Error" value="#ef4444" />
  </ColorRow>
</Color>

```mdx
<Color variant="table">
  <ColorRow title="Brand Colors">
    <ColorItem name="Primary" value="#3b82f6" />
    <ColorItem name="Secondary" value="#6366f1" />
  </ColorRow>
  <ColorRow title="Feedback Colors">
    <ColorItem name="Success" value="#22c55e" />
    <ColorItem name="Error" value="#ef4444" />
  </ColorRow>
</Color>
```

## Convenciones de Nomenclatura de Colores

| Patrón | Ejemplo | Uso |
|---------|---------|---------|
| Semántico | `success`, `error`, `warning` | Colores de retroalimentación |
| Escala numérica | `primary-500`, `gray-100` | Paletas de color |
| Descriptivo | `brand-blue`, `accent-gold` | Colores de marca |

## Colores con Conciencia de Tema

Define diferentes colores para los modos claro y oscuro pasando un objeto con las propiedades `light` y `dark`:

<Color>
  <ColorItem name="Background" value={{ light: "#ffffff", dark: "#0a0a0a" }} />
  <ColorItem name="Foreground" value={{ light: "#171717", dark: "#ededed" }} />
  <ColorItem name="Border" value={{ light: "#e5e5e5", dark: "#404040" }} />
</Color>

```mdx
<Color>
  <ColorItem name="Background" value={{ light: "#ffffff", dark: "#0a0a0a" }} />
  <ColorItem name="Foreground" value={{ light: "#171717", dark: "#ededed" }} />
  <ColorItem name="Border" value={{ light: "#e5e5e5", dark: "#404040" }} />
</Color>
```

## Formatos de Color

El componente admite los formatos de color CSS estándar:

<Color>
  <ColorItem name="Hex" value="#3b82f6" />
  <ColorItem name="RGB" value="rgb(59, 130, 246)" />
  <ColorItem name="RGBA" value="rgba(59, 130, 246, 0.8)" />
</Color>

```mdx
<Color>
  <ColorItem name="Hex" value="#3b82f6" />
  <ColorItem name="RGB" value="rgb(59, 130, 246)" />
  <ColorItem name="RGBA" value="rgba(59, 130, 246, 0.8)" />
</Color>
```

## Props

### Color

<ParamField name="variant" type="string" default="compact">
  Estilo de diseño: `compact` (cuadrícula) o `table` (filas agrupadas).
</ParamField>

<ParamField name="children" type="node">
  Elementos `ColorItem` o `ColorRow`.
</ParamField>

### ColorRow

<ParamField name="title" type="string">
  Etiqueta que se muestra encima de la fila.
</ParamField>

<ParamField name="children" type="node">
  Elementos `ColorItem`.
</ParamField>

### ColorItem

<ParamField name="name" type="string">
  Nombre visible del color.
</ParamField>

<ParamField name="value" type="string | object">
  Valor del color como cadena CSS, o `{ light: string, dark: string }` para colores con conciencia de tema.
</ParamField>

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Descripción general de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explora todos los componentes disponibles
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende a usar componentes en MDX
  </Card>
</Columns>