Selecteur de Couleur

Le WCAG (Web Content Accessibility Guidelines) définit des rapports de contraste minimaux entre le texte et son arrière-plan pour garantir la lisibilité aux personnes ayant une basse vision ou une déficience des couleurs. AA est le minimum légal dans la plupart des juridictions : 4,5:1 pour le texte normal (moins de 18pt/14pt gras), 3:1 pour le texte large. AAA est la norme améliorée : 7:1 pour le texte normal, 4,5: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, ce qui rend la conformité du contraste essentielle pour les produits accessibles au public. Le vérificateur ici teste simultanément les couleurs du texte et de l'arrière-plan et indique quelles combinaisons réussissent ou échouent.

Les deux utilisent la Teinte (0-360 degrés) et la Saturation, mais diffèrent sur le troisième canal. HSL (Lightness/Luminosité) définit 50 % comme une couleur pure saturée, 0 % comme du noir et 100 % comme du blanc — ce qui est intuitif pour CSS et le design. HSV (Value/Valeur ou Brightness/Luminance) définit 100 % de Valeur comme une couleur pure saturée et 0 % comme du noir — il n'y a pas de blanc pur en HSV à moins que la Saturation ne soit à 0 %. Adobe Photoshop, Illustrator et la plupart des sélecteurs de couleurs natifs des systèmes d'exploitation utilisent le HSV. CSS et les outils de design web utilisent généralement le HSL. Cet outil convertit instantanément entre les deux.

Les valeurs CMYK affichées sont une conversion mathématique à partir du RGB en utilisant la formule standard. Elles constituent une approximation utile pour les flux de travail du numérique vers l'impression, mais la couleur d'impression réelle dépend fortement de l'imprimante spécifique, de l'encre, du papier et du profil de couleur ICC utilisé. Pour un travail d'impression professionnel, vérifiez toujours les couleurs finales par rapport à des épreuves physiques ou consultez les spécifications de couleur du service d'impression. Les valeurs CMYK ici fonctionnent bien pour les décisions de couleur en phase initiale et l'aperçu avant impression.

Cliquez sur la section Presets et choisissez soit Tailwind CSS, soit Material Design. Chaque palette affiche l'échelle complète des couleurs (par exemple, Tailwind blue-50 jusqu'à blue-950, ou Material red 100 jusqu'à 900). Cliquez sur n'importe quel échantillon pour charger cette couleur dans le sélecteur et obtenir instantanément ses valeurs HEX, RGB, HSL et autres. Ceci est utile lors de la création au sein d'un système de design existant — vous pouvez copier le format exact dont vous avez besoin (par exemple, la valeur HSL de Tailwind blue-600) sans avoir à la chercher ailleurs.

Les couleurs enregistrées sont stockées dans le localStorage de votre navigateur — elles persistent entre les sessions sur le même appareil et navigateur, mais ne sont pas synchronisées vers un serveur ou entre les appareils. Elles sont également effacées si vous videz les données de votre navigateur. Pour les couleurs que vous souhaitez conserver à long terme, copiez les valeurs HEX dans un document de conception ou enregistrez-les dans la bibliothèque de couleurs de votre outil de design. Aucun compte ni connexion n'est requis.

Oui. Vous pouvez taper ou coller un code HEX directement dans le champ d'entrée HEX (avec ou sans le préfixe #) et le sélecteur ainsi que tous les autres champs de format se mettront à jour immédiatement. Vous pouvez également ajuster les curseurs Teinte, Saturation et Luminosité directement si vous souhaitez modifier une propriété spécifique sans changer les autres. C'est utile lorsque vous avez un code hexadécimal provenant d'un fichier de conception et que vous voulez vérifier son contraste ou le convertir dans un autre format.

Non. Toute la sélection de couleurs, la conversion de formats, les calculs de contraste et l'enregistrement des palettes s'exécutent entièrement dans votre navigateur en utilisant JavaScript. Aucune valeur de couleur, aucune palette enregistrée et aucune donnée d'utilisation n'est envoyée à un serveur. L'outil fonctionne entièrement hors ligne une fois que la page est chargée.