Grand texte, 24 px
Texte courant de 15 px. Portez ce vieux whisky au juge blond qui fume.
Convertissez du HEX en HSL pour voir une couleur en teinte, saturation et luminosité : #4CAF50 vaut hsl(122, 39 %, 49 %). En HSL, un état de survol s’obtient en baissant la luminosité de quelques points sans toucher à la teinte.
Mode d’emploi
- Touchez le grand aperçu pour ouvrir le sélecteur, utilisez la pipette pour prélever une couleur à l’écran ou saisissez une valeur dans un champ.
- Collez n’importe quelle couleur CSS (#hex, rgb(), hsl(), hwb(), oklch(), lab(), un nom…) dans un champ ou n’importe où sur la page.
- Touchez le bouton copier à côté d’un format. Faites glisser Opacité pour ajouter de la transparence.
- Dans la palette, touchez une nuance pour l’utiliser ; appui long (ou clic droit) pour copier son HEX. Dans Contraste, réglez texte et fond, puis touchez une suggestion pour corriger un couple non conforme.
- Les WCAG 2.1 demandent 4,5:1 pour le texte normal (AA) et 7:1 pour AAA. Le grand texte (24 px, ou 18,66 px en gras) demande 3:1 en AA et 4,5:1 en AAA. Composants d’interface et graphiques : 3:1.
- Les suggestions conservent la teinte et la saturation et ne modifient que la luminosité (en OKLCH) jusqu’à la valeur conforme la plus proche.
- Les couleurs semi-transparentes sont fusionnées avec le fond avant le calcul.
- Les valeurs CMJN sont une conversion simple ; pour l’impression, utilisez le profil couleur de votre imprimeur.
- Vos couleurs récentes sont enregistrées uniquement dans ce navigateur.
Les formats de couleur
Le HEX est le code à six chiffres de CSS et des outils de design : #1E88E5 signifie rouge 1E (30), vert 88 (136) et bleu E5 (229). Le RVB écrit les mêmes valeurs en décimal, de 0 à 255. Le HSL décrit teinte (0–360°), saturation et luminosité, ce qui facilite d’assombrir ou d’adoucir une couleur. Le HSV est le modèle de la plupart des carrés de sélection.
L’OKLCH est un format CSS plus récent fondé sur l’espace perceptuel Oklab : des pas égaux de luminosité paraissent également différents, idéal pour construire des échelles et des palettes accessibles. Le CMJN décrit la couverture d’encre en impression ; ici, c’est une conversion simple sans profil, utilisez celui de votre imprimeur pour des couleurs exactes.
Convertir à la main
Pour passer du HEX au RVB, coupez le code en trois paires et convertissez chacune depuis la base 16 : #FF6347 donne 255, 99, 71. Pour le CMJN depuis le RVB : K = 1 − max(R, V, B) / 255, puis C = (1 − R/255 − K) / (1 − K), et de même pour M et J ; l’orange pur rgb(255, 165, 0) vaut cmjn(0 %, 35 %, 100 %, 0 %). L’outil fait tout instantanément et accepte noms, rgb(), hsl(), hwb(), lab() et oklch().
Composer une palette
Les teintes mélangent la couleur au blanc, les nuances au noir : on obtient des paliers plus clairs et plus foncés pour fonds, bordures et survols. Les palettes harmoniques font tourner la teinte : complémentaire (180°), analogues (±30°), triade (120°) et tétrade (pas de 90°). Les couleurs récentes restent dans ce navigateur uniquement.
Questions fréquentes
Comment convertir un HEX en RVB ?
Collez le code HEX dans n’importe quel champ et copiez la valeur RVB. À la main, coupez le code en paires et convertissez chacune depuis l’hexadécimal : #1E88E5 donne rgb(30, 136, 229).
Comment prélever une couleur à l’écran ?
Touchez la pipette et cliquez n’importe où sur l’écran. Elle fonctionne dans les navigateurs qui gèrent l’API EyeDropper, comme Chrome et Edge sur ordinateur.
Qu’est-ce que l’OKLCH et pourquoi l’utiliser ?
L’OKLCH est un format CSS avec luminosité, chroma et teinte, basé sur le modèle Oklab. En ne changeant que la luminosité, on obtient des paliers réguliers qui gardent la même teinte, ce que le HSL ne permet pas.
Les valeurs CMJN sont-elles fiables pour l’impression ?
C’est une conversion mathématique sans profil couleur. Le rendu imprimé dépend du papier, de l’encre et de la presse : pour une couleur de marque, utilisez les valeurs CMJN du profil de votre imprimeur.
Puis-je ajouter de la transparence ?
Oui. Faites glisser Opacité et tous les formats se mettent à jour : le HEX reçoit une paire alpha (#RRVVBBAA) et les fonctions CSS une valeur alpha.
Mon historique de couleurs est-il enregistré ?
Les couleurs récentes sont conservées uniquement dans ce navigateur, sur votre appareil. Rien n’est envoyé à un serveur.