Choisissez une couleur ou saisissez des valeurs dans n'importe quel format. Convertit instantanément entre HEX, RGB et HSL avec un aperçu en direct et une copie en un clic.
Accédez à notre suite complète d'outils SEO locaux, suivi de position et optimisation alimentée par l'IA.
Inscription gratuiteLa couleur est l'un des éléments de design les plus puissants sur le web, et choisir le bon format pour votre CSS peut réellement améliorer l'efficacité du flux de travail. Les trois formats de couleur les plus utilisés — HEX, RGB et HSL — représentent tous le même spectre de plus de 16 millions de couleurs, mais ils diffèrent considérablement en termes de lisibilité et de facilité de manipulation. Les codes HEX comme #3b82f6 sont compacts et omniprésents dans le CSS, tandis que les valeurs RGB comme rgb(59, 130, 246) correspondent directement aux canaux de lumière rouge, vert et bleu que votre écran utilise pour rendre la couleur.
Le HSL (Teinte, Saturation, Luminosité) est de plus en plus privilégié par les designers car il correspond à la façon dont les humains perçoivent naturellement la couleur. Au lieu de mélanger des valeurs de canaux abstraits, vous choisissez une teinte sur le cercle chromatique (0‑360 degrés), définissez son intensité avec la saturation (0‑100 %) et contrôlez la luminosité avec la luminosité (0‑100 %). Cela rend la création de palettes harmonieuses triviale : maintenez la teinte constante et variez la saturation et la luminosité pour produire des nuances, des tons et des teintes de la même couleur. Les propriétés personnalisées modernes du CSS fonctionnent particulièrement bien avec le HSL, vous permettant de définir une teinte de base et de dériver toute une palette à partir de celle‑ci.
Choisir des couleurs esthétiques n'est que la moitié de l'équation — elles doivent également être accessibles. Les Web Content Accessibility Guidelines (WCAG 2.1) exigent un ratio de contraste d'au moins 4,5 :1 pour le texte normal et 3 :1 pour le texte large. Environ 8 % des hommes et 0,5 % des femmes présentent une forme de déficience de la vision des couleurs, si bien que se fier uniquement à la couleur pour transmettre une information constitue un piège d'accessibilité fréquent. Associez toujours vos choix de couleur à un vérificateur de contraste et considérez l'apparence de votre design sous des filtres simulant le daltonisme. Ce convertisseur vous aide à itérer rapidement les valeurs de couleur afin de tester différentes combinaisons et de trouver le parfait équilibre entre esthétique et lisibilité.