Sélecteur de couleur

Qu’est-ce qu’un sélecteur de couleurs ?

Un sélecteur de couleurs est un outil en ligne qui permet de choisir visuellement des couleurs pour le web, le graphisme et les interfaces, puis de les convertir en formats HEX, RGB et HSL. La roue chromatique et la zone saturation/luminosité aident à trouver rapidement la nuance recherchée, et le réglage d’opacité permet aussi de générer des couleurs en RGBA et HSLA.

L’outil fonctionne directement dans le navigateur, sans installation. Si votre navigateur prend en charge l’API EyeDropper, vous pouvez aussi prélever une couleur depuis n’importe quelle zone de l’écran pour récupérer vite une teinte vue sur une maquette, une image ou un site de référence.

Quand utiliser cet outil ?

• Développement web – Trouver et copier rapidement des codes couleur précis à appliquer dans vos feuilles de style CSS
• Design UI/UX – Composer des palettes harmonieuses pour les boutons, arrière-plans et textes d’une interface
• Graphisme – Choisir et associer des couleurs pour des affiches, bannières ou visuels de réseaux sociaux
• Identité de marque – Définir les couleurs d’une marque ou d’un projet et les documenter dans plusieurs formats
• Vérification de l’accessibilité – Contrôler les valeurs de couleur avant d’évaluer le contraste entre texte et arrière-plan
• Extraction depuis une référence – Prélever directement des couleurs d’un site web, d’une image ou d’une capture grâce à EyeDropper
• Présentations et documents – Conserver un thème couleur cohérent dans des slides, rapports ou supports marketing

Fonctionnalités principales

• Sélection sur roue chromatique – Choisissez intuitivement la teinte voulue sur une roue à 360 degrés, à la souris ou au toucher.
• Sélecteur 2D saturation/luminosité – Ajustez la saturation et la luminosité en même temps pour passer d’un ton pastel à une couleur plus profonde.
• Curseur d’opacité (alpha) – Réglez l’opacité de 0 % à 100 % pour créer des couleurs semi-transparentes utiles pour les superpositions, états hover et dégradés.
• Affichage en plusieurs formats – Consultez et convertissez la couleur en HEX, RGB et HSL en temps réel, avec bascule automatique vers RGBA et HSLA si l’opacité est inférieure à 100 %.
• Prélèvement à l’écran avec EyeDropper – Récupérez une couleur directement depuis l’écran dans Chrome ou Edge, y compris depuis une image ou un autre onglet.
• Harmonies générées automatiquement – Obtenez des palettes complémentaires, analogues, triadiques et monochromatiques à partir de la couleur active.
• Copie CSS en un clic – Copiez la couleur sous forme de code CSS prêt à coller, en choisissant le format HEX, RGB ou HSL.
• Historique des couleurs – Les 20 dernières couleurs choisies sont enregistrées dans le navigateur pour être réutilisées lors d’une prochaine visite.

Comment l’utiliser

1. Choisir la teinte – Cliquez ou faites glisser le curseur sur la roue chromatique pour sélectionner la famille de couleur souhaitée.
2. Ajuster saturation et luminosité – Dans la zone carrée, déplacez-vous horizontalement pour la saturation et verticalement pour la luminosité.
3. Régler l’opacité – Si vous avez besoin d’un effet semi-transparent, utilisez le curseur alpha. 100 % est opaque et 0 % totalement transparent.
4. Vérifier puis copier les valeurs – Contrôlez les valeurs HEX, RGB et HSL dans le panneau de droite, puis utilisez le bouton de copie du format voulu.
5. Réutiliser le code CSS – Dans la zone dédiée, sélectionnez le format souhaité et copiez un code prêt à être collé dans votre feuille de style.

Comprendre la théorie des couleurs et les harmonies

Principe de la roue chromatique

La roue chromatique vient des premières recherches sur la lumière et aide aujourd’hui à organiser les couleurs selon leur teinte. Dans cet outil, la teinte est exprimée sur un angle de 0° à 360° via le modèle HSL (Hue, Saturation, Lightness), ce qui facilite le passage d’une couleur chaude à une couleur froide.

HSL, RGB et HEX

• HEX – Format très répandu sur le web, écrit comme #RRGGBB. Par exemple, #D4AF37 correspond à une nuance dorée.
• RGB – Représente l’intensité du rouge, du vert et du bleu sur une échelle de 0 à 255. En CSS, on l’utilise sous la forme rgb(212, 175, 55).
• HSL – Décrit la teinte, la saturation et la luminosité, ce qui rend les ajustements visuels plus intuitifs lorsque vous travaillez sur une seule famille de couleurs.

Types d’harmonies

• Complémentaire – Deux couleurs opposées sur la roue chromatique, utiles pour créer un contraste marqué.
• Analogues – Des couleurs voisines qui donnent un rendu doux et naturel.
• Triadique – Trois couleurs espacées régulièrement, pour un équilibre visuel plus dynamique.
• Monochromatique – Une seule teinte déclinée en plusieurs niveaux de saturation et de luminosité, idéale pour une palette sobre et cohérente.

Utiliser l’opacité (alpha)

Le canal alpha contrôle la transparence d’une couleur. Une valeur de 0 % rend la couleur invisible, tandis que 100 % la laisse totalement opaque. Les couleurs semi-transparentes sont utiles pour les superpositions, les dégradés, les états au survol et les couches d’arrière-plan en CSS moderne.

À propos de l’API EyeDropper

L’API EyeDropper permet de récupérer une couleur directement depuis l’écran dans les navigateurs compatibles. À l’heure actuelle, elle est surtout prise en charge dans Chrome et Edge récents.

Elle peut servir à relever une couleur depuis l’onglet actuel, une image ouverte dans le navigateur ou un autre élément visible à l’écran. C’est pratique pour reprendre rapidement une teinte repérée dans une maquette, une photo ou un site qui vous inspire.

Conseils d’utilisation

• Documenter les couleurs de marque – Conservez les valeurs HEX, RGB et HSL des couleurs principales pour garder la même identité sur le web, en vidéo ou à l’impression.
• Penser à l’accessibilité – Comparez toujours la luminosité du texte et de l’arrière-plan afin de vérifier un contraste suffisant avant publication.
• Construire une palette – Partez d’une couleur principale, puis utilisez les harmonies pour trouver des tons secondaires et une couleur d’accent.
• Exploiter les transparences – Une couche semi-transparente peut améliorer la lisibilité d’un texte placé sur une image ou un visuel complexe.

Détails

Les résultats affichés par ce sélecteur de couleurs sont générés à partir de vos valeurs saisies et des options choisies.

Pour des décisions finales, recoupez avec vos consignes de marque, vos règles d’accessibilité ou une validation experte.

Questions fréquentes