Loading...
Loading...
Translatez n'importe quelle couleur entre HEX, RGB et HSL avec des curseurs en direct, un sélecteur interactif et des chaînes CSS prêtes à copier — le tout calculé dans votre navigateur.
#1A73E8rgb(26, 115, 232)hsl(214, 82%, 51%)WCAG ratio of this color against pure white and pure black backgrounds.
Un convertisseur de couleurs traduit entre les trois formats que les designers et développeurs utilisent chaque jour : HEX (#RRGGBB) pour les feuilles de style, RGB (rouge, vert, bleu 0–255) pour les toiles et les outils d'image, et HSL (teinte, saturation, luminosité) pour un montage intuitif. Ils décrivent tous le même point dans l'espace colorimétrique sRGB — ils échangent simplement la lisibilité contre les mathématiques. Cet outil maintient les trois synchronisés pendant que vous modifiez l'un d'eux, affiche un échantillon en direct et rapporte un instantané rapide du contraste WCAG afin que vous sachiez si la couleur est sûre pour le texte principal contre le blanc ou le noir. Tout fonctionne localement dans votre navigateur ; aucune couleur n'est jamais téléchargée ou enregistrée.
Collez une valeur HEX (avec ou sans le # devant), faites glisser le sélecteur de couleur natif, ou définissez les canaux RGB / HSL avec les curseurs ou les entrées numériques.
L'échantillon principal et l'étiquette HEX se mettent à jour à chaque frappe ou glissement de curseur, afin que vous puissiez voir la couleur avant de vous y engager.
Quel que soit le format que vous avez modifié, les deux autres sont recalculés instantanément dans la section Copier comme — HEX, rgb(...), et hsl(...) prêts à être collés dans CSS, outils de design ou code.
Cliquez sur Copier sur n'importe quelle ligne pour mettre cette chaîne dans votre presse-papiers. Le bouton confirme avec une coche pendant 1,5 secondes.
L'instantané de contraste montre le ratio WCAG de votre couleur contre le blanc pur et le noir pur. Si vous avez besoin de verdicts complets WCAG AA / AAA contre un fond personnalisé, passez à l'outil Contrast Checker lié ci-dessous.
HEX → RGB:
R = parseInt(hex[0..1], 16)
G = parseInt(hex[2..3], 16)
B = parseInt(hex[4..5], 16)
RGB → HSL (chaque canal mis à l'échelle de 0 à 1) :
max = max(R, G, B); min = min(R, G, B)
L = (max + min) / 2
S = L > 0.5 ? (max − min) / (2 − max − min) : (max − min) / (max + min)
H dépend de quel canal est max :
R : H = 60 · ((G − B) / (max − min) mod 6)
G : H = 60 · ((B − R) / (max − min) + 2)
B : H = 60 · ((R − G) / (max − min) + 4)HEX est juste RGB écrit en base 16 — trois paires de chiffres hexadécimaux, une par canal, regroupées dans une seule chaîne. HSL est une reformulation perceptuelle du même cube RGB : la teinte (0–360°) choisit une tranche de la roue des couleurs, la saturation (0–100%) indique à quel point elle est vive par rapport au gris, et la luminosité (0–100%) indique à quel point elle est proche du blanc ou du noir. Les conversions ci-dessus sont sans perte modulo arrondi, donc HEX ↔ RGB ↔ HSL ↔ HEX devrait faire un aller-retour vers la même valeur.
Référence : Module de couleur CSS Niveau 4 — sRGB
| Entrée | Formats équivalents |
|---|---|
#1A73E8 | rgb(26, 115, 232) · hsl(214, 82%, 51%) Bleu Google — une teinte populaire pour les liens / boutons principaux. |
rgb(255, 105, 180) | #FF69B4 · hsl(330, 100%, 71%) Couleur nommée CSS rose vif, exprimée de trois manières. |
hsl(120, 73%, 75%) | #9EE89E · rgb(158, 232, 158) Un vert pastel — facile à régler en augmentant le curseur L. |
#03A | #0033AA · rgb(0, 51, 170) · hsl(222, 100%, 33%) Abréviation à trois chiffres se développe en son équivalent à six chiffres. |
Testez deux couleurs pour la conformité au contraste WCAG AA et AAA pour le texte et l'interface utilisateur.
Calculez votre âge exact en années, mois et jours à partir de n'importe quelle date de naissance.
Vérifiez l'indice de masse corporelle à partir de la taille et du poids en utilisant des unités métriques ou impériales.
Calculez des pourcentages, des changements de pourcentage et des pourcentages d'un total en quelques secondes.
Dernière mise à jour