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

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

Variante Compacta

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

Primary

#3b82f6

Success

#22c55e

Warning

#f59e0b

Error

#ef4444

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

Brand Colors

Primary#3b82f6

Secondary#6366f1

Feedback Colors

Success#22c55e

Error#ef4444

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

Theme

Background

#ffffff

Theme

Foreground

#171717

Theme

Border

#e5e5e5

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

Hex

#3b82f6

RGB

rgb(59, 130, 246)

RGBA

rgba(59, 130, 246, 0.8)

<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

stringdefault: compact

Estilo de diseño: compact (cuadrícula) o table (filas agrupadas).

node

Elementos ColorItem o ColorRow.

ColorRow

string

Etiqueta que se muestra encima de la fila.

node

Elementos ColorItem.

ColorItem

string

Nombre visible del color.

string | object

Valor del color como cadena CSS, o { light: string, dark: string } para colores con conciencia de tema.

¿Qué sigue?

Descripción general de componentes

Explora todos los componentes disponibles

Conceptos básicos de MDX

Aprende a usar componentes en MDX