Explorez la palette ou affinez une couleur dans le sélecteur. Reprenez la valeur affichée dans votre CSS ou vos notes de conception.
Fonctionne localement dans votre navigateurLe sélecteur est un champ plat de type spectrum : faites glisser dans le carré pour régler la saturation et la luminosité, utilisez le curseur vertical pour la teinte et l’horizontal pour l’opacité, ou saisissez une couleur directement dans le champ situé en dessous. Ce champ contient toujours la couleur courante, sous la forme #rrggbb tant qu’elle est opaque et sous la forme rgba(...) dès que l’opacité passe sous 100 %.
La palette placée à côté du carré propose 66 échantillons fixes répartis en trois rangées, et la rangée du bas conserve les couleurs que vous avez composées vous-même. Le choix se fait dans la page : aucune requête n’est envoyée pendant que vous faites glisser, saisissez ou cliquez, et aucune valeur de couleur ne quitte le navigateur.
Les trois rangées du haut sont fixes : six gris, dix couleurs saturées et cinquante nuances adoucies. Elles ne changent jamais, et un clic dessus n’est pas enregistré, car un préréglage n’est pas une couleur composée par vous.
La rangée du dessous conserve jusqu’à sept couleurs choisies par vous, la plus récente en premier : tout ce que vous saisissez, cliquez ou fixez après un glissement y est ajouté. La liste est stockée dans ce navigateur sous une clé du domaine voritools.com ; elle survit donc à un rechargement sur cet appareil, mais elle n’est pas synchronisée et un autre navigateur part d’une rangée vide.
Le champ constitue la sortie de l’outil : la couleur courante écrite comme CSS l’attend. Une couleur opaque apparaît en #rrggbb ; une couleur dont l’opacité est inférieure à 100 % apparaît en rgba(...), car six chiffres hexadécimaux ne peuvent pas porter de canal alpha. L’infobulle d’un échantillon et l’aperçu à côté du champ affichent la même valeur.
Les valeurs avec alpha écrites en hexadécimal sont lues selon CSS Color 4 : #12345678 signifie #123456 avec un alpha de 0x78/255 et s’affiche comme la valeur rgba(...) équivalente, tandis que #abcd signifie #aabbccdd. Une valeur que le sélecteur ne peut pas lire garde sa bordure rouge et la page affiche le message indiquant que la couleur n’a pas pu être analysée.
Il travaille sur une couleur à la fois et uniquement dans cette page : pas d’export de palette, pas de téléchargement de variables CSS ni de JSON, pas de contrôle de contraste ou d’accessibilité, et pas d’extraction de couleurs depuis une photo ou une capture d’écran. L’outil voisin dédié aux couleurs d’image sert à cela.
Il n’y a pas non plus de bouton de copie ; le champ est une zone de texte ordinaire, dont vous copiez le contenu comme n’importe quelle autre valeur. Et comme la rangée des couleurs récentes vit dans le navigateur, effacer les données du site la supprime, alors qu’une fenêtre privée démarre chaque fois avec une rangée vide.