---
title: Couleur
description: Le composant Color affiche des palettes de couleurs pour documenter les systèmes de design, les chartes graphiques ou toute spécification de couleur.
---

Color affiche les valeurs hexadécimales, RGB et RGBA sous forme de swatches cliquables pour copier. Deux variantes de mise en page -- une grille compacte et un tableau groupé -- avec prise en charge intégrée des modes clair/sombre.

Utilisez Color dans les cas suivants :
- **Documentation des systèmes de design** avec les couleurs de marque
- **Affichage des couleurs de thème** pour les modes clair et sombre
- **Présentation des échelles de couleurs** (primary-100 à primary-900)
- **Partage des chartes graphiques** avec les valeurs hex/RGB

## Utilisation

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

## Variante compacte

La mise en page par défaut affiche les couleurs dans une grille 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 tableau

Regroupez les couleurs en lignes étiquetées pour des palettes organisées :

<Color variant="table">
  <ColorRow title="Couleurs de marque">
    <ColorItem name="Primary" value="#3b82f6" />
    <ColorItem name="Secondary" value="#6366f1" />
  </ColorRow>
  <ColorRow title="Couleurs de feedback">
    <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>
```

## Conventions de nommage des couleurs

| Modèle | Exemple | Utilisation |
|---------|---------|---------|
| Sémantique | `success`, `error`, `warning` | Couleurs de feedback |
| Échelle numérique | `primary-500`, `gray-100` | Palettes de couleurs |
| Descriptif | `brand-blue`, `accent-gold` | Couleurs de marque |

## Couleurs adaptées au thème

Définissez des couleurs différentes pour les modes clair et sombre en passant un objet avec les propriétés `light` et `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>
```

## Formats de couleur

Le composant prend en charge les formats de couleur CSS standard :

<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">
  Style de mise en page : `compact` (grille) ou `table` (lignes groupées).
</ParamField>

<ParamField name="children" type="node">
  Éléments `ColorItem` ou `ColorRow`.
</ParamField>

### ColorRow

<ParamField name="title" type="string">
  Étiquette affichée au-dessus de la ligne.
</ParamField>

<ParamField name="children" type="node">
  Éléments `ColorItem`.
</ParamField>

### ColorItem

<ParamField name="name" type="string">
  Nom d'affichage de la couleur.
</ParamField>

<ParamField name="value" type="string | object">
  Valeur de couleur sous forme de chaîne CSS, ou `{ light: string, dark: string }` pour les couleurs adaptées au thème.
</ParamField>

## Et ensuite ?

<Columns cols={2}>
  <Card title="Vue d'ensemble des composants" icon="puzzle-piece" href="/fr/components/overview">
    Parcourir tous les composants disponibles
  </Card>
  <Card title="Bases MDX" icon="file-code" href="/fr/content/mdx-basics">
    Apprendre à utiliser les composants dans MDX
  </Card>
</Columns>