Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Lit n’importe quelle couleur CSS — hexadécimal, `rgb()`, `hsl()`, `lab()`, `oklch()`, un mot-clé — et l’affiche dans toutes les notations à la fois, sur un fond clair et un fond sombre. Il dit aussi quand une couleur sort du sRGB et quelle est la plus proche que l’écran atteint.
Lu comme HEX · le mot-clé le plus proche est mediumslateblue (#7b68ee), ΔEok 0,050
Sur clair
Texte dans cette couleur
Du texte courant à côté, pour l’échelle.
Sur sombre
Texte dans cette couleur
Du texte courant à côté, pour l’échelle.
| HEX | #5b6cffCe que copie n’importe quel outil de design. | |
|---|---|---|
| RGB | rgb(91 108 255)Les canaux tels qu’un écran les reçoit. | |
| HSL | hsl(233.78 100% 67.84%)Un réarrangement de sRGB. Sa « luminosité » n’est pas perceptuelle. | |
| HWB | hwb(233.78 35.69% 0%)La même roue décrite comme une teinte plus du blanc et du noir. | |
| LAB | lab(50.851% 29.157 -76.75)CIE L*a*b*, rapporté à D50 comme CSS le définit. | |
| LCH | lch(50.851% 82.102 290.8)L*a*b* en coordonnées polaires. Le chroma monte jusqu’à 150 environ. | |
| OKLAB | oklab(60.153% 0.0114 -0.2164)OKLab en coordonnées rectangulaires. Ici la distance euclidienne est la distance perçue. | |
| OKLCH | oklch(60.153% 0.2167 273.01)Celui qu’il vaut mieux prendre par défaut — voir la note ci-dessous. |
Pourquoi prendre OKLCH par défaut
- L’interpolation reste saturée. En sRGB, une droite entre deux couleurs passe près de l’axe neutre : un dégradé du bleu au jaune vire donc au gris en son milieu. En OKLCH, le chemin fait le tour de la roue des teintes et le point médian garde son chroma. C’est la différence visible la plus nette, et la raison pour laquelle CSS s’est doté de
in oklch. - La luminosité veut dire la luminosité. Deux couleurs HSL à
50%peuvent différer d’un facteur trois en clarté perçue :hsl(60 100% 50%)est jaune ethsl(240 100% 50%)est bleu marine. Le L d’OKLCH est calibré sur la perception, donc une échelle de 50 à 950 bâtie dessus avance par pas réguliers au lieu de tomber d’un coup au milieu. - La distance veut dire la différence. La distance euclidienne en OKLab est un ΔE exploitable, et c’est ce qui permet à « la couleur nommée la plus proche » ci-dessus de donner des réponses sensées là où une distance RGB appelle un violet profond
darkslateblue.
Cette couleur vaut L 60,2 %, C 0,2167, H 273,0°. Fixez L et H et ne bougez que C : vous obtenez la gamme de teintes ; fixez L et C et bougez H : vous obtenez une palette harmonieuse. Ni l’un ni l’autre ne marche en HSL.
Comment s’en servir
Collez la couleur
Dans n’importe quelle notation. La ligne sous la zone dit dans laquelle elle a été lue, et nomme le mot-clé CSS le plus proche avec la distance perceptuelle qui l’en sépare.
Regardez les deux fonds
Une couleur n’est spécifiée qu’à moitié sans la surface sur laquelle elle se pose. Un bleu moyen qui paraît assuré sur du blanc paraît éteint sur un fond sombre, et aucune notation ne montre cela.
Copiez la notation dont vous avez besoin
Chaque ligne a son propre bouton de copie et une phrase disant à quoi sert cet espace. La ligne correspondant à votre saisie est mise en évidence.
Questions fréquentes
Pourquoi la page recommande-t-elle sans cesse OKLCH ?
Pour trois raisons vérifiables. L’interpolation reste saturée, donc un dégradé du bleu au jaune ne devient pas gris au milieu. Sa luminosité est perceptuelle, donc une échelle de 50 à 950 a des pas réguliers. Et la distance qu’on y mesure est la différence perçue, ce qui fait que « la couleur nommée la plus proche » donne des réponses sensées.
Que veut dire « hors sRGB » pour ma couleur ?
Que la couleur exacte demande des valeurs de canal inférieures à 0 ou supérieures à 1, ce qu’un écran ne peut pas produire. L’échantillon montre la couleur la plus proche qu’il sait produire — trouvée en gardant la luminosité et la teinte et en baissant le chroma, ce qui n’abandonne que la saturation que l’écran n’a jamais eue. Un écran P3 en montre davantage.
La luminosité HSL est-elle la même chose que la luminosité OKLCH ?
Non, et c’est le piège. `hsl(60 100% 50%)` est un jaune vif et `hsl(240 100% 50%)` un bleu marine — même « luminosité », clarté perçue différente d’un facteur trois. HSL est un réarrangement du sRGB, pas un espace perceptuel.
LAB et OKLAB sont-ils la même chose ?
Des espaces différents avec la même idée. CIE L*a*b* date de 1976 et présente des non-uniformités connues, en particulier dans les bleus, où un décalage de teinte apparaît quand on change la luminosité. OKLab a été ajusté sur des données plus récentes précisément pour corriger cela, et c’est pour cela que c’est celui qui vaut la peine d’être utilisé.
À alimenter depuis
Extraire la palette d’une image
Palette Extractor
Tire d’une image une palette du nombre de couleurs voulu et l’exporte en hexadécimal, en variables CSS ou en nuancier ASE.
Couleur moyenne et dominante
Average & Dominant Colour
Rend une seule couleur représentative d’une image — moyenne, médiane ou la plus fréquente — sous forme d’objet couleur réutilisable.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Générateur de dégradé CSS
CSS Gradient Builder
Compose des dégradés linéaires, radiaux et coniques avec des arrêts déplaçables et rend le CSS, en sRGB ou en OKLCH.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Convertisseur de couleurs pour l’impression
Print Colour Converter
Convertit du RVB en CMJN par la formule simple, sans profil ICC ni profil papier, et signale les couleurs saturées que la quadrichromie ternira.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Échelle de teintes et de nuances
Tint & Shade Scale
Produit une échelle de luminosité de 50 à 950 à partir d’une seule couleur, à pas perceptuellement réguliers, prête à servir de jetons de design.
Couleur Tailwind la plus proche
Nearest Tailwind Colour
Trouve l’entrée de la palette Tailwind la plus proche d’une couleur donnée et affiche la distance perceptuelle.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.
Générateur de palette
Palette Generator
Construit une palette harmonieuse à partir d’une couleur de base, selon les règles complémentaire, triadique et analogue.