Skip to main content
Usa el componente Color para mostrar paletas de colores en tu documentación. Muestra los colores en una cuadrícula compacta u organízalos en una tabla con filas etiquetadas.

​
Variante compacta

Muestra colores en una cuadrícula simple con nombres y valores de color.

blue-500

#3B82F6

blue-600

#2563EB

blue-700

#1D4ED8

blue-800

#1E40AF

Compact example

​
Variante de tabla

Organiza los colores en filas etiquetadas para la documentación del sistema de diseño.

Primario

Secundario

Table example

​
Formatos de color

El componente admite todos los formatos de color CSS, incluyendo hex, rgb, rgba, hsl y 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

​
Colores según el tema

Define distintos colores para los modos claro y oscuro usando un objeto con las propiedades light y dark.

bg-primary

bg-secondary

text-primary

Theme-aware example

​
Propiedades

​
Color

​
string
requerido
Estilo de presentación de la paleta de colores. Opciones: compact o table.
​
Color.Item | Color.Row
requerido
Elementos o filas de color que se mostrarán.

​
Color.Row

​
string
Etiqueta de la fila de colores.
​
Color.Item
requerido
Elementos de color que se muestran en la fila.

​
Color.Item

​
string
Nombre o etiqueta del color.
​
string | { light: string, dark: string }
requerido
Valor del color en cualquier formato CSS, o un objeto con valores para los modos claro y oscuro.