Sélecteur de couleur (Color Picker)

Choisir des couleurs et copier des valeurs exploitables

Un sélecteur de couleur fiable doit faire plus qu'afficher un joli carré. Les designers, les développeurs et les créateurs de contenu ont souvent besoin de la même couleur dans plusieurs formats selon la destination. CSS accepte HEX, RGB et HSL, les design systems documentent parfois leurs tokens en HEX, et les retouches rapides de prototypes sont souvent plus simples en HSL, car la teinte, la saturation et la luminosité se modifient indépendamment. Cet outil affiche ces formats côte à côte : vous choisissez la couleur une seule fois et copiez la valeur qui convient à votre flux de travail.

Tout se passe localement dans le navigateur. La saisie de la couleur, les calculs de conversion et les boutons de copie fonctionnent avec du JavaScript côté client : aucun compte, aucun envoi de fichier, aucun traitement à distance. L'outil convient donc aux palettes de marque confidentielles, aux thèmes de produits non publiés, aux travaux pour des clients et aux expériences d'interface rapides qui ne doivent pas quitter votre machine.

Utiliser teintes et nuances dans les interfaces

Les teintes et les nuances permettent à une seule couleur de marque de soutenir toute une interface. Les teintes plus claires conviennent aux arrière-plans discrets, aux états de survol, aux panneaux de notification et aux lignes sélectionnées. Les nuances plus foncées fournissent des bordures, des états pressés, des accents en mode sombre ou du texte très marqué lorsque la couleur d'origine est trop vive. Les échantillons ci-dessous conservent la teinte et la saturation en ne changeant que la luminosité, ce qui crée une échelle simple, cohérente avec la couleur de base.

Considérez l'échelle générée comme un point de départ et non comme un design system définitif. La perception humaine n'est pas parfaitement linéaire, et certaines teintes demandent un ajustement manuel pour paraître régulièrement espacées. Les bleus et les violets tolèrent de larges plages de luminosité, alors que les jaunes peuvent exiger des nuances plus sombres pour un texte lisible. Copiez les valeurs, testez-les dans le composant réel et affinez les étapes qui comptent le plus.

Choisir entre HEX, RGB et HSL

HEX est compact et courant dans la transmission des maquettes, ce qui en fait un bon choix par défaut pour la documentation. RGB est utile lorsqu'un outil demande des canaux numériques de rouge, de vert et de bleu ou lorsque vous raisonnez directement en lumière d'écran. HSL est généralement le format le plus accessible pour les petits ajustements : déplacez la teinte pour tourner autour du cercle chromatique, réduisez la saturation pour un ton plus calme ou modifiez la luminosité pour obtenir une teinte ou une nuance. Garder les trois formats visibles limite les erreurs lorsque vous passez d'un outil de design à des fichiers CSS ou à des bibliothèques de composants.