Générateur de couleurs HEX, RGB et HSL

Ce que vous pouvez faire ici

• Créer un échantillon sRGB et afficher HEX, RGB et HSL.
• Calculer le contraste avec noir et blanc à deux décimales.
• Copier chaque notation ou le HEX d’une vignette.
• Générer cinq couleurs indépendantes pour l’exploration.
• Choisir sur chaque vignette le texte noir ou blanc offrant le ratio supérieur.

Réponse rapide : générer et vérifier une couleur

Cliquez sur « Générer une couleur », puis copiez HEX, RGB ou HSL selon votre outil. Lisez les deux ratios de contraste. Pour le texte courant au niveau AA, WCAG 2.2 fixe 4,5:1 ; le grand texte peut utiliser 3:1. Le niveau AAA demande 7:1 pour le texte courant. Vérifiez la définition de la taille avant d’appliquer le seuil.

Une couleur tirée au hasard peut débloquer une maquette, tester un état ou fournir un exemple pédagogique. Elle ne devient pas automatiquement un bon token de marque. Placez-la dans le vrai bouton, lien, graphique ou message, avec ses états focus, hover, actif et désactivé. Une décision de design dépend d’un système entier, pas d’un carré isolé.

HEX, RGB et HSL décrivent le même échantillon

HEX encode rouge, vert et bleu avec deux chiffres hexadécimaux. `#FF0000` représente 255 de rouge, 0 de vert et 0 de bleu, soit `rgb(255, 0, 0)`. Ces deux notations décrivent directement le même point opaque de l’espace sRGB couramment utilisé par CSS et les écrans.

HSL réorganise la description en teinte, saturation et luminosité. Cette notation facilite certaines variations, mais elle n’est pas perceptuellement uniforme : dix points de luminosité ne produisent pas partout le même changement ressenti. Le widget arrondit les valeurs HSL à l’entier ; une conversion inverse peut donc différer d’un canal à cause de l’arrondi.

Comment le tirage aléatoire est réalisé

Trois nombres entiers entre 0 et 255 sont générés avec `Math.random`, puis convertis en HEX et HSL. Cette source suffit à une inspiration visuelle, car le résultat ne protège aucun secret et ne décide pas un tirage à enjeu. Ne réutilisez jamais ces valeurs comme token d’accès, identifiant imprévisible ou preuve d’impartialité.

L’espace RGB contient 16 777 216 combinaisons, mais les perceptions humaines ne s’y répartissent pas uniformément. Cinq tirages peuvent être tous sombres, très proches ou visuellement discordants. « Aléatoire » décrit le processus des canaux, pas une sélection équilibrée de couleurs agréables, distinctes, imprimables ou accessibles.

Luminance relative et formule du ratio

Chaque canal sRGB est normalisé puis linéarisé. La luminance relative combine les valeurs avec les coefficients 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu. Le ratio est ensuite `(L1 + 0,05) / (L2 + 0,05)`, avec la luminance la plus claire en L1. Il va de 1:1 à 21:1.

La page calcule deux résultats : échantillon contre noir et contre blanc. « Meilleur texte » indique seulement lequel des deux est supérieur. Un meilleur ratio de 3,8:1 ne suffit pas au texte normal AA, même s’il est meilleur que l’autre. Mesurez la combinaison exacte, notamment lorsque le fond est translucide, dégradé ou posé sur une image.

Seuils WCAG 4,5:1, 3:1 et 7:1

Le critère WCAG 2.2 1.4.3 exige au niveau AA un contraste de 4,5:1 pour le texte normal et 3:1 pour le grand texte. Les logos et éléments purement décoratifs relèvent d’exceptions. Le critère 1.4.6 élève le niveau AAA à 7:1 pour le texte normal et 4,5:1 pour le grand texte.

La taille dite « grande » dépend aussi du poids typographique. Les limites de contrôles et indicateurs nécessaires à l’interface peuvent relever d’exigences non textuelles distinctes. Ce widget compare uniquement noir et blanc sur un fond uni ; il ne certifie ni icône, ni bordure, ni focus, ni état désactivé, ni texte sur photographie.

Cinq couleurs ne forment pas une palette harmonique

Le bouton palette produit cinq tirages indépendants. Il ne recherche ni complémentaires, ni analogues, ni triade, ni échelle de luminosité. Deux vignettes peuvent se ressembler ou entrer en conflit. Utilisez-les pour repérer une direction, puis construisez délibérément les rôles de fond, surface, texte, accent, succès, avertissement et erreur.

Chaque rôle interactif demande des états et des ratios. Pour un graphique, associez le ton à une étiquette, un motif, une forme ou une position afin que le sens ne dépende pas uniquement de la perception rouge-vert. Le critère WCAG « utilisation de la couleur » vise précisément cette redondance. Une palette utile encode une hiérarchie et des règles.

Passer d’un échantillon à des tokens de design

Enregistrez une couleur choisie avec un nom sémantique comme `--couleur-accent` plutôt qu’un nom visuel tel que `bleu-3`. Documentez où elle peut apparaître et les paires de texte autorisées. Construisez les variantes par une méthode reproductible, puis testez pages longues, formulaires, tableaux, mode sombre, zoom et préférences de contraste.

Des contenus traduits peuvent allonger les boutons, changer la surface colorée et révéler un problème absent dans la maquette courte. Les états de succès et d’erreur doivent rester compréhensibles sans se réduire au vert et au rouge. Ajoutez texte, icône et focus visible. La conformité appartient au composant final, pas au code HEX isolé.

sRGB à l’écran, CMJN et impression

Les valeurs générées appartiennent à sRGB. Deux écrans peuvent les afficher différemment à cause du profil, de la luminosité, du mode nuit et de la lumière ambiante. Des espaces CSS plus larges comme Display-P3 contiennent des couleurs que cet outil ne produit pas. Un projet avancé doit conserver son pipeline colorimétrique.

HEX ou RGB ne se convertit pas directement en une encre CMJN ou Pantone garantie. Papier, vernis, absorption et procédé modifient le rendu. Pour une identité imprimée, demandez le profil et une épreuve physique au prestataire. Conservez séparément les spécifications web et print plutôt que d’approuver une marque sur un seul téléphone.

Traitement local, copie et limites

Les couleurs, conversions et ratios sont produits dans l’onglet ; FunnyTools ne reçoit pas les valeurs. Copier les place dans le presse-papiers. Une couleur est rarement sensible, mais un projet confidentiel peut imposer de ne pas partager ses tokens. La page ne sauvegarde aucun favori ni URL permanente.

Le widget ne simule pas les déficiences de vision, ne teste pas une photographie, ne connaît pas la taille réelle du texte et n’évalue pas l’impression. Il fournit un point de départ et deux ratios exacts contre noir et blanc. Conservez les valeurs choisies, puis réalisez l’audit dans le produit, avec les états, contenus et appareils représentatifs.

Mode d’emploi étape par étape

1. Générez une couleur ou utilisez Espace lorsque la zone, hors contrôle, a le focus.
2. Copiez HEX, RGB ou HSL et confirmez que la cible utilise sRGB.
3. Comparez noir et blanc au seuil correspondant au texte réel.
4. Explorez cinq tirages, puis organisez une palette intentionnelle.
5. Testez composants, états, daltonisme, écrans et impression concernés.

Dans quelles situations cet outil est utile

• Trouver un accent de prototype puis mesurer le texte du bouton.
• Copier un HEX vers CSS tout en documentant RGB et HSL.
• Écarter les tirages qui échouent pour du texte normal.
• Comparer l’écran à une épreuve sur papier.

Exemples détaillés

Limites et vérifications importantes

• Les cinq couleurs sont indépendantes, sans harmonie calculée.
• HSL est arrondi et peut varier lors d’une conversion inverse.
• 4,5:1 vise le texte normal AA ; le contexte fixe le seuil.
• Le meilleur de noir ou blanc n’est pas toujours conforme.
• Math.random convient à l’inspiration, pas à un secret ou un tirage auditable.

Sources et documentation à consulter

• W3C — WCAG 2.2 Critères 1.4.3 et 1.4.6, ratios AA et AAA.
• W3C — technique G18 Formule de luminance relative et mesure du ratio.
• W3C — ne pas utiliser la couleur seule Signaux redondants pour transmettre l’information.

Questions fréquentes