mintlify__docs/fr/components/color.mdx

---
title: "Couleur"
description: "Affichez des palettes de couleurs avec une fonction de copie par simple clic."
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. Les couleurs peuvent être affichées dans une grille compacte ou organisées 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>