---
title: Color
description: Muestra una muestra de color con valor hexadecimal — ideal para documentación de marca y tokens de diseño.
url: https://docs.thally.io/es/components/color
---

# Color

Muestra una muestra de color con valor hexadecimal — ideal para documentación de marca y tokens de diseño.

`<Color>` renderiza un chip de vista previa de color con un nombre y etiqueta hexadecimal opcionales. Úsalo en páginas de directrices de marca o documentación de sistemas de diseño.

## Ejemplo

```mdx
<Color hex="#10B981" name="Emerald" />
<Color hex="#8B5CF6" name="Violet" />
<Color hex="#F59E0B" name="Amber" />
<Color hex="#EF4444" name="Rose" />
```

## En una cuadrícula

Usa `<Columns>` para organizar múltiples muestras una al lado de la otra:

```mdx
<Columns cols={4}>
  <Color hex="#10B981" name="Emerald" />
  <Color hex="#8B5CF6" name="Violet" />
  <Color hex="#F59E0B" name="Amber" />
  <Color hex="#EF4444" name="Rose" />
</Columns>
```

## Paleta de marca completa

```mdx
<Columns cols={4}>
  <Color hex="#0F172A" name="Slate 900" />
  <Color hex="#1E293B" name="Slate 800" />
  <Color hex="#334155" name="Slate 700" />
  <Color hex="#64748B" name="Slate 500" />
</Columns>

<Columns cols={4}>
  <Color hex="#3B82F6" name="Blue 500" />
  <Color hex="#6366F1" name="Indigo 500" />
  <Color hex="#8B5CF6" name="Violet 500" />
  <Color hex="#A855F7" name="Purple 500" />
</Columns>
```

## Props

| Prop | Tipo | Descripción |
|---|---|---|
| `hex` | `string` | Valor de color hexadecimal incluyendo `#` (p. ej. `#10B981`) |
| `name` | `string` | Nombre de visualización opcional que aparece encima del código hexadecimal |