---
title: Couleur
description: Affichage d'une nuance de couleur avec valeur hexadécimale — idéal pour la documentation des marques et des jetons de conception.
url: https://docs.thally.io/fr/components/color
---

# Couleur

Affichage d'une nuance de couleur avec valeur hexadécimale — idéal pour la documentation des marques et des jetons de conception.

{/* thally:ai-translation locale=fr source-sha=d9ced772ed1ea4c4ccac5517f9d8ab47d06238bc8dbfd352fbbf986782ac0d0b */}
{/* Remove the marker above before manual edits to opt out of automatic refresh. */}

`<Color>` affiche un aperçu de couleur avec un nom optionnel et une étiquette hexadécimale. Utilisez-le sur les pages de directives de marque ou la documentation du système de conception.

## Exemple

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

## Dans une grille

Utilisez `<Columns>` pour disposer plusieurs nuances côte à côte :

```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>
```

## Palette de marque complète

```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>
```

## Props

| Prop | Type | Description |
|---|---|---|
| `hex` | `string` | Valeur de couleur hexadécimale incluant `#` (par ex. `#10B981`) |
| `name` | `string` | Nom d'affichage optionnel affiché au-dessus du code hexadécimal |