Sélecteur de Couleur
Choisissez une couleur et copiez instantanément sa valeur au format HEX, RGB ou HSL.
Qu'est-ce qu'un sélecteur de couleur ?
Un sélecteur de couleur est un outil numérique permettant de choisir visuellement une teinte et de la convertir instantanément en codes mathématiques précis. Indispensable aux concepteurs UI/UX et développeurs web pour garantir la cohérence graphique.
Fonctionnalités clés
- Sélection visuelle fluide : Ajustez la teinte, la saturation et la lumière par simple glisser-déposer sur le canevas interactif.
- Copie instantanée : Copiez les valeurs HEX, RGB et HSL au format prêt à l'emploi pour vos feuilles de style CSS et Tailwind.
- Traitement 100% local : Tous les calculs s'exécutent dans la mémoire de votre navigateur sans aucun envoi vers un serveur externe.
Outils connexes
Pour extraire une teinte depuis une image ou capture d'écran, utilisez notre Sélecteur de Couleur d'Image. Pour valider l'accessibilité de vos textes, consultez le Vérificateur de Contraste WCAG.
Base de Connaissances & FAQ
Foire Aux Questions
Réponses directes et solutions aux questions courantes, défis techniques et normes de l'industrie.
Comment calculer la couleur complémentaire, analogue ou triadique exacte depuis un code HEX ?expand_more
Les harmonies de couleurs se calculent via des rotations angulaires sur le cercle chromatique à 360 degrés :
- Complémentaire : Rotation de 180° (ex :
(hue + 180) % 360). Un bleu pur à 240° s'associe à un orange vif à 60°. - Analogue : Rotation de ±30°. Un vert à 120° s'harmonise avec le vert pomme (90°) et le cyan sarcelle (150°).
- Triadique : Rotation de +120° et +240° pour former un triangle équilatéral équilibré et éclatant.
Pourquoi un code HEX à 8 caractères existe-t-il et comment le lire ?expand_more
Un code hexadécimal à 8 caractères (ex :
#4F46E580) intègre un canal alpha (transparence). Les 6 premiers caractères représentent Rouge, Vert et Bleu (#RRGGBB), tandis que les 7e et 8e caractères définissent l'opacité de 00 (0% / transparent) à FF (100% / opaque). Par exemple, 80 équivaut à 128 en décimal, soit 50% d'opacité.Quelle est la différence entre HSV (HSB) et HSL dans les sélecteurs de couleur ?expand_more
Bien que dérivés de RGB :
- HSV / HSB (Teinte, Saturation, Valeur/Luminosité) : Définit la clarté selon la composante la plus lumineuse. Modèle standard dans les toiles 2D (Photoshop, Figma).
- HSL (Teinte, Saturation, Luminosité) : Définit la lumière le long d'un axe symétrique (0% = noir, 50% = teinte pure, 100% = blanc). Il s'intègre nativement dans CSS via
hsl().
Comment créer des nuances (tints & shades) sans ternir la couleur ?expand_more
Pour générer une échelle propre :
- Teintes claires (Tints) : Conservez la teinte fixe et augmentez la clarté vers 100% en diminuant subtilement la saturation pour éviter l'effet pastel délavé.
- Teintes sombres (Shades) : Réduisez la clarté vers 0% en faisant pivoter légèrement la teinte vers des tons froids (indigo ou marine) au lieu d'ajouter du noir pur.