Sélecteur de couleurs en ligne

Comment utiliser le sélecteur de couleurs

1. Déplacez le curseur de teinte pour choisir la famille de couleur de base.
2. Cliquez ou glissez dans la zone de nuances pour régler saturation et luminosité.
3. Affinez en modifiant directement les valeurs HEX, RGB ou HSL si vous visez une cible précise.
4. Copiez le format qu'il vous faut avec son bouton de copie.
5. Collez à tout moment un code hex existant dans le champ pour partir d'une couleur connue.

Ce que fait ce sélecteur de couleurs

Le sélecteur vous laisse choisir une couleur à l'œil, en glissant dans un champ de saturation et de luminosité et sur un curseur de teinte, et restitue cette couleur exacte d'un coup dans tous les formats courants : HEX, RGB et HSL. Au lieu de deviner des codes, vous vous posez visuellement sur la nuance et copiez la notation dont votre projet a besoin.

Il fonctionne dans les deux sens. Collez un code HEX existant et le sélecteur saute à cette couleur pour que vous ajustiez à partir d'un point de départ connu : c'est le moyen rapide de construire une teinte plus claire ou une nuance plus foncée d'une couleur de marque sans quitter la page. Tout s'exécute dans votre navigateur, sans rien à installer.

HEX, RGB ou HSL : quel code copier ?

Tous décrivent la même couleur. Le HEX est le standard compact des feuilles de style et des design tokens. Le RGB est ce qu'attendent les API canvas et beaucoup de bibliothèques, et rgba() offre une transparence facile. Le HSL est le plus intuitif pour les ajustements : gardez la teinte fixe et changez la luminosité pour construire une gamme cohérente de nuances.

Petite réserve : les couleurs peuvent s'afficher légèrement différemment d'un écran à l'autre, car la calibration des moniteurs varie. Le code est exact ; la dalle qui l'affiche ne l'est pas toujours.

Comment le sélecteur correspond aux valeurs réelles

Les deux commandes correspondent directement au modèle HSL. Le curseur de teinte parcourt la roue chromatique de 0 à 360 degrés, tandis que le champ carré règle la saturation sur un axe et la luminosité sur l'autre. C'est pourquoi le HSL paraît souvent le plus intuitif à piloter : l'interface est essentiellement un éditeur HSL visuel.

En coulisses, chaque position correspond à des valeurs sRGB précises, si bien que les sorties HEX et RGB sont la traduction exacte de l'endroit où vous avez posé le curseur. Modifiez un nombre HSL et le HEX comme le RGB se mettent à jour de concert, car les trois sont des notations de la même couleur sous-jacente.

Usages quotidiens

Les designers recourent à un sélecteur pour affiner une nuance avant de l'inscrire dans une palette, ou pour dériver des teintes et des nuances partageant une même teinte afin d'obtenir une interface cohérente. Les développeurs s'en servent pour attraper une couleur d'accent sans ouvrir un logiciel de design complet, puis collent le HEX directement dans le CSS.

C'est tout aussi utile en dehors du code. Quiconque construit un diaporama, met en forme un e-mail, choisit la couleur d'un graphique ou sélectionne un fond de document peut trouver ici une valeur exacte plutôt que de se contenter d'une couleur nommée approximative.

Construire des palettes et des variantes

Une façon fiable de créer une gamme de couleurs est de verrouiller la teinte et la saturation et de ne faire varier que la luminosité en HSL : une même teinte à 90 %, 70 %, 50 % et 30 % de luminosité donne un ensemble cohérent de nuances qui semblent aller de pair. Le sélecteur facilite cela, car vous pouvez lire et modifier directement les nombres HSL.

Pour des couleurs d'accent ou complémentaires, faites tourner le curseur de teinte d'une quantité fixe, 30 degrés pour une couleur analogue ou 180 pour une complémentaire, tout en maintenant la saturation et la luminosité constantes. La famille reste ainsi visuellement équilibrée au lieu d'être un assortiment aléatoire de couleurs.

Choisir des couleurs accessibles

Choisir une couleur n'est que la moitié du travail ; encore faut-il qu'elle soit lisible. Les recommandations d'accessibilité demandent un ratio de contraste d'au moins 4,5:1 entre un texte normal et son fond, et de 3:1 pour un grand texte. La luminosité HSL est ici un levier pratique : assombrir ou éclaircir une teinte choisie suffit généralement à franchir le seuil sans abandonner la couleur.

Comme le sélecteur vous donne des valeurs RGB exactes, vous pouvez les déposer directement dans un vérificateur de contraste pour valider une association. Quand une couleur est limite, ajustez la luminosité dans le sélecteur et retestez plutôt que de vous rabattre sur une teinte totalement différente.

Outils de couleur associés

Si vous avez déjà des codes figés à traduire plutôt qu'une couleur à choisir, les convertisseurs dédiés HEX en RGB et RGB en HEX font ce seul travail avec un calcul exact, sans perte, et un aperçu en direct.

Une fois vos couleurs en main, le générateur de dégradés CSS les mélange en fonds linéaires ou radiaux prêts à copier. Tous ces outils s'exécutent localement dans votre navigateur : vos choix de couleurs ne quittent jamais votre machine.

Questions fréquentes

Outils associés