Sélecteur de Couleurs Pro

Sélecteur de Couleurs Pro - Outil Professionnel

Sélecteur de couleurs avancé avec fonctionnalités professionnelles pour designers, développeurs et artistes. Générez des harmonies de couleurs, créez nuances et teintes, prévisualisez les dégradés, sauvegardez vos couleurs favorites et obtenez des informations détaillées. Toutes les fonctionnalités fonctionnent hors ligne avec mises à jour instantanées. Voir aussi notre Mélangeur Couleurs et notre Vérificateur Contraste.

Quelle est la différence entre HEX, RGB, HSL et CMJN ?

Ce sont quatre manières de décrire la même couleur, chacune adaptée à un flux différent. HEX est l'abréviation hexadécimale à 6 chiffres du RGB (#FF5733) ; c'est le standard en HTML et CSS car compact et facile à copier. RGB exprime la même valeur en trois canaux 0-255 (rgb(255,87,51)) et c'est le format que vous manipulez en JavaScript ou canvas. HSL re-paramètre la même couleur en Teinte, Saturation et Luminosité (hsl(9,100%,60%)) ; c'est le modèle le plus humain pour bâtir des thèmes car vous pouvez garder la teinte et ajuster seulement la luminosité pour créer teintes et tons. CMJN utilise des pourcentages de Cyan, Magenta, Jaune et Noir et existe pour l'impression — votre écran ne peut pas afficher du vrai CMJN, les valeurs ici sont donc une approximation mathématique.

Comment choisir une couleur et la copier en un clic ?

Cliquez sur l'échantillon principal pour ouvrir le sélecteur natif du navigateur, glissez dans le dégradé et le long du curseur de teinte jusqu'à la couleur voulue, et fermez la boîte de dialogue. Les quatre champs de format (HEX, RGB, HSL, CMJN) se mettent à jour en temps réel. Cliquez sur n'importe quel champ — ou son icône de copie — pour copier cette représentation dans le presse-papiers ; un toast confirme. Pour récupérer une couleur que vous voyez à l'écran, utilisez la pipette système offerte par Chrome (la petite icône dans le sélecteur natif sur navigateurs Chromium). Pour expérimenter rapidement, cliquez sur Aléatoire plusieurs fois jusqu'à ce que quelque chose résonne puis affinez avec les valeurs HSL. Sauvegardez le résultat avec Sauvegarder pour le garder dans la bibliothèque localStorage entre sessions.

Que sont les harmonies chromatiques et quand utiliser chacune ?

Les harmonies chromatiques sont des groupes de teintes liées mathématiquement que l'œil lit comme agréables ensemble. Complémentaire (opposée sur la roue, bleu + orange) donne le contraste le plus fort — à utiliser pour un accent sur fond neutre. Analogue (trois teintes à 30 degrés) paraît naturelle et sereine — à utiliser pour pages éditoriales et thèmes naturels. Triadique (trois teintes à 120 degrés) est audacieuse et équilibrée — à utiliser pour marques ludiques et infographies. Tétradique (deux paires complémentaires formant un carré) est la plus riche et la plus difficile — laissez une teinte dominer pendant que les autres soutiennent. Monochromatique (une teinte, plusieurs luminosités) est le choix le plus sûr — à utiliser pour UI minimalistes sophistiquées. Appliquez la règle 60-30-10 : 60 % dominant, 30 % secondaire, 10 % accent, quelle que soit l'harmonie.

Quelle est la différence entre tons (shades), teintes (tints) et tons-gris (tones) ?

En théorie classique des couleurs, un ton est votre couleur de base mélangée à du noir (plus sombre, souvent plus dramatique) ; une teinte est votre couleur de base mélangée à du blanc (plus claire, souvent plus douce) ; un ton-gris est votre couleur de base mélangée à du gris (plus mate, souvent plus sophistiquée). En termes numériques tout est ajustement HSL : un ton baisse la luminosité, une teinte l'augmente, un ton-gris baisse la saturation. Les design systems génèrent normalement une gamme de 9 paliers de 50 (teinte la plus claire) à 900 (ton le plus sombre) pour chaque couleur de marque, de sorte que tout élément d'UI — boutons, alertes, fonds, bordures — puisse tirer une valeur cohérente de la même teinte. Cet outil génère tons et teintes automatiquement ; copiez toute la bande comme point de départ pour vos design tokens.

Comment créer un dégradé CSS linéaire ou radial depuis ce sélecteur ?

Choisissez votre couleur principale, puis utilisez une harmonie comme Analogue ou Complémentaire pour obtenir une seconde couleur que l'œil acceptera comme fondu doux. Basculez l'aperçu entre Linéaire et Radial. Les dégradés linéaires coulent en ligne droite à un angle donné (linear-gradient(135deg, #A 0%, #B 100%)) et sont idéaux pour fonds, hero sections et boutons ; 135deg est la valeur la plus sûre car lue comme lumière naturelle venant du coin supérieur gauche. Les dégradés radiaux émanent d'un point focal (radial-gradient(circle at center, #A, #B)) et sont idéaux pour effets de lueur, projecteurs et avatars en orbe. Copiez la chaîne CSS générée directement dans votre feuille de style. Pour le meilleur contraste, placez le texte sur une couche pleine plutôt que directement sur le dégradé.

Comment l'outil décide-t-il de recommander du texte blanc ou noir sur ma couleur ?

Il calcule la luminance perçue du fond avec la formule WCAG de luminance relative : convertissez chaque canal RGB en valeur linéaire puis sommez avec pondération L = 0.2126 R + 0.7152 G + 0.0722 B (le vert domine car l'œil humain y est le plus sensible). Si la luminance du fond dépasse le seuil (environ 0.179, le point de contraste égal avec blanc et noir), le texte noir donne le meilleur ratio de contraste ; sinon le blanc l'emporte. C'est un guide rapide, pas la réponse finale — passez toujours la paire réelle premier-plan/fond dans un vérificateur de contraste WCAG pour confirmer 4.5:1 pour texte courant ou 3:1 pour texte large. La couleur recommandée se met à jour à l'instant où vous changez la couleur principale.

Comment sauvegarder des couleurs de marque et reconstruire une palette plus tard ?

Choisissez ou collez votre couleur et cliquez sur Sauvegarder. L'outil stocke chaque échantillon dans le localStorage du navigateur, qui survit aux rechargements et fermetures d'onglet mais reste sur cet appareil. Sauvegardez tout votre spectre de marque dès le départ — primaire, secondaire, trois ou quatre accents, un neutre et toutes couleurs sémantiques (succès, avertissement, danger) — et vous aurez une bibliothèque personnelle qui se charge instantanément à chaque visite. Cliquez sur n'importe quel échantillon sauvegardé pour le renvoyer dans l'emplacement principal et dériver harmonies, dégradés ou gammes de teintes. Pour partager en équipe, exportez les HEX vers du JSON de design tokens ou collez-les dans un document de styles Figma ; localStorage ne se synchronise pas entre appareils tout seul. Utilisez Tout Effacer pour vider la bibliothèque au début d'un nouveau projet client.

Quelles implications de daltonisme considérer en concevant avec une palette de cinq couleurs ?

Environ 8 % des hommes et 0,5 % des femmes ont une forme de déficience de vision des couleurs, la confusion rouge-vert étant la plus commune (deutéranopie et protanopie). Une palette qui dépend de rouge contre vert pour transmettre du sens (une icône d'erreur rouge à côté d'une verte de succès) sera identique pour ces utilisateurs. Trois défenses : (1) ne jamais utiliser la couleur seule pour transmettre un état — ajoutez forme d'icône, étiquette ou motif ; (2) testez votre palette avec un simulateur de daltonisme (le Simulateur de Daltonisme de ce site convient) ; (3) privilégiez les différences de teinte sur l'axe bleu-jaune quand vous devez vous appuyer sur la couleur, car ces distinctions survivent à la plupart des types de daltonisme. Passez vos paires finales premier-plan/fond dans un vérificateur WCAG et un simulateur CVD avant publication.

Fonctionnalités Professionnelles

• Sélecteur de couleurs avancé avec grand aperçu
• 5 modes d'harmonies (Complémentaire, Analogue, Triadique, Tétradique, Monochromatique)
• Génération automatique de nuances (foncé) et teintes (clair)
• Création de dégradés linéaires et radiaux avec aperçu
• Sauvegarde illimitée de couleurs favorites dans navigateur
• Copie de tous formats (HEX, RGB, HSL, CMYK, dégradés CSS)
• Informations couleur temps réel (luminosité, luminance)
• Recommandation meilleure couleur texte (blanc/noir sur couleur)
• Cliquez n'importe quelle couleur pour l'utiliser comme principale
• Mises à jour instantanées - pas besoin de bouton convertir
• Traitement 100% côté client
• Fonctionne hors ligne après premier chargement
• Support mode sombre
• Design responsive compatible mobile
• Export de palettes de couleurs
• Outils de couleur de qualité professionnelle