mintlify__docs/fr/components/color.mdx

---
title: "Couleur"
description: "Affichez des nuanciers avec des valeurs hexadécimales et la possibilité de copier en un clic grâce au composant couleur, pour la documentation des systèmes de design et du branding."
keywords: ["color", "palette", "colors", "design system", "hex", "rgb", "rgba", "hsl", "oklch"]
---

Utilisez le composant Color pour présenter des palettes de couleurs dans votre documentation. Affichez les couleurs dans une grille compacte ou organisez-les dans un tableau avec des lignes nommées.

<div id="compact-variant">
  ## Variante compacte
</div>

Affichez les couleurs dans une grille simple, avec leurs noms et leurs valeurs.

<Color variant="compact">
  <Color.Item name="blue-500" value="#3B82F6" />

  <Color.Item name="blue-600" value="#2563EB" />

  <Color.Item name="blue-700" value="#1D4ED8" />

  <Color.Item name="blue-800" value="#1E40AF" />
</Color>

```mdx Compact example
<Color variant="compact">
  <Color.Item name="blue-500" value="#3B82F6" />
  <Color.Item name="blue-600" value="#2563EB" />
  <Color.Item name="blue-700" value="#1D4ED8" />
  <Color.Item name="blue-800" value="#1E40AF" />
</Color>
```


<div id="table-variant">
  ## Variante en tableau
</div>

Organisez les couleurs en lignes avec des libellés pour la documentation de votre système de design.

<Color variant="table">
  <Color.Row title="Primaire">
    <Color.Item name="primary-500" value="#3B82F6" />

    <Color.Item name="primary-600" value="#2563EB" />

    <Color.Item name="primary-700" value="#1D4ED8" />
  </Color.Row>

  <Color.Row title="Secondaire">
    <Color.Item name="secondary-500" value="#8B5CF6" />

    <Color.Item name="secondary-600" value="#7C3AED" />
  </Color.Row>
</Color>

```mdx Table example
<Color variant="table">
  <Color.Row title="Primaire">
    <Color.Item name="primary-500" value="#3B82F6" />
    <Color.Item name="primary-600" value="#2563EB" />
    <Color.Item name="primary-700" value="#1D4ED8" />
  </Color.Row>
  <Color.Row title="Secondaire">
    <Color.Item name="secondary-500" value="#8B5CF6" />
    <Color.Item name="secondary-600" value="#7C3AED" />
  </Color.Row>
</Color>
```


<div id="color-formats">
  ## Formats de couleur
</div>

Le composant prend en charge tous les formats de couleur CSS, y compris hex, rgb, rgba, hsl et oklch.

<Color variant="compact">
  <Color.Item name="hex" value="#FF5733" />

  <Color.Item name="rgb" value="rgb(51, 255, 87)" />

  <Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />

  <Color.Item name="hsl" value="hsl(180, 70%, 55%)" />

  <Color.Item name="oklch" value="oklch(70% 0.2 145)" />
</Color>

```mdx Color formats example
<Color variant="compact">
  <Color.Item name="hex" value="#FF5733" />
  <Color.Item name="rgb" value="rgb(51, 255, 87)" />
  <Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />
  <Color.Item name="hsl" value="hsl(180, 70%, 55%)" />
  <Color.Item name="oklch" value="oklch(70% 0.2 145)" />
</Color>
```


<div id="theme-aware-colors">
  ## Couleurs adaptées au thème
</div>

Définissez des couleurs distinctes pour les modes clair et sombre à l&#39;aide d&#39;un objet avec les propriétés `light` et `dark`.

<Color variant="compact">
  <Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />

  <Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />

  <Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
</Color>

```mdx Theme-aware example
<Color variant="compact">
  <Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />
  <Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />
  <Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
</Color>
```


<div id="properties">
  ## Propriétés
</div>

<div id="color">
  ### Couleur
</div>

<ResponseField name="variant" type="string" required>
  Style d’affichage de la palette de couleurs. Options : `compact` ou `table`.
</ResponseField>

<ResponseField name="children" type="Color.Item | Color.Row" required>
  Éléments ou lignes de couleur à afficher.
</ResponseField>

<div id="colorrow">
  ### Color.Row
</div>

<ResponseField name="title" type="string">
  Libellé de la ligne de couleurs.
</ResponseField>

<ResponseField name="children" type="Color.Item" required>
  Éléments de couleur à afficher dans cette ligne.
</ResponseField>

<div id="coloritem">
  ### Color.Item
</div>

<ResponseField name="name" type="string">
  Nom ou label de la couleur.
</ResponseField>

<ResponseField name="value" type="string | { light: string, dark: string }" required>
  Valeur de la couleur dans n'importe quel format CSS, ou bien un objet contenant des valeurs distinctes pour les modes light et dark.
</ResponseField>