# Sélecteur de couleur

> Roue de couleurs HSV, HSL et RYB (peintre), harmonies prêtes à l'emploi et conversion HEX, RGB, HSL, OKLCH, CMYK. Token Tailwind le plus proche inclus.

URL: https://acrafto.com/fr/selecteur-couleur-en-ligne/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

Choisissez une couleur sur la roue, affinez-la sur la zone de saturation, et retrouvez-la dans tous les formats que parle votre projet, de `#RRGGBB` à `oklch()`. Ce sélecteur va aussi plus loin que la plupart des outils : trois géométries de roue, dont la roue RYB des peintres, des harmonies qui construisent une palette pour vous, un canal alpha, et l’export en un clic de toute la palette en variables CSS, SCSS ou JSON. Tout est calculé localement dans votre navigateur.

## RYB ou RGB: trois roues, pas une seule

Le sélecteur **Mode de la roue** change la géométrie de la roue elle-même :

- **HSV** et **HSL** sont les roues numériques : les teintes y sont réparties comme les écrans mélangent la lumière. Elles diffèrent dans le comportement de la zone carrée : le coin le plus lumineux du HSV correspond à la teinte pure, tandis que le HSL place les teintes pures à mi-luminosité, avec du blanc au-dessus.
- **RYB (peintre)** organise les teintes comme les artistes les ont apprises : rouge, jaune et bleu comme couleurs primaires, avec orange, vert et violet entre les deux (voir le [modèle RYB sur Wikipédia](https://fr.wikipedia.org/wiki/Rouge_jaune_bleu)). La différence se voit surtout dans les harmonies : sur la roue RYB, le complémentaire du rouge est le **vert** et celui du bleu est **orange**, les paires classiques du pigment, alors qu’une roue numérique associe le rouge au cyan. Si une palette « complémentaire » d’un sélecteur classique vous a déjà semblé fausse à l’œil, voilà pourquoi.

## Des harmonies de couleurs qui construisent la palette pour vous

Choisissez une règle dans **Harmonie des couleurs** : la roue marque les couleurs compagnes, qui apparaissent comme une palette prête à l’emploi juste en dessous :

- **Complémentaire :** une couleur opposée. Le contraste le plus fort, à utiliser pour un accent unique face à une couleur de marque dominante.
- **Complémentaire divisée :** les deux voisines du complémentaire. Presque autant de contraste, bien plus facile à équilibrer.
- **Triadique :** trois teintes réparties uniformément. Vivant mais stable si l’une domine et que les deux autres sont utilisées avec parcimonie.
- **Tétradique (carré) :** quatre teintes. Des palettes riches pour l’illustration et la visualisation de données, difficiles à équilibrer dans une interface d’application.
- **Analogue :** les voisines immédiates. Une combinaison calme pour les fonds et les dégradés.
- **Monochromatique :** une seule teinte déclinée en plusieurs niveaux de luminosité. Le choix le plus sûr pour les états d’un bouton (survol, actif, désactivé).

Le panneau de palette copie tout l’ensemble en un clic, dans le format de votre choix : **HEX** brut, **RGB**, **HSL**, **OKLCH**, des **propriétés personnalisées CSS** prêtes à coller (`--color-1: …`), des **variables SCSS** ou du **JSON** pour votre code. Pour vérifier si les couleurs de la palette gardent assez de contraste pour les personnes qui distinguent mal les teintes, prenez une capture d’écran puis testez la [conversion en niveaux de gris](https://acrafto.com/fr/convertir-images-niveaux-de-gris-en-ligne/).

## Convertir HEX, RGB, HSL, OKLCH et CMYK: collez n’importe quoi, lisez tout

Les champs de saisie acceptent pratiquement toutes les notations de couleur : `#f80`, `#ff8800`, du hex à 8 chiffres avec alpha, `rgb()` et `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` et des noms de couleur CSS comme `rebeccapurple`. Quel que soit le format saisi, vous obtenez sept sorties synchronisées : **HEX, RGB, HSL, HSV, LCH, OKLCH et CMYK**, chacune avec son propre bouton de copie.

Le curseur **Opacité (alpha)** sous l’aperçu fait basculer les sorties vers leurs formes transparentes `#RRGGBBAA`, `rgba()` et `hsla()`. L’aperçu s’affiche sur un damier, ce qui permet de juger la transparence d’un coup d’œil.

## Trouvez le token Tailwind CSS le plus proche

Deux étiquettes sous l’aperçu nomment la couleur pour vous : la **couleur nommée CSS la plus proche** (utile pour des prototypes rapides) et le **token Tailwind le plus proche**, par exemple `orange-500`. Vous restez ainsi dans votre design system au lieu d’inventer des valeurs isolées. Cliquez sur une étiquette pour la copier.

Cela répond à la question qui revient à chaque passation de design : le graphiste a envoyé un code hex, quelle classe Tailwind lui correspond le mieux ? La correspondance est calculée par rapport à la palette par défaut de Tailwind CSS 4 (voir la [documentation Tailwind](https://tailwindcss.com/docs/colors), en anglais), donc le token obtenu peut être collé directement dans un nom de classe.

## Quel format de couleur utiliser ?

| Format | Nom complet | Quand l’utiliser |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Le standard du web.** Compact, pris en charge partout, facile à copier. Huit chiffres ajoutent l’alpha. |
| **RGB** | Red, Green, Blue | **Comme pensent les écrans.** Trois canaux de lumière, de 0 à 255. Le format attendu par la plupart des API et du code canvas. |
| **HSL** | Hue, Saturation, Lightness | **Pour une édition à l’œil.** « Un peu plus clair » ou « moins saturé » revient à changer un seul chiffre. |
| **HSV** | Hue, Saturation, Value | **Logiciels graphiques.** Le modèle derrière les sélecteurs de couleur de Photoshop et GIMP. |
| **LCH** | Lightness, Chroma, Hue | **Perceptuellement uniforme.** Des pas numériques égaux paraissent visuellement égaux, ce que le HSL ne fait que prétendre. |
| **OKLCH** | OK Lightness, Chroma, Hue | **Le choix CSS moderne.** Corrige les décalages de teinte dans les bleus dont souffre le LCH. Pris en charge par tous les navigateurs actuels, idéal pour les tokens de design. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Une orientation pour l’impression.** Une conversion approximative pour dialoguer avec un imprimeur, les valeurs finales dépendent de son profil colorimétrique. |

Pourquoi l’OKLCH est perceptuellement plus uniforme que les anciens modèles est expliqué par Björn Ottosson, qui a conçu l’espace Oklab, dans son [article original](https://bottosson.github.io/posts/oklab/) (en anglais). La syntaxe et la prise en charge par les navigateurs sont résumées sur [MDN](https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Values/color_value/oklch). Le fonctionnement du modèle d’impression est décrit dans l’article [Quadrichromie sur Wikipédia](https://fr.wikipedia.org/wiki/Quadrichromie).

## De petites choses qui font gagner du temps

- **L’historique se tient à jour tout seul.** Les 24 dernières couleurs survivent à une actualisation de la page. Elles restent dans le stockage local de votre navigateur et ne sont jamais envoyées ailleurs.
- **Pipette.** Dans les navigateurs qui prennent en charge l’API EyeDropper (Chrome et Edge), vous pouvez prélever une couleur n’importe où sur votre écran, même en dehors de la fenêtre du navigateur. Pour prélever une couleur dans une photo ou un fichier logo, utilisez la [pipette à couleurs](https://acrafto.com/fr/pipette-couleur-image-en-ligne/), qui fonctionne dans tous les navigateurs.
- **Contrôle au clavier.** La roue et la zone de saturation répondent aux flèches directionnelles, pour ajuster une couleur par petits pas.
- Les **préréglages** couvrent les couleurs de base courantes quand vous avez juste besoin d’un point de départ rapide.

## Questions fréquentes

### Comment convertir OKLCH en HEX ?

Collez la valeur `oklch()` dans le champ OKLCH et tous les autres résultats se mettent à jour instantanément, HEX inclus. Cela fonctionne aussi dans l'autre sens : saisissez un code HEX et lisez l'équivalent `oklch()`. Une réserve : OKLCH peut décrire des couleurs hors du gamut sRGB, qui sont alors écrêtées à ce que le sRGB peut afficher. Un `oklch()` très saturé n'aura donc pas le même rendu que sa version HEX sur un écran à large gamut.

### oklch() est-il fiable en production ?

Oui. Toutes les versions actuelles de Chrome, Edge, Firefox et Safari prennent en charge `oklch()`, devenue une notation courante pour les tokens de design (Tailwind CSS 4 définit toute sa palette avec). Pour les très anciens navigateurs, prévoyez un repli HEX sur la ligne précédente. Cet outil vous donne les deux valeurs.

### Pourquoi les harmonies changent-elles quand je passe à la roue RYB ?

Parce que la notion d'« opposé » dépend de la façon dont les teintes sont réparties sur le cercle. La roue RYB répartit uniformément les primaires du pigment, si bien que les paires complémentaires correspondent à ce que les peintres connaissent : rouge et vert, bleu et orange, jaune et violet. Les roues HSV et HSL répartissent les teintes selon le mélange de la lumière, et associent donc le rouge au cyan. Aucune des deux n'a tort : RYB correspond à l'enseignement artistique traditionnel, HSV et HSL à ce que font les écrans.

### Puis-je faire confiance aux valeurs CMYK pour l'impression ?

Prenez-les comme une orientation. La conversion réelle pour l'impression dépend du [profil ICC](https://fr.wikipedia.org/wiki/Profil_ICC) de l'imprimante, du papier et de l'encre. La même couleur RGB rend différemment sur papier couché et sur papier non couché. Les valeurs affichées ici utilisent une formule standard qui donne une bonne approximation, mais l'épreuve finale revient à l'imprimeur.

### Où est le bouton de la pipette dans Firefox ou Safari ?

Il est volontairement caché. L'[API EyeDropper](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, en anglais) dont dépend ce bouton n'est aujourd'hui disponible que dans les navigateurs basés sur Chromium (Chrome, Edge, Opera). Toutes les autres fonctions de l'outil marchent partout, seul le prélèvement à l'écran manque. Si vous avez besoin de la couleur d'une image, utilisez la [pipette à couleurs](https://acrafto.com/fr/pipette-couleur-image-en-ligne/), qui fonctionne dans tous les navigateurs.

### Mon historique de couleurs reste-t-il privé ?

Oui. L'historique est stocké dans le localStorage de votre navigateur, sur votre appareil. Rien de ce que vous sélectionnez, collez ou copiez n'est envoyé où que ce soit. Tout l'outil fonctionne en JavaScript dans votre navigateur, ce que vous pouvez vérifier dans l'onglet Réseau des outils de développement.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))