devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Outils couleur

Convertisseur de couleurs

Collez n’importe quelle couleur CSS (HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato) et obtenez instantanément tous les autres formats, ainsi qu’une palette 50–950 prête à l’emploi.

Fonctionne dans votre navigateur · rien n’est envoyé
#4f46e5
Essayer :

Tous les formats

Palette de teintes et nuances (50–950)

Options
Cet outil vous a-t-il été utile ?Soyez le premier à noter

Comment utiliser : Convertisseur de couleurs

  1. Saisissez ou collez une couleur dans le champ Valeur de couleur (tous les formats CSS sont acceptés), ou choisissez-la avec le sélecteur de couleur.
  2. Ajustez l’Opacité si vous avez besoin de transparence ; les valeurs HEX à 8 chiffres et / alpha se mettent à jour automatiquement.
  3. Cliquez sur Copier à côté du format souhaité. Passez à la syntaxe Héritée si votre code utilise rgba(…, …) avec des virgules.
  4. 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 transforme 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 seule couleur sRGB. Les designers transmettent des valeurs HEX depuis Figma, une bibliothèque de composants attend des canaux HSL, et un système de design récent peut être écrit en OKLCH. Convertir vite et correctement est donc une tâche quotidienne.

Formats pris en charge

FormatExempleIdéal pour
HEX (3, 4, 6, 8 chiffres)#4f46e5, #4f46e580Le format de transmission le plus courant. La paire optionnelle de chiffres en 4e/8e position correspond à l’alpha : 80 ≈ 50 %.
RGB / RGBArgb(79 70 229 / 0.5)Calculs sur les canaux, canvas, code rgba() existant.
HSL / HSLAhsl(243 75% 59%)Ajustements manuels rapides de la teinte, de la saturation et de la luminosité.
HWBhwb(243 27% 10%)Mélange d’une teinte pure avec du blanc et du noir, intuitif pour les sélecteurs.
OKLCHoklch(51% 0.23 277)Palettes perceptuellement homogènes et tokens de design (Tailwind CSS v4 livre sa palette en OKLCH).
CMYKcmyk(66%, 69%, 0%, 10%)Un point de départ approximatif pour l’impression : voir la note ci-dessous.
Noms de couleurstomato, rebeccapurpleLes 148 mots-clés CSS sont reconnus ; l’outil affiche aussi le nom le plus proche pour toute couleur.

Pourquoi apprendre OKLCH

En HSL, un jaune à « 50 % de luminosité » paraît bien plus clair qu’un bleu à 50 %, car HSL est une simple transformation géométrique du RGB. OKLCH repose sur le modèle OKLab, conçu pour que des écarts égaux de L (luminosité) soient perçus comme égaux par l’œil. C représente la chroma (intensité colorée) et H l’angle de teinte. Il est donc idéal pour générer des nuances cohérentes, des états au survol et des paires de couleurs accessibles. 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 en informe.

Comment la palette 50–950 est générée

La palette conserve la teinte de votre couleur et travaille en OKLCH : chaque palier reçoit une cible de luminosité fixe (du très clair 50 au très foncé 950) et une part de la chroma de votre couleur, réduite si nécessaire pour que chaque nuancier reste dans le sRGB. Avec l’option Conserver ma couleur exacte activée, votre saisie remplace le palier dont la luminosité est la plus proche, de sorte que la couleur de marque apparaît inchangée dans l’échelle. Besoin de vérifier l’accessibilité de paires issues de la palette ? Utilisez le Vérificateur de contraste.

Une note sur le CMYK

La conversion écran vers impression dépend de l’encre, du papier et du profil ICC utilisé par votre imprimeur. Les valeurs CMYK affichées ici utilisent la formule standard non calibrée (K = 1 − max(R, G, B)), suffisante pour des maquettes mais pas pour des travaux d’impression critiques 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 palier de la palette, par exemple Marque 50 … Marque 950, vous donne la même structure de tokens que la sortie en variables CSS : les classes peuvent ainsi référencer des nuances au lieu de valeurs codées en dur.

Questions fréquentes

Comment convertir un HEX en RGB à la main ?
Découpez les six chiffres en trois paires et convertissez chacune de la base 16 vers la base 10. Pour #4F46E5 : 4F = 79, 46 = 70, E5 = 229, donc la couleur est rgb(79 70 229). Un code à 3 chiffres comme #f60 doit d’abord doubler chaque chiffre (#ff6600).
Que signifie une couleur HEX à 8 chiffres ?
Les deux derniers chiffres représentent le canal alpha (opacité), de 00 (totalement transparent) à ff (opaque). #4f46e580 correspond à l’indigo à 128/255 ≈ 50 % d’opacité. Tous les navigateurs modernes prennent en charge le HEX à 4 et 8 chiffres.
Faut-il utiliser OKLCH plutôt que HEX ou HSL ?
Pour les tokens de design et les nuances générées, OKLCH est généralement préférable, car sa luminosité est perceptuellement uniforme et il peut exprimer des couleurs à large gamme. Il est pris en charge par tous les grands navigateurs actuels. Le HEX reste le format le plus portable pour les transmissions et les outils plus anciens.
Pourquoi ma valeur HSL change-t-elle légèrement après la conversion ?
Les couleurs à l’écran sont stockées en RGB 8 bits (0–255 par canal), si bien que de nombreuses valeurs HSL arrondissent à la même couleur RGB. L’outil affiche le HSL avec une décimale afin que la reconversion donne le même HEX.
Quelle est la différence entre HSL et HWB ?
Les deux utilisent un angle de teinte. HSL définit ensuite la saturation et la luminosité, tandis que HWB indique quelle quantité de blanc et de noir mélanger à la teinte pure : hwb(0 0% 0%) est le rouge pur et hwb(0 50% 0%) est du rouge mélangé à 50 % de blanc (rose). HWB est souvent plus simple à appréhender dans les sélecteurs de couleur.
Puis-je installer Convertisseur de couleurs en tant qu’application web et l’utiliser hors ligne ?
Oui. Convertisseur de couleurs est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.

Outils similaires

Générateur de dégradé CSSConcevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, parte…Générateur de box-shadowEmpilez plusieurs couches d’ombre, ajustez les décalages, le flou, l’étalement et l’opacité sur une carte e…Convertisseur de basesSaisissez un nombre dans n’importe quelle base et voyez-le instantanément dans toutes les autres. Analysez …