Convertissez en temps réel entre HEX, RGB, HSL et CMYK.
💡 Remarque : Les directives WCAG 2.1 recommandent un rapport d'au moins 4.5:1 pour le texte normal (AA) et 7:1 pour le niveau AAA ; le grand texte nécessite 3:1 pour le niveau AA et 4.5:1 pour le niveau AAA.
Convertissez en temps réel entre HEX, RGB, HSL et CMYK. Utilisez-le au travail, en développement, en apprentissage ou pour une vérification rapide.
Cet outil fonctionne dans le navigateur. Avant d'utiliser des données sensibles, assurez-vous que votre appareil et votre navigateur sont fiables.
Cet outil convertit les couleurs entre HEX, RGB, HSL et CMJN (CMYK) en temps réel. Choisissez une couleur avec le sélecteur ou saisissez une valeur dans n’importe quel champ : les trois autres se mettent à jour immédiatement, chacun avec son bouton de copie. Par exemple, l’ambre #F59E0B correspond à rgb(245, 158, 11), hsl(38, 92%, 50%) et cmyk(0%, 36%, 96%, 4%). Le champ HEX accepte aussi l’écriture abrégée à trois chiffres comme #F90, développée en #FF9900.
Chaque format a son rôle. HEX est la norme dans le code web et les logiciels de design ; RGB correspond à la lumière rouge, verte et bleue de l’écran ; HSL décrit la teinte, la saturation et la luminosité, ce qui permet d’obtenir une nuance plus claire ou plus foncée d’une même couleur en modifiant seulement L, très pratique en CSS ; CMJN représente les quatre encres d’impression. Pour saisir du RGB, HSL ou CMJN, utilisez des nombres entiers séparés par des virgules, comme rgb(255, 153, 0), hsl(36, 100%, 50%) ou cmyk(0%, 40%, 100%, 0%). La transparence (alpha) n’est pas prise en charge.
Notez que le CMJN est calculé ici à partir du RGB avec une formule simple, sans profil colorimétrique ICC. La couleur imprimée dépend du papier, des encres et de la machine : avant une impression, fiez-vous aux nuanciers ou au profil de votre imprimeur. Par ailleurs, les valeurs HSL sont arrondies à l’entier, si bien qu’un retour de HSL vers HEX peut décaler un canal d’un cran ; c’est un arrondi normal, pas une erreur.
Dans l’onglet du vérificateur de contraste, choisissez la couleur du texte et celle du fond. L’outil calcule le rapport de contraste selon les WCAG 2.1 et indique s’il est suffisant pour le texte normal (AA 4.5:1, AAA 7:1), le grand texte (AA 3:1, AAA 4.5:1) et les composants d’interface (3:1), avec un aperçu en direct. Par exemple, le gris #767676 sur blanc donne 4.54:1 et passe tout juste le niveau AA, tandis que #777777 n’atteint que 4.47:1 et échoue. Pour une analyse plus poussée avec des suggestions de couleurs, utilisez l’Analyseur de contraste des couleurs de ce site.
Chaque paire des six chiffres hexadécimaux représente un canal en base 16. Dans #F59E0B, F5 = 245 (rouge), 9E = 158 (vert) et 0B = 11 (bleu), soit rgb(245, 158, 11). Collez le code HEX dans l’outil pour obtenir automatiquement RGB, HSL et CMJN.
L’écran émet de la lumière RGB alors que l’imprimante utilise des encres CMJN qui absorbent la lumière ; chacune couvre une gamme de couleurs différente, et les bleus, verts ou oranges très vifs ne s’impriment souvent pas à l’identique. Le CMJN de cet outil est une conversion mathématique qui ignore papier et encre : demandez une épreuve avec les réglages de votre imprimeur.
Les WCAG considèrent comme grand texte un texte d’au moins 18 pt (environ 24 px) en graisse normale, ou d’au moins 14 pt (environ 18,66 px) en gras. Le grand texte exige 3:1 pour le niveau AA, le texte courant 4.5:1. Les composants d’interface, comme les bordures de boutons, les contours de champs et les icônes, demandent au moins 3:1 par rapport aux couleurs voisines.
Pas pour le moment. L’outil lit rgb(r, g, b), hsl(h, s%, l%) et cmyk(c%, m%, y%, k%) sans alpha, ainsi que le HEX à 3 ou 6 chiffres. Pour vérifier une couleur semi-transparente, calculez d’abord la couleur opaque obtenue sur son fond, puis testez celle-ci.
Voir cette catégorie: Design & Couleurs
Ajustez les ombres de boîte et le flou d'arrière-plan avec copie rapide du CSS.
Vérifiez la conformité de contraste WCAG 2.1 entre texte et arrière-plan.
Simulez des corps rigides, la gravité et des collisions avec un moteur physique 2D interactif.
Placez des points d'ancrage, faites glisser les poignées de Bézier sur un canevas 500×500 et obtenez aussitôt l'attribut d du tracé SVG et une règle CSS clip-path: path().
