Sélecteur et Convertisseur de Couleur – HEX ⇄ RGB ⇄ HSL ⇄ CMYK + Contraste WCAG & Harmonies

Loading…

À propos Sélecteur et Convertisseur de Couleur en Ligne

Déposez une image, collez une couleur ou utilisez la roue pour capturer des couleurs pixel parfait. L'outil effectue une analyse riche côté client : il normalise votre HEX, calcule RGB/HSL/HSV/CMYK, convertit en XYZ/LAB/LCH, calcule la luminance et le contraste WCAG, et génère des palettes harmonieuses. Vous pouvez ensuite copier n'importe quel format sous forme de jeton prêt pour CSS ou utiliser les harmonies pour construire un système de design cohérent.

Ce Que Ce Sélecteur de Couleurs Peut Faire

Échantillonner des couleurs depuis des images* ou commencer avec une roue chromatique précise ou une saisie HEX/RGB
Conversions riches : HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
Vérificateur de contraste WCAG intégré contre #000000 et #FFFFFF utilisant la luminance relative
Suggestions HEX sécurisées pour le web et raccourcies le cas échéant
Harmonies de couleurs : complémentaire, triadique, tétradique, analogue, monochrome (calculées par rotation de teinte)
Aperçu de la luminance et de la luminosité perçue pour anticiper les problèmes de contraste
Correspondance approximative type Pantone basée sur la distance RGB la plus proche (avec jeu de données en cache)
L'analyse s'exécute côté client ; seules des données minimales sont utilisées lorsque la recherche Pantone optionnelle est activée

🔧 Comment Utiliser le Sélecteur de Couleurs for color-picker

1. Choisir ou sélectionner une couleur de base

Collez une valeur HEX, tapez RGB/HSL, ou utilisez le sélecteur pour capturer une couleur depuis une image ou la roue. L'outil la normalise en une valeur HEX sécurisée en interne.

2. Ajuster finement la teinte et la luminosité

Ajustez la teinte, la saturation et la luminosité jusqu'à ce que l'échantillon semble correct. Un grand aperçu montre la couleur sur des surfaces claires et sombres pour le contexte.

3. Lire et copier les formats dont vous avez besoin

Copiez HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB et LCH en un clic. Utilisez-les pour les variables CSS, les jetons de design ou les notes de transmission.

4. Vérifier le contraste WCAG

Voyez les ratios de contraste par rapport à #000000 et #FFFFFF basés sur la luminance sRGB. Utilisez les résultats pour décider rapidement si une couleur convient pour le texte courant, les grands titres ou les éléments d'interface.

5. Générer des harmonies & construire une palette

Explorez les couleurs complémentaires, triadiques, tétradiques, analogues et monochromes générées par rotation de teinte. Ajoutez vos favoris à une palette/historique et exportez-les sous forme de jetons.

Détails Techniques

Gestion des Saisies & Normalisation

L'outil accepte les codes couleur hexadécimaux et les convertit en un HEX normalisé à 6 chiffres comme référence interne.

Aspect	Comportement	Notes
Normalisation HEX	HEX 3 et 6 chiffres, # facultatif en tête	HEX court (ex. #0f8) est étendu en #00ff88 ; les caractères non hexadécimaux sont supprimés.
Prise en charge HEX8	RGBA via #RRGGBBAA	Le canal alpha est converti en 0–255 et ajouté comme 4ème octet.
Suggestion web-safe	Aligner sur le palier de 51 le plus proche par canal	Les valeurs sont arrondies au multiple de 51 le plus proche (0, 51, 102, 153, 204, 255).
Suggestion HEX abrégé	Uniquement si compressible	Affiché lorsque chaque paire de chiffres HEX est répétée (ex. #112233 → #123).

Espaces colorimétriques et conversions

Tous les calculs sont basés sur sRGB avec un blanc de référence D65.

Espace	Calcul	Utilisation
RVB	À partir de HEX normalisé (0–255 par canal)	Représentation de base pour les conversions.
TSL / TSV	Transformations cylindriques standard depuis sRGB	Utilisé pour des modifications intuitives et calculs d'harmonie.
CMJN	Approximation indépendante du périphérique	Calculé comme 1−max(R,V,B) avec composantes 0–100 % ; non lié aux profils ICC.
XYZ	sRGB linéarisé → XYZ avec matrice D65	Espace intermédiaire pour LAB/LCH et analyses approfondies.
LAB	CIE Lab* depuis XYZ	Espace métrique perceptuellement plus uniforme.
LCH	CIE LCh° depuis LAB	Utile pour ajustements teinte/chroma/luminosité et conception de palettes perceptuelles.

Luminance et contraste WCAG

Le contraste est calculé avec la formule standard de luminance relative WCAG.

Aspect	Détails	Notes
Luminance relative	Calculée à partir du sRGB linéarisé (composante Y)	Utilise les coefficients 0,2126R + 0,7152G + 0,0722B.
Rapport de contraste	(L1 + 0,05) / (L2 + 0,05)	L'outil rapporte le contraste par rapport à #000000 et #FFFFFF.
Seuils WCAG	AA/AAA pour texte normal et grand	Seuils typiques : 4,5:1 (AA normal), 3:1 (AA grand), 7:1 (AAA normal), 4,5:1 (AAA grand).

Harmonies et couleurs dérivées

Les harmonies sont générées par de simples rotations de teinte dans HSL, en préservant la saturation et la luminosité.

Harmonie	Règle	Exemple
Complémentaire	+180° de teinte	Point opposé sur la roue des couleurs.
Triadique	±120° de teinte	Trois couleurs équitablement espacées.
Tétradique	+90°, +180°, +270° de teinte	Quatre couleurs formant un rectangle sur la roue.
Analogique	−30° / +30° de teinte	Voisins autour de la couleur de base.
Monochrome	Éclaircir/foncer en L	Versions plus claires et plus sombres de la même teinte.

Correspondance type Pantone (approximative)

Lorsque le jeu de données Pantone est disponible, l'outil calcule la correspondance la plus proche dans l'espace RVB.

Aspect	Comportement	Notes
Chargement du jeu de données	Chargement en cache + asynchrone via getPantoneColors / getPantoneColorsCached	L'interface peut afficher une correspondance instantanément lorsque le cache est chaud, ou après un court chargement asynchrone.
Métrique de correspondance	Distance euclidienne au carré sur RVB (0–255)	Approximation rapide et simple ; pas une métrique ΔE* perceptuelle.
Sortie	ID et nom de type Pantone	Affiché uniquement à titre indicatif ; pas une correspondance Pantone officielle.

Performance & Confidentialité

Les conversions, la luminance, le contraste et les harmonies sont calculés entièrement côté client. La recherche Pantone peut consulter un jeu de données local ou distant selon la configuration, mais les couleurs brutes restent de simples chaînes HEX sauf si vous les partagez ou exportez explicitement.

Cas d'Utilisation Populaires

UI/UX & Front-End

Créez des paires premier plan/arrière-plan accessibles pour les boutons, liens et texte.
Exportez directement les variables CSS et les jetons de conception à partir des couleurs choisies.
Vérifiez le contraste pour les modes clair/sombre avant d'implémenter un sélecteur de thème.

/* Jetons de couleur CSS */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

Image de Marque & Identité Visuelle

Dérivez une palette primaire/secondaire/accents à partir d'une seule couleur principale.
Explorez des options complémentaires ou triadiques pour un logo ou une gamme de produits.
Obtenez une dénomination approximative de type Pantone avant de préparer un guide de marque.

Visualisation de Données & Tableaux de Bord

Définissez des couleurs de série qui restent distinctes sur les arrière-plans clairs et sombres.
Utilisez LAB/LCH pour concevoir des palettes avec des étapes perceptuelles contrôlées.
Vérifiez rapidement si les couleurs du graphique répondent aux attentes de contraste dans la légende et les étiquettes.

❓ Frequently Asked Questions

Quelle est la différence entre HEX, RVB, TSL et TSV ?

HEX est simplement une manière compacte d'écrire les valeurs RVB en base 16. RVB décrit les composantes rouge/vert/bleu en sRVB. TSL et TSV sont des modèles cylindriques plus intuitifs : T est la teinte sur la roue des couleurs, S est la saturation, et L/V contrôle la luminosité ou la clarté.

Pourquoi les valeurs CMJN semblent-elles approximatives ?

La sortie CMJN réelle dépend des profils d'imprimante, de l'encre, du papier et de l'étalonnage. Cet outil montre une approximation indépendante du périphérique utile pour les décisions de conception préliminaires, mais le travail d'impression final doit être vérifié avec les profils ICC de votre imprimeur.

À quoi servent LAB et LCH ?

LAB et LCH sont plus uniformes sur le plan perceptuel que le RVB brut. Des étapes numériques égales en L ou C ont tendance à paraître plus cohérentes à l'œil, ce qui les rend excellents pour générer des teintes, des ombres et des palettes équilibrées ou pour mesurer la distance visuelle entre les couleurs.

Comment le contraste est-il calculé ?

Nous calculons la luminance relative à partir du sRVB en utilisant la formule WCAG, puis dérivons le rapport de contraste (L1 + 0,05) / (L2 + 0,05). Le résultat est comparé à des seuils courants tels que 4,5:1 (texte normal AA) et 7:1 (texte normal AAA).

Les noms Pantone sont-ils exacts ?

Non. Toute étiquette de type Pantone est une correspondance approximative des plus proches voisins dans l'espace RVB et est fournie à titre indicatif uniquement. Pour les travaux critiques en production, validez toujours avec les bibliothèques et outils Pantone officiels.

Stockez-vous mes images ou couleurs ?

Les calculs de couleur (formats, contraste, harmonies) sont effectués côté client. Selon la configuration, les téléchargements d'images et les jeux de données Pantone peuvent impliquer un serveur, mais l'outil est conçu pour un traitement transitoire, pas un stockage à long terme. Pour les actifs hautement confidentiels, préférez les outils locaux/hors ligne.

Pro Tips

Best Practice

Prévisualisez toujours les couleurs sur des surfaces claires et sombres ; la saturation et le contraste perçus peuvent changer radicalement selon le contexte.

Best Practice

Utilisez LAB ou LCH lors de la génération de teintes et d'ombres pour que les changements de luminosité paraissent plus uniformes à l'œil humain.

Best Practice

Vérifiez le contraste AA/AAA pour tous les états interactifs (survol, actif, désactivé), pas seulement la couleur par défaut du bouton.

Best Practice

Exportez des variables CSS ou des jetons de conception depuis l'onglet des formats pour maintenir la cohérence des couleurs dans vos composants.

Best Practice

Lors de l'échantillonnage d'images, faites la moyenne sur une petite zone plutôt que sur un seul pixel pour réduire le bruit dû à la compression et à l'anticrénelage.