Sélecteur de couleur

Comment fonctionne le sélecteur de couleur

Choisissez n'importe quelle couleur pour obtenir instantanément ses valeurs HEX, RGB et HSL. Copiez n'importe quel format en un clic.

Vous pouvez aussi modifier n'importe quel format manuellement — entrez un code HEX, ajustez un canal RGB ou modifiez une valeur HSL — et tous les autres champs se mettent à jour automatiquement.

Conseils pour travailler avec les couleurs

• Utilisez HSL pour des palettes harmonieuses. Gardez la teinte fixe et faites varier la saturation et la luminosité. Un bleu primaire à hsl(210, 70%, 50%) s'associe naturellement à hsl(210, 30%, 90%) comme couleur d'arrière-plan.
• Vérifiez le contraste pour l'accessibilité. WCAG AA exige au moins un contraste de 4,5:1 entre le texte et l'arrière-plan. Utilisez un vérificateur de contraste dédié après avoir choisi vos couleurs.
• Utilisez des propriétés CSS personnalisées. Enregistrez les valeurs sous forme de --color-primary: #3b82f6 pour éviter les dérives de couleur dans un projet.
• Utilisez HEX pour CSS, RGB pour la manipulation programmatique, HSL pour la conception de palettes. Chaque format convient à un flux de travail différent.

Comprendre les modèles de couleurs

HEX (hexadécimal) est le format de couleur standard pour le web. Une chaîne de six caractères comme #3b82f6 encode les canaux rouge, vert et bleu de 00 à FF. C'est compact, largement supporté par CSS et les outils de design, et c'est le format qu'on rencontre le plus souvent dans les feuilles de style. La limite principale, c'est que les valeurs HEX ne sont pas intuitives — difficile de regarder #3b82f6 et de savoir que c'est un bleu moyen, ce qui le rend moins utile pour le travail exploratoire de palette.

RGB (Rouge, Vert, Bleu) utilise trois nombres de 0 à 255 pour décrire la quantité de chaque canal de lumière à mélanger. Il correspond directement à la façon dont les écrans émettent de la lumière (mélange additif), ce qui en fait le format naturel pour la manipulation programmatique. Si vous écrivez du JavaScript pour animer une transition, teinter une image ou mélanger deux couleurs, les valeurs RGB sont faciles à interpoler. rgb(59, 130, 246) est la même couleur que #3b82f6 — juste dans le format avec lequel les ordinateurs font de l'arithmétique le plus naturellement.

HSL (Teinte, Saturation, Luminosité) est le modèle de couleur le plus lisible par l'humain et le plus utile pour le design. La teinte est l'angle sur la roue chromatique (0° = rouge, 120° = vert, 240° = bleu). La saturation contrôle l'intensité (0 % = gris, 100 % = pleinement saturé). La luminosité contrôle la brillance (0 % = noir, 100 % = blanc, 50 % = la couleur pure). Le vrai avantage de HSL, c'est qu'on peut créer des palettes harmonieuses en fixant la teinte et en variant saturation et luminosité — par exemple, hsl(210, 70%, 50%) pour un bouton principal, hsl(210, 30%, 90%) pour la teinte d'arrière-plan, et hsl(210, 100%, 30%) pour un état de survol sombre. Les trois partagent la même teinte, donc ils s'harmonisent naturellement.

Les couleurs en design web : bonnes pratiques

Un bon design web en couleurs commence par la retenue. Limitez votre palette à 3 à 5 rôles : une couleur primaire (marque ou action), une secondaire (éléments d'interface secondaires), un accent (points forts et appels à l'action), un neutre (texte et bordures) et un arrière-plan. Plus que ça crée du bruit visuel. La règle 60-30-10 est un bon guide : 60 % dominant neutre, 30 % secondaire, 10 % accent. C'est ce que les décorateurs d'intérieur utilisent, et ça marche en UI pour la même raison — équilibre visuel sans monotonie.

Les couleurs véhiculent aussi des associations psychologiques qui influencent la perception de votre marque. Le bleu est la couleur la plus universellement fiable — il domine dans la finance, la santé et la technologie car il évoque le calme et le sérieux. Le rouge communique l'urgence et l'importance, efficace pour les alertes et les CTA, mais une utilisation excessive crée de l'anxiété. Le vert est associé à la croissance et au succès, c'est pourquoi il apparaît sur les messages de confirmation et les indicateurs de gain financier partout dans le monde. Le jaune et l'ambre signalent la prudence sans alarme. À noter : les associations de couleurs varient selon les cultures — le blanc est associé au deuil dans certaines cultures d'Asie de l'Est, tandis que le rouge a des connotations positives en Chine. Testez toujours sur fond clair et sombre, et vérifiez les ratios de contraste WCAG avant de lancer.

Questions fréquentes