À propos de ces formats de couleur
HEX et RGB sont les formats standard pour les écrans et le CSS : HEX est compact (#3B82F6), RGB est explicite sur chaque canal (0-255). HSL (teinte, saturation, luminosité) et HSV (teinte, saturation, valeur/luminosité) décrivent la couleur d'une manière plus proche de la façon dont les gens la conçoivent - plus facile pour choisir une nuance ou une variation de la même teinte. CMJN (cyan, magenta, jaune, noir) est destiné à l'impression, où la couleur est créée en mélangeant de l'encre plutôt qu'en émettant de la lumière.
Ce que fait cet outil
Le convertisseur de couleurs affiche une couleur dans cinq notations à la fois : HEX, RGB, HSL, HSV et CMYK. Tapez un code hex, saisissez des valeurs RGB, faites glisser les curseurs ou choisissez l'une des 148 couleurs nommées CSS : tous les formats se mettent à jour instantanément.
Chaque ligne a son propre bouton de copie et utilise une syntaxe prête pour le CSS, comme rgb(59, 130, 246) ou hsl(217, 91%, 60%). La conversion se fait entièrement dans votre navigateur.
Quand l'utiliser
- Reporter une couleur de marque d'un fichier de design en HEX vers du code CSS, Android ou iOS qui attend du RGB ou du HSL.
- Obtenir une nuance plus claire ou plus foncée de la même teinte en ne modifiant que la luminosité en HSL.
- Vérifier qu'un texte posé sur une couleur reste lisible avec le Vérificateur de Contraste de Couleur.
- Construire la palette d'un design system et documenter chaque couleur dans toutes les notations dont les développeurs pourraient avoir besoin.
Exemple concret
#3B82F6
rgb(59, 130, 246) · hsl(217, 91%, 60%) · hsv(217, 76%, 96%) · cmyk(76%, 47%, 0%, 4%)
#FF6347 (tomato)
rgb(255, 99, 71) · hsl(9, 100%, 64%) · hsv(9, 72%, 100%) · cmyk(0%, 61%, 72%, 0%)
Questions sur cet outil
Pourquoi le CMYK n'est-il qu'une approximation des couleurs d'impression ?
Les écrans mélangent de la lumière et les imprimantes de l'encre, et chaque imprimante et chaque papier se comportent différemment. Les valeurs CMYK sont une conversion mathématique : demandez à votre imprimeur une valeur basée sur un profil quand la couleur exacte compte.
Quelle différence entre HSL et HSV ?
Les deux commencent par la teinte et la saturation. HSL utilise la luminosité, où 100 % est toujours blanc, tandis que HSV utilise la valeur ou brillance, où 100 % est la version la plus vive de la couleur. Les outils de design utilisent souvent HSV ; le CSS utilise HSL.
La transparence est-elle prise en charge ?
L'opacité ne fait pas partie de ces cinq formats ici. En CSS, ajoutez-la en quatrième valeur, par exemple rgb(59 130 246 / 50%), ou sous forme de deux chiffres hex supplémentaires, #3B82F680.
Cet outil est-il gratuit ?
Oui, il est gratuit. Sans inscription ni e-mail. Résultats directement sur cette page.
Comment obtenir mon résultat ?
Utilisez cet outil sur cette page. Le résultat apparaît ici, sans envoi par e-mail.