Sélecteur de Couleur
Outil de sélection de couleur en ligne, conversion de format HEX, RGB, HSL, générer des schémas de couleurs
Qu'est-ce qu'un Sélecteur de Couleur ?
Un sélecteur de couleur aide à choisir, inspecter et convertir des couleurs pour le design et le développement front-end. Une même couleur peut s’écrire sous plusieurs formats : HEX est compact et courant en CSS, RGB décrit les canaux rouge-vert-bleu, et HSL exprime teinte, saturation et luminosité, souvent plus pratique pour ajuster une palette. L’outil sert à transformer une couleur de marque en code, comparer des modèles, créer une petite palette ou vérifier des couleurs complémentaires et analogues. Le choix d’une couleur n’est pas seulement esthétique : contraste, lisibilité, accessibilité, impression et calibration d’écran comptent. Les couleurs importantes d’interface doivent être testées sur le fond final et avec les exigences d’accessibilité.
Comment utiliser
Comment utiliser
- Cliquez sur le sélecteur de couleur pour choisir une couleur, ou saisissez une valeur dans le champ prévu.
- Affichez les résultats de conversion aux formats HEX, RGB et HSL.
- Cliquez sur le bouton de copie à côté d'un format pour copier la valeur de la couleur.
- Consultez les harmonies pour des suggestions de combinaisons complémentaires, analogues et autres.
- Consultez les nuances et teintes pour obtenir des variantes plus sombres et plus claires d'une même couleur.
Conseils sur les couleurs
- Vérifiez le contraste avant d'utiliser une couleur pour du texte, des icônes ou des contrôles ; des couleurs plaisantes peuvent ne pas satisfaire aux exigences d'accessibilité.
- Utilisez le HSL pour ajuster la luminosité ou la saturation, et le HEX ou le RGB pour copier des valeurs dans du CSS ou des design tokens.
Cas d’utilisation
Principe technique
Toutes les valeurs de cet outil vivent dans l'espace colorimétrique sRGB défini par la norme IEC 61966-2-1, qui est l'hypothèse par défaut pour les littéraux hexadécimaux CSS, la fonction rgb() et tout relevé de pixels via <canvas>. Le HEX #RRGGBB est un entier 24 bits compacté (8 bits par canal, 0-255) ; le HEX #RRGGBBAA ajoute un octet alpha ; rgb()/rgba() exposent les mêmes canaux sous forme d'entiers ou de pourcentages ; hsl()/hsla() passent en coordonnées cylindriques avec la teinte en degrés [0, 360), la saturation et la luminosité en [0 %, 100 %]. La conversion RGB vers HSL calcule L = (max + min) / 2, S = (max - min) / (1 - |2L - 1|) pour une chrominance non nulle, et H à partir d'une formule par morceaux à six segments déterminée par le canal dominant. Le passage inverse HSL vers RGB utilise l'algorithme standard t = L < 0,5 ? L(1+S) : L+S-LS avant de ramener chaque canal dans la plage 0-255. Le sélecteur en direct utilise l'élément natif <input type="color">, qui sur les navigateurs compatibles expose également l'API EyeDropper (Chrome 95+, Edge 95+ ; pas encore dans Safari/Firefox en 2026). EyeDropper déclenche un échantillonnage au niveau du système d'exploitation et renvoie une chaîne hexadécimale sRGB, mais il ne peut pas échantillonner à l'intérieur d'iframes cross-origin ni de surfaces protégées par DRM. La génération de palettes fait tourner la teinte HSL : complémentaire = +180 degrés, triadique = +/-120 degrés, analogue = +/-30 degrés, complémentaire scindé = +150 et +210 degrés. Les nuances et teintes font varier la luminosité par incréments fixes (généralement +10 % vers le blanc pour les nuances, -10 % vers le noir pour les teintes) tout en maintenant la teinte et la saturation constantes. Le contraste suit les critères WCAG 2.1 SC 1.4.3/1.4.6 : chaque canal est dégammaisé avec la fonction de transfert sRGB par morceaux (segment linéaire en dessous de 0,03928, puissance 2,4 au-dessus), combiné avec les pondérations de luminance 0,2126R + 0,7152G + 0,0722B pour la luminance relative, puis le ratio est (L_clair + 0,05) / (L_sombre + 0,05). Les seuils sont 4,5:1 pour le texte normal AA, 3:1 pour le texte de grande taille AA et les composants d'interface, et 7:1 pour AAA. Notez que sRGB est un espace 8 bits par canal, donc les écrans à gamut étendu utilisant Display P3 (Apple) ou Rec. 2020 peuvent afficher le même code hexadécimal avec des primaires visiblement plus saturées ; pour un travail sensible à la couleur multi-appareils, étiquetez la couleur avec un profil plutôt que de vous fier aux triplets RGB bruts.
- Espace colorimétrique sRGB selon IEC 61966-2-1 ; 8 bits par canal, soit 16 777 216 couleurs représentables au total.
- HSL vers RGB utilise t = L<0,5 ? L(1+S) : L+S-LS, puis un lookup hue2rgb() par canal.
- L'API EyeDropper nécessite Chrome/Edge 95+ et un geste utilisateur ; les surfaces dans des iframes cross-origin sont bloquées.
- Contraste WCAG : dégammaiser sRGB, pondérer la luminance 0,2126R + 0,7152G + 0,0722B, puis (L1+0,05)/(L2+0,05).
- Complémentaire = +180 deg de teinte, triadique = +/-120 deg, analogue = +/-30 deg, complémentaire scindé = +150/+210 deg.
- canvas.getImageData renvoie un Uint8ClampedArray de pixels RGBA mais nécessite que le canvas soit de même origine (pas d'images tainted).
- Les moniteurs à gamut étendu Display P3 / Rec. 2020 affichent le même hexadécimal avec des primaires plus intenses — étiquetez le profil pour un travail sensible à la couleur.
Exemples
Choisir une couleur primaire de marque et copier en trois formats
Choisi : Tailwind blue-600
HEX : #2563eb
RGB : rgb(37, 99, 235)
HSL : hsl(217, 91%, 53%)
Copiez la forme qui correspond au code environnant. Les trois valeurs
décrivent la même couleur sRGB (IEC 61966-2-1, 8 bits par canal) ;
la page convertit entre elles avec les formules standard RGB <-> HSL.Générer un schéma complémentaire
Base : #2563eb (bleu)
Complémentaire : #eb7a25 (orange) teinte +180 deg
Analogue-1 : #5a25eb (violet) teinte +60 deg
Analogue-2 : #256beb (azur) teinte -30 deg
Triadique-1 : #25eb56 (vert) teinte +120 deg
Triadique-2 : #eb2525 (rouge) teinte -120 deg
Utilisez les complémentaires pour des accents à fort contraste, les analogues pour
des arrière-plans harmonieux, et les triadiques pour des illustrations vives.
La luminosité et la saturation restent constantes ; seule la teinte tourne.Vérifier le contraste WCAG avant publication
Premier plan : #1f2937 (gray-800, luminance relative 0,022)
Arrière-plan : #ffffff (blanc, luminance relative 1,000)
Rapport de contraste : (1,000 + 0,05) / (0,022 + 0,05) = 14,5:1
Valide WCAG AAA pour texte normal (>= 7:1) et grand texte (>= 4,5:1),
et respecte aussi le seuil 3:1 pour les composants UI. Effectuez la même
vérification sur chaque paire texte/arrière-plan envoyée en production ;
la page calcule la luminance relative avec la fonction de transfert
sRGB par morceaux (décodage gamma, pondération 0,2126R + 0,7152G +
0,0722B).FAQ
Quels formats de couleur affiche-t-il ?
HEX (#RRGGBB), RGB (rgb(R, G, B)) et HSL (hsl(H, S%, L%)). La page affiche également les schémas de couleurs complémentaires, analogues, triadiques et complémentaires divisées, ainsi que les teintes claires et foncées basées sur la couleur sélectionnée.
Quelle est la différence entre HSL et HSV ?
Les deux décomposent la couleur en teinte (0-360°), saturation et une composante de type luminosité. La troisième dimension de HSL est la lightness (50 % donne la saturation maximale, 0 % le noir, 100 % le blanc). Celle de HSV est la value (100 % donne la saturation maximale, 0 % le noir, sans blanc). HSL est plus intuitif pour les teintes claires et foncées ; HSV est plus proche de la façon dont les artistes mélangent la peinture.
Quelle est la précision des conversions de couleurs ?
HEX, RGB et HSL sont des conversions mathématiques exactes : ils décrivent tous la même couleur sRGB. La page convertit entre eux à l'aide de formules standard, sans perte de précision.
La même couleur hexadécimale s'affichera-t-elle de manière identique sur tous les écrans ?
Non. sRGB est l'espace colorimétrique web par défaut ; les écrans à large gamut (P3, Adobe RGB) sans gestion des couleurs peuvent afficher le même hexa de façon plus saturée. Le calibrage varie également. Testez les couleurs critiques sur l'appareil cible, surtout pour le travail de marque.
Comment les schémas de couleurs sont-ils générés ?
Les schémas font tourner la teinte HSL en gardant la saturation et la luminosité constantes. Complémentaire à +180°, triadique à +120° / +240°, analogue à ±30° et complémentaire divisée à +150° / +210°. Les teintes claires augmentent la luminosité vers 100 % (blanc) et les teintes foncées la diminuent vers 0 % (noir).
Le sélecteur de couleurs est-il uniquement pour les couleurs d'écran ?
Il fonctionne dans l'espace colorimétrique sRGB, qui est le bon modèle pour le web et la plupart des écrans grand public. Les conversions sont standard et bien testées pour le CSS et le travail de design d'interface.
Quelque chose est-il envoyé en ligne ?
Non. La page est en JavaScript pur côté navigateur. Les valeurs de couleur ne sont ni sauvegardées ni transmises.