À propos de cet outil
Un sélecteur de couleurs fait correspondre une couleur entre les formats que le CSS comprend. Celui-ci repose sur un modèle HSV : un carré saturation/valeur définit la vivacité et la luminosité de la couleur, un curseur de teinte tourne autour de la roue chromatique, et un curseur alpha règle l'opacité. Chaque changement est converti avec culori en quatre chaînes canoniques — HEX (#rrggbb, ou #rrggbbaa lorsque l'alpha est inférieur à 1), rgb()/rgba(), hsl()/hsla() et oklch(), perceptuellement uniforme — de sorte que la même couleur est prête à être insérée dans n'importe quelle feuille de style ou design token.
Utilisez-le pour prélever une valeur exacte sur une maquette, traduire un code hexadécimal envoyé par un designer en le rgb() ou le hsl() attendu par votre code, régler un calque semi-transparent et lire la valeur rgba(), ou convertir une couleur héritée en oklch() moderne pour du CSS à large gamut. Collez n'importe quelle chaîne de couleur CSS — un code hexadécimal, une couleur nommée comme rebeccapurple, ou une expression rgb()/hsl() complète — et tout le sélecteur s'y synchronise ; les couleurs récemment choisies restent dans une rangée cliquable pour le reste de votre session.
Tout s'exécute dans votre navigateur — les couleurs ne sont jamais envoyées sur un serveur, et la rangée des couleurs récentes est conservée en mémoire uniquement, de sorte qu'elle s'efface lorsque vous fermez l'onglet.
Questions fréquentes
Quelle est la différence entre HSL et OKLCH ?
HSL décrit une couleur par sa teinte, sa saturation et sa luminosité dans l'espace sRGB, mais des valeurs de luminosité égales peuvent paraître très différentes en termes de clarté. OKLCH utilise un modèle perceptuellement uniforme, de sorte que ses valeurs de luminosité et de chroma correspondent à la façon dont l'œil perçoit réellement la couleur et restent cohérentes d'une teinte à l'autre.
Comment représenter la transparence dans une couleur hexadécimale ?
Ajoutez une valeur alpha à deux chiffres au code hexadécimal à six chiffres, ce qui donne #rrggbbaa — par exemple, #ff000080 est un rouge à environ 50 % d'opacité. Cette forme à 8 chiffres est prise en charge par tous les navigateurs modernes ; lorsque l'alpha est totalement opaque, le sélecteur produit la forme plus courte #rrggbb.
Puis-je coller une couleur CSS nommée comme rebeccapurple ?
Oui. Le champ hexadécimal accepte n'importe quelle chaîne de couleur CSS valide — couleurs nommées, codes hexadécimaux et expressions rgb()/hsl()/oklch() — et une saisie valide synchronise instantanément le carré, les curseurs et chaque format de sortie.