Comment utiliser : Convertisseur de couleurs
- Saisissez ou collez une couleur dans Valeur de couleur — tous les formats CSS sont acceptés — ou choisissez-en une avec le sélecteur de couleur.
- Ajustez l'Opacité si vous avez besoin de transparence ; les valeurs HEX à 8 chiffres et
/ alphase mettent à jour automatiquement. - Cliquez sur Copier à côté du format souhaité. Passez à la syntaxe Ancienne syntaxe si votre code utilise
rgba(…, …)avec des virgules. - Faites défiler jusqu'à la palette pour obtenir 11 teintes et nuances ; choisissez une sortie en variables CSS, Tailwind v4, SCSS ou JSON, puis copiez-la ou téléchargez-la.
Qu'est-ce qu'un convertisseur de couleurs ?
Un convertisseur de couleurs traduit une couleur dans les différentes notations utilisées par le CSS et les outils de design. Le même indigo peut s'écrire #4f46e5, rgb(79 70 229), hsl(243.4 75.4% 58.6%) ou oklch(51.06% 0.2301 276.97) — toutes décrivent une même couleur sRGB. Les designers vous transmettent du HEX depuis Figma, une bibliothèque de composants attend des canaux HSL, et un système de design moderne peut être écrit en OKLCH : convertir rapidement et correctement est donc une tâche quotidienne.
Formats pris en charge
| Format | Exemple | Usage |
|---|---|---|
| HEX (3, 4, 6, 8 chiffres) | #4f46e5, #4f46e580 | Le format de transmission le plus courant. La paire de chiffres optionnelle (4e/8e) correspond à l'alpha : 80 ≈ 50 %. |
| RGB / RGBA | rgb(79 70 229 / 0.5) | Calculs sur les canaux, canvas, ancien code rgba(). |
| HSL / HSLA | hsl(243 75% 59%) | Ajustements manuels rapides de la teinte, de la saturation et de la luminosité. |
| HWB | hwb(243 27% 10%) | Mélange d'une teinte pure avec du blanc et du noir — intuitif pour les sélecteurs. |
| OKLCH | oklch(51% 0.23 277) | Palettes perceptuellement homogènes et tokens de design (Tailwind CSS v4 fournit sa palette en OKLCH). |
| CMYK | cmyk(66%, 69%, 0%, 10%) | Un point de départ approximatif pour l'impression — voir la note ci-dessous. |
| Couleurs nommées | tomato, rebeccapurple | Les 148 mots-clés CSS sont reconnus ; l'outil affiche aussi le nom le plus proche pour toute couleur. |
Pourquoi apprendre l'OKLCH
En HSL, un jaune à « 50 % de luminosité » paraît bien plus clair qu'un bleu à 50 %, car le HSL est une simple transformation géométrique du RGB. L'OKLCH repose sur le modèle OKLab, conçu pour que des écarts égaux de L (luminosité) paraissent égaux à l'œil ; C désigne le chroma (intensité colorée) et H l'angle de teinte. Il convient donc parfaitement pour générer des nuances cohérentes, des états de survol et des paires de couleurs accessibles. L'OKLCH peut aussi décrire des couleurs hors sRGB (par exemple Display P3) ; lorsque vous en saisissez une, cet outil la ramène dans le sRGB et vous le signale.
Comment la palette 50–950 est générée
La palette conserve la teinte de votre couleur et travaille en OKLCH : chaque étape reçoit une luminosité cible fixe (de 50, très clair, à 950, très foncé) et une part du chroma de votre couleur, réduite si nécessaire pour que chaque nuance reste dans le sRGB. Avec l'option Conserver ma couleur exacte activée, votre saisie remplace l'étape dont la luminosité est la plus proche : la couleur de marque apparaît donc inchangée dans l'échelle. Besoin de vérifier l'accessibilité de paires issues de la palette ? Utilisez le Vérificateur de contraste.
Note sur le CMYK
La conversion écran vers impression dépend de l'encre, du papier et du profil ICC de votre imprimeur. Les valeurs CMYK proposées ici utilisent la formule standard non calibrée (K = 1 − max(R, G, B)), suffisante pour des maquettes mais pas pour une impression critique pour la marque : demandez à votre imprimeur une conversion avec profil.
Utiliser les couleurs dans Webflow
Collez la valeur HEX dans le sélecteur de couleur de Webflow ou dans une variable de couleur (panneau Variables). Créer une variable par étape de la palette — par exemple Marque 50 … Marque 950 — vous donne la même structure de tokens que la sortie en variables CSS, afin que vos classes puissent référencer des nuances au lieu de valeurs codées en dur.
Aussi recherché comme : convertisseur de couleur, hex vers rgb, rgb vers hex, hex vers hsl, convertisseur oklch, sélecteur de couleur, convertisseur couleur cmyk, générateur de palette de couleurs.
Outils complémentaires : Convertisseur de couleurs
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
- Générateur d’ombres CSS — Empilez plusieurs couches d’ombre, ajustez les décalages, le flou, l’étalement et l’opacité sur une carte en direct, puis copiez le CSS box-shadow ou text-shadow.
- Convertisseur de base numérique — Saisissez un nombre dans n’importe quelle base et découvrez-le instantanément dans toutes les autres.
- Image en Base64 — Convertissez un fichier PNG, JPEG, SVG, WebP ou GIF en URI de données Base64 avec du code CSS et HTML prêt à être copié — ou collez une chaîne Base64 pour prévisualiser et télécharger l'image.
Questions fréquentes
Comment convertir du HEX en RGB à la main ?
#4F46E5 : 4F = 79, 46 = 70, E5 = 229, soit rgb(79 70 229). Un code à 3 chiffres comme #f60 double d'abord chaque chiffre (#ff6600).Que signifie une couleur HEX à 8 chiffres ?
00 (totalement transparent) à ff (opaque). #4f46e580 est l'indigo à 128/255 ≈ 50 % d'opacité. Tous les navigateurs modernes prennent en charge le HEX à 4 et 8 chiffres.Faut-il utiliser l'OKLCH plutôt que le HEX ou le HSL ?
Pourquoi ma valeur HSL change-t-elle légèrement après conversion ?
Quelle est la différence entre HSL et HWB ?
hwb(0 0% 0%) est le rouge pur et hwb(0 50% 0%) est le rouge mélangé à 50 % de blanc (rose). Le HWB est souvent plus simple à appréhender dans les sélecteurs de couleur.