# Utiliser un cercle chromatique pour choisir une palette

[Canonical HTML page](https://gradiently.design/fr/guide/color-wheel)

Le cercle chromatique est le plus vieil outil de la couleur et reste le plus utile. Voici comment le lire, pourquoi le cercle du peintre et celui de l’écran diffèrent, et comment en tirer une palette.

## The short version

- Un cercle chromatique dispose les teintes en cercle pour que les relations entre elles, comme les opposées et les voisines, se voient facilement.
- Le cercle du peintre prend le rouge, le jaune et le bleu comme primaires, alors que celui de l’écran prend le rouge, le vert et le bleu : leurs couleurs opposées diffèrent.
- Les harmonies de couleurs comme complémentaire, analogue et triadique sont des positions fixes sur le cercle.
- Un cercle ne montre que la teinte : toute palette qui en vient a encore besoin de versions claires et sombres pour le texte et les fonds.
- Les cercles numériques simples ne sont pas uniformes pour l’œil : au même réglage, le jaune paraît bien plus clair que le bleu.

Un **cercle chromatique** dispose les teintes en cercle, dans l’ordre où elles apparaissent dans un arc-en-ciel, les extrémités reliées. Son intérêt est de transformer les relations en géométrie : les couleurs opposées contrastent fortement, les couleurs voisines se marient aisément, et les couleurs espacées régulièrement s’équilibrent. Pour l’utiliser, vous choisissez une teinte de départ, puis vous sélectionnez ses compagnes selon leur position.

Ce guide explique comment le cercle est construit, auquel se fier, comment y lire les harmonies et comment passer de quelques teintes à une palette utilisable. Pour la vue d’ensemble, commencez par les [bases de la théorie des couleurs](https://gradiently.design/fr/guide/color-theory-basics).

## Couleurs primaires, secondaires et tertiaires

Tout cercle part de trois primaires. Mélanger deux primaires donne une secondaire, et mélanger une primaire avec une secondaire voisine donne une tertiaire. Trois primaires, trois secondaires et six tertiaires forment le cercle familier de douze segments.

Le cercle du peintre (RJB): `conic-gradient(from 0deg, #d7263d, #e8572a, #f28c28, #f6b82f, #f4e04d, #9bc53d, #3a9d4a, #1b8a8f, #2156a5, #4b3a9a, #7b2d8e, #b0266f, #d7263d)`

Douze teintes du cercle traditionnel rouge, jaune et bleu, tracées avec un [dégradé conique](https://gradiently.design/fr/guide/conic-gradient). Le rouge est en haut, et le cercle tourne dans le sens horaire.

## Le cercle du peintre et le cercle de l’écran

Deux cercles sont couramment utilisés, et ils diffèrent. Le cercle du peintre repose sur le rouge, le jaune et le bleu (RJB), issus du mélange de pigments. Les écrans fabriquent la couleur avec de la lumière rouge, verte et bleue (RVB), et un cercle construit ainsi a d’autres primaires, d’autres secondaires et d’autres opposées.

| Propriété | Cercle du peintre (RJB) | Cercle de l’écran (RVB) |
| --- | --- | --- |
| Primaires | Rouge, jaune, bleu | Rouge, vert, bleu |
| Secondaires | Orange, vert, violet | Jaune, cyan, magenta |
| Opposée du rouge | Vert | Cyan |
| Opposée du bleu | Orange | Jaune |
| Opposée du jaune | Violet | Bleu |
| Utilisé par | Les peintres, l’enseignement artistique, de nombreux guides de palettes | Les sélecteurs de couleur, les valeurs de teinte CSS, la plupart des logiciels de design |

Même idée, autre géométrie. Sachez quel cercle utilise un guide avant de le suivre.

Le cercle de l’écran (RVB): `conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)`

Le cercle des teintes derrière les sélecteurs de couleur et le TSL. Le jaune est à un sixième du tour, le cyan à l’opposé du rouge.

Lequel utiliser ? Pour le travail numérique, le cercle de l’écran correspond à vos outils : les valeurs de teinte que vous saisissez coïncident avec ce que vous voyez. Le cercle du peintre donne souvent des opposées plus plaisantes, comme le bleu et l’orange, car il espace plus généreusement les couleurs chaudes. Beaucoup de designers lisent les harmonies sur le cercle du peintre puis choisissent les valeurs exactes à l’écran. L’un et l’autre conviennent tant que vous restez cohérent.

## Lire les harmonies de couleurs sur le cercle

Les harmonies sont des formes posées sur le cercle. Faites tourner la forme et vous obtenez une nouvelle palette au même équilibre.

- **Complémentaire :** deux teintes diamétralement opposées. Contraste maximal. Voyez les [couleurs complémentaires](https://gradiently.design/fr/guide/complementary-colors).
- **Analogue :** trois à cinq voisines à la suite. Calme et naturel. Voyez les [couleurs analogues](https://gradiently.design/fr/guide/analogous-colors).
- **Triadique :** trois teintes espacées d’un tiers de cercle. Audacieux mais équilibré. Voyez les [couleurs triadiques](https://gradiently.design/fr/guide/triadic-colors).
- **Complémentaire divisée :** une teinte plus les deux de part et d’autre de son opposée. Du contraste avec moins de tension.
- **Carré ou tétradique :** quatre teintes régulièrement espacées, ou deux paires complémentaires. Riche et difficile à maîtriser.
- **Monochrome :** une teinte en de nombreuses luminosités. Voyez les [palettes monochromes](https://gradiently.design/fr/guide/monochromatic-color-scheme).

- Bleu: #2156a5
- Orange (complémentaire): #f28c28
- Bleu-vert (voisine): #1b8a8f
- Bleu-violet (voisine): #4b3a9a
- Rouge (triade): #d7263d
- Jaune (triade): #f4e04d

En partant du bleu sur le cercle du peintre : sa complémentaire, ses deux voisines et les deux autres points de sa triade.

## Ce que le cercle chromatique ne montre pas

Un cercle montre la teinte. Il ne dit rien de la luminosité ni de la saturation, qui décident pourtant de l’essentiel de l’aspect d’une palette. Le bleu et l’orange à pleine intensité sont durs ensemble. Un bleu marine profond avec un abricot doux emploie les mêmes deux teintes et paraît raffiné. Toute palette lue sur un cercle a encore besoin d’un sombre, d’un clair et de versions plus discrètes de ses couleurs.

- Bleu et orange, pleine intensité: `linear-gradient(90deg, #0000ff 0%, #0000ff 50%, #ff8000 50%, #ff8000 100%)`
- Mêmes teintes : marine et abricot: `linear-gradient(90deg, #14213d 0%, #14213d 50%, #f4b183 50%, #f4b183 100%)`

Le cercle vous donne les teintes. La luminosité et la saturation décident si elles s’accordent bien.

### Les cercles numériques simples sont inégaux

En TSL, le jaune pur et le bleu pur ont la même valeur de luminosité, et pourtant le jaune paraît bien plus lumineux. C’est que le TSL repose sur les canaux de l’écran, non sur la perception de la luminosité par l’œil. Les espaces colorimétriques perceptuels comme OKLCH corrigent cela : des valeurs de luminosité égales paraissent également claires à travers les teintes, ce qui les rend meilleurs pour construire des palettes et des [dégradés fluides](https://gradiently.design/fr/guide/css-gradient-oklch).

## Comment construire une palette avec le cercle chromatique

1. **Choisissez votre teinte d’ancrage** Commencez par la couleur qui doit absolument être là : une couleur de marque, de produit ou tirée d’une photo.
2. **Choisissez une harmonie selon l’ambiance** Analogue ou monochrome pour le calme ; complémentaire, complémentaire divisée ou triadique pour l’énergie.
3. **Laissez une couleur mener** Employez l’ancre pour l’essentiel du design et les autres en plus petites quantités. Des quantités égales de chaque couleur paraissent rarement voulues.
4. **Variez luminosité et saturation** Ajoutez une version sombre et une claire, et atténuez les couleurs secondaires. C’est ce qui transforme des teintes en palette.
5. **Testez dans une vraie mise en page** Mettez du texte dessus, vérifiez le contraste et regardez-la à la taille où on la verra.

Quand une palette marche en pastilles, essayez-la en dégradé. Les teintes voisines se fondent à merveille ; les teintes opposées demandent une couleur intermédiaire. Les [combinaisons de couleurs pour dégradés](https://gradiently.design/fr/guide/gradient-color-combinations) donnent des exemples testés.

## FAQ

### Qu’est-ce qu’un cercle chromatique ?

Un cercle chromatique est un cercle de teintes dans l’ordre spectral qui montre les relations entre couleurs : les opposées contrastent, les voisines s’harmonisent et les teintes régulièrement espacées s’équilibrent.

### Quelles sont les couleurs primaires du cercle chromatique ?

Sur le cercle traditionnel du peintre, ce sont le rouge, le jaune et le bleu. Sur le cercle de l’écran utilisé par les outils numériques, ce sont le rouge, le vert et le bleu.

### Pourquoi les couleurs complémentaires diffèrent-elles selon les cercles ?

Les cercles du peintre et de l’écran ont des primaires différentes, donc un espacement différent. Sur le cercle du peintre, l’opposée du bleu est l’orange ; sur celui de l’écran, c’est le jaune.

### Quel cercle chromatique les designers doivent-ils utiliser ?

Pour le numérique, le cercle de l’écran correspond à vos outils. Beaucoup de designers lisent les harmonies sur le cercle du peintre et choisissent les valeurs exactes à l’écran. La cohérence compte plus que le choix.