Pick colors, convert between HEX/RGB/HSL, and check WCAG contrast ratios.
All color conversion and contrast calculations run locally in your browser — no data is uploaded. The WCAG contrast ratios follow the official W3C standard (≥4.5:1 for normal text, ≥3:1 for large text).
HEX, RGB and HSL describe the same pixel in different languages. HEX is a compact 24-bit integer; RGB is three light intensities (each 0–255); HSL is perceptual — hue (the color), saturation (intensity), lightness (dark↔light). Contrast, meanwhile, is a ratio of relative luminance, not a "brightness difference" you eyeball.
#E76F51 == rgb(231, 111, 81). Raise lightness or drop saturation and you get a different tint/paste — even though hue, the 'color name', barely moves. That is why HSL is friendlier for design tweaks.
You want a button background that keeps its 'coral' identity but passes AA on white.
To pick a color: use the color wheel or enter a HEX/RGB/HSL value — the tool shows conversions between all formats and checks WCAG accessibility contrast ratios.
FreeToolHub Color Picker is a free browser-based tool that picks colors and converts between HEX, RGB, and HSL with WCAG contrast checking, no signup.
Choisissez des couleurs avec conversion HEX, RGB, HSL et vérification du contraste WCAG AA/AAA. 100 % dans le navigateur, gratuit, sans inscription.
Cet outil unifie les deux tâches impliquées dans chaque décision de couleur d'interface : choisir la couleur et prouver qu'elle est lisible. Choisissez n'importe quelle couleur via le sélecteur visuel ou en tapant un code HEX, et l'outil convertit instantanément en RGB et HSL, avec des curseurs pour affiner la teinte, la saturation et la luminosité. Associez-la à une deuxième couleur — texte sur fond — et le moteur WCAG calcule le rapport de contraste, le notant par rapport aux seuils AA et AAA pour le texte normal et le texte grand. Cela transforme l'accessibilité d'un audit post-lancement en une décision que vous prenez alors que la palette est encore fluide.
Les designers d'interfaces qui construisent des palettes accessibles vérifient le contraste du texte des boutons et des étiquettes avant de les transmettre, pas après un examen juridique. Les développeurs frontend qui convertissent les valeurs HEX de la marque en HSL pour les variantes de transparence et les systèmes de thèmes font le calcul en un seul endroit. Les équipes de contenu vérifient la lisibilité du texte de superposition sur les images principales. Les propriétaires de petites entreprises auditant leur propre site contre la norme WCAG 2.1 AA — de plus en plus une exigence d'approvisionnement et juridique en vertu de l'ADA aux États-Unis et de la norme EN 301 549 en Europe — obtiennent des réponses oui/non sans acheter un outil d'audit.
(1) Choisissez vos couleurs de premier plan et d'arrière-plan via le sélecteur, la saisie HEX ou les curseurs RGB/HSL. (2) Le rapport de contraste se calcule en temps réel sous forme d'un seul nombre allant de 1:1 (identique) à 21:1 (noir sur blanc). (3) Le panneau de jugement note les deux couleurs par rapport à quatre seuils — AA texte normal 4,5:1, AA texte grand 3:1, AAA texte normal 7:1, AAA texte grand 4,5:1 — avec du vert ou du rouge par ligne. (4) Copiez les formats pour le CSS : chaînes hex, rgb(), hsl() prêtes à être collées. Le fait de passer l'un ou l'autre emplacement au noir ou au blanc suggère automatiquement la meilleure option de texte.
WCAG 2.1 définit deux niveaux de conformité avec des seuils numériques. Le niveau AA, la référence légale et d'approvisionnement standard, exige un rapport de 4,5:1 pour le texte normal et 3:1 pour le texte grand — 18,66px gras ou 24px régulier et plus — ainsi que 3:1 pour les composants d'interface utilisateur significatifs comme les bordures de saisie et les boutons d'icône. Le niveau AAA élève le texte normal à 7:1 et abaisse le texte grand à 4,5:1. Les échecs courants sont prévisibles : le texte d'espace réservé gris autour de 3:1, les boutons de couleur de marque avec des étiquettes blanches, et le texte à faible opacité sur les images. Les solutions pratiques qui préservent les designs : assombrir le texte plutôt que le fond, réserver les gris plus clairs pour les états désactivés, et tester les superpositions contre les régions les plus claires et les plus sombres de l'image. Le calcul est basé sur la luminance, donc la même paire peut inverser les verdicts lorsque la luminosité de l'une ou l'autre couleur change même légèrement — c'est pourquoi la vérification en direct pendant la conception est préférable à la correction par lots après.
Seuils d'accessibilité web du W3C. AA exige un rapport de contraste d'au moins 4,5:1 pour le texte corporel normal (3:1 pour le texte grand ≥18pt) ; AAA, le niveau plus strict, exige 7:1. Ce vérificateur note en direct votre paire de premier plan/arrière-plan et vous indique quels niveaux sont réussis, afin que les boutons et le texte restent lisibles pour les utilisateurs malvoyants — et juridiquement conformes aux règles d'accessibilité comme l'European Accessibility Act.
Vous n'avez pas à le faire — choisissez une couleur une seule fois et l'outil affiche tous les formats simultanément : HEX pour les fichiers de design, RGB pour le travail de transparence rgba(), et HSL pour construire des palettes (ses axes teinte/saturation/luminosité correspondent à la façon dont les humains ajustent réellement les couleurs). Les valeurs sont des représentations mathématiquement équivalentes de la même couleur sRGB.
Les deux derniers chiffres sont l'alpha (opacité) : #3B82F6 est entièrement opaque, #3B82F680 est le même bleu à 50 % de transparence. L'hexadécimal à 8 chiffres fonctionne dans tous les navigateurs modernes et CSS, et est souvent plus clair que rgba() car la couleur de base reste visiblement reconnaissable dans le code.
HEX pour les jetons de design partagés (compact, universellement compris), rgba() lorsque vous avez besoin de calculer la transparence à partir d'une couleur de base, et HSL lorsque les palettes sont dérivées par programme (faire tourner la teinte, ajuster la luminosité). La cohérence à l'intérieur d'un projet est plus importante que le format lui-même — mélanger trois formats pour la même variable, c'est ainsi que les bogues de contraste passent inaperçus.
Oui. Choisissez n'importe quelles deux couleurs et il calcule instantanément le rapport de contraste WCAG 2.1 (plage de 1:1 à 21:1). La conformité AA exige 4,5:1 pour le texte normal et 3:1 pour le texte grand (18px+ gras ou 24px+). AAA exige 7:1. L'outil indique réussi/échec pour chaque niveau avec des suggestions de correction spécifiques.
Il convertit entre HEX (#3B82F6), RGB (59, 130, 246), HSL (217°, 91 %, 60 %) et affiche la classe d'utilitaire CSS Tailwind la plus proche. Copiez n'importe quel format en un seul clic. Le sélecteur visuel prend en charge la teinte, la saturation, la luminosité et les canaux alpha pour une sélection de couleur précise sans avoir besoin de logiciel de design.
Yes. Pick any two colors and it instantly calculates the WCAG 2.1 contrast ratio (range 1:1 to 21:1). AA compliance requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+). AAA requires 7:1. The tool flags pass/fail for each level with specific remediation suggestions.
It converts between HEX (#3B82F6), RGB (59, 130, 246), HSL (217°, 91%, 60%), and displays the closest Tailwind CSS utility class. Copy any format with one click. The visual picker supports hue, saturation, lightness, and alpha channels for precise color selection without needing design software.
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.