---
title: Colore
description: Il componente Color mostra palette di colori per documentare sistemi di design, linee guida del brand o qualsiasi specifica cromatica.
---

> **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 visualizza valori esadecimali, RGB e RGBA come campioni su cui fare clic per copiare. Offre due varianti di layout: una griglia compatta e una tabella raggruppata, con supporto integrato per le modalità chiara e scura.

Usa Color per:
- **Documentare sistemi di design** con i colori del brand
- **Mostrare i colori del tema** per le modalità chiara e scura
- **Visualizzare scale cromatiche** (da primary-100 a primary-900)
- **Condividere linee guida del brand** con valori esadecimali/RGB

## Utilizzo

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

## Variante compatta

Il layout predefinito visualizza i colori in una griglia adattiva:

<Color>
  <ColorItem name="Primario" value="#3b82f6" />
  <ColorItem name="Successo" value="#22c55e" />
  <ColorItem name="Avviso" value="#f59e0b" />
  <ColorItem name="Errore" 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 tabella

Raggruppa i colori in righe con etichette per organizzare le palette:

<Color variant="table">
  <ColorRow title="Colori del brand">
    <ColorItem name="Primario" value="#3b82f6" />
    <ColorItem name="Secondario" value="#6366f1" />
  </ColorRow>
  <ColorRow title="Colori di feedback">
    <ColorItem name="Successo" value="#22c55e" />
    <ColorItem name="Errore" 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>
```

## Convenzioni per i nomi dei colori

| Pattern | Esempio | Utilizzo |
|---------|---------|---------|
| Semantico | `success`, `error`, `warning` | Colori di feedback |
| Scala numerica | `primary-500`, `gray-100` | Palette di colori |
| Descrittivo | `brand-blue`, `accent-gold` | Colori del brand |

## Colori adattivi al tema

Definisci colori diversi per le modalità chiara e scura passando un oggetto con le proprietà `light` e `dark`:

<Color>
  <ColorItem name="Sfondo" value={{ light: "#ffffff", dark: "#0a0a0a" }} />
  <ColorItem name="Primo piano" value={{ light: "#171717", dark: "#ededed" }} />
  <ColorItem name="Bordo" 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>
```

## Formati dei colori

Il componente supporta i formati di colore CSS standard:

<Color>
  <ColorItem name="Esadecimale" 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>
```

## Proprietà

### Color

<ParamField name="variant" type="string" default="compact">
  Stile del layout: `compact` (griglia) o `table` (righe raggruppate).
</ParamField>

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

### ColorRow

<ParamField name="title" type="string">
  Etichetta visualizzata sopra la riga.
</ParamField>

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

### ColorItem

<ParamField name="name" type="string">
  Nome visualizzato del colore.
</ParamField>

<ParamField name="value" type="string | object">
  Valore del colore come stringa CSS oppure `{ light: string, dark: string }` per i colori adattivi al tema.
</ParamField>

## Prossimi passi

<Columns cols={2}>
  <Card title="Panoramica dei componenti" icon="puzzle-piece" href="/it/components/overview">
    Esplora tutti i componenti disponibili
  </Card>
  <Card title="Nozioni di base su MDX" icon="file-code" href="/it/content/mdx-basics">
    Scopri come usare i componenti in MDX
  </Card>
</Columns>