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.
Escolha cores com conversão HEX, RGB, HSL e verificação de contraste WCAG AA/AAA. 100% no navegador, grátis, sem cadastro.
Esta ferramenta unifica os dois trabalhos que toda decisão de cor de interface envolve: escolher a cor e provar que ela é legível. Escolha qualquer cor através do seletor visual ou digitando HEX, e a ferramenta converte para RGB e HSL instantaneamente, com sliders para ajustar finamente a matiz, saturação e luminosidade. Combine-a com uma segunda cor — texto sobre fundo — e o motor WCAG calcula a taxa de contraste, classificando-a contra os limiares AA e AAA para texto normal e grande. Isso transforma a acessibilidade de uma auditoria pós-lançamento em uma decisão que você toma enquanto a paleta ainda está em fluxo.
Designers de UI construindo paletas acessíveis verificam o contraste do texto de botões e rótulos antes de passar adiante, não após revisão legal. Desenvolvedores frontend convertendo valores HEX de marca em HSL para variantes de opacidade e sistemas de temas fazem o cálculo em um único lugar. Equipes de conteúdo verificam a legibilidade do texto sobreposto em imagens em destaque. Donos de pequenos negócios auditando seu próprio site contra o WCAG 2.1 AA — cada vez mais um requisito de compra e legal sob a ADA nos EUA e EN 301 549 na Europa — obtêm respostas aprovado/reprovado sem comprar uma ferramenta de auditoria.
(1) Escolha suas cores de primeiro e segundo plano através do seletor, entrada de HEX ou dos sliders RGB/HSL. (2) A taxa de contraste é calculada ao vivo como um número único de 1:1 (idêntico) a 21:1 (preto sobre branco). (3) O painel de verificação classifica ambas as cores contra quatro limiares — AA texto normal 4,5:1, AA texto grande 3:1, AAA normal 7:1, AAA grande 4,5:1 — com verde ou vermelho por linha. (4) Copie formatos para CSS: strings hex, rgb(), hsl() prontas para colar. Trocar qualquer uma das duas cores para preto ou branco sugere automaticamente a melhor opção de texto.
O WCAG 2.1 define dois níveis de conformidade com limiares numéricos. O nível AA, o padrão legal e de compra, requer 4,5:1 para texto normal e 3:1 para texto grande — 18,66px negrito ou 24px regular ou maiores — além de 3:1 para componentes de UI significativos como bordas de entrada e botões de ícone. O nível AAA eleva o texto normal para 7:1 e reduz o texto grande para 4,5:1. Falhas comuns são previsíveis: texto de placeholder cinza em torno de 3:1, botões com cores de marca e rótulos brancos, e texto de baixa opacidade sobre imagens. Correções práticas que mantêm os designs intactos: escurecer o texto em vez do fundo, reservar cinzas mais claros para estados desativados, e testar sobreposições contra as regiões mais claras e escuras da imagem. A matemática é baseada em luminância, então o mesmo par pode inverter o veredito quando a luminosidade de qualquer cor muda mesmo ligeiramente — por isso a verificação ao vivo durante o design supera a correção em lote depois.
Limiares de acessibilidade web da W3C. O AA requer uma taxa de contraste de pelo menos 4,5:1 para texto corporal normal (3:1 para texto grande ≥18pt); o AAA, o nível mais estrito, exige 7:1. Este verificador avalia seu par de primeiro/segundo plano ao vivo e informa quais níveis passam, para que botões e texto permaneçam legíveis para usuários com baixa visão — e legalmente seguros sob regras de acessibilidade como a European Accessibility Act.
Você não precisa — escolha uma cor uma vez e a ferramenta exibe todos os formatos simultaneamente: HEX para arquivos de design, RGB para trabalho com transparência rgba(), e HSL para construir paletas (seus eixos de matiz/saturação/luminosidade mapeiam para como os humanos realmente ajustam a cor). Os valores são representações matematicamente equivalentes da mesma cor sRGB.
Os dois últimos dígitos são alfa (opacidade): #3B82F6 é totalmente opaco, #3B82F680 é o mesmo azul com 50% de transparência. HEX de 8 dígitos funciona em todos os navegadores modernos e CSS, e é muitas vezes mais claro que rgba() porque a cor base permanece visualmente reconhecível no código.
HEX para tokens de design compartilhados (compacto, universalmente entendido), rgba() quando você precisa calcular transparência a partir de uma cor base, e HSL quando paletas são derivadas programaticamente (girar matiz, ajustar luminosidade). A consistência dentro de um projeto importa mais que o formato em si — misturar três formatos para a mesma variável é como bugs de contraste escapam.
Sim. Escolha qualquer duas cores e ele calcula instantaneamente a taxa de contraste WCAG 2.1 (faixa de 1:1 a 21:1). A conformidade AA requer 4,5:1 para texto normal e 3:1 para texto grande (18px+ negrito ou 24px+). AAA requer 7:1. A ferramenta sinaliza aprovado/reprovado para cada nível com sugestões específicas de remediação.
Ele converte entre HEX (#3B82F6), RGB (59, 130, 246), HSL (217°, 91%, 60%) e exibe a classe de utilitário Tailwind CSS mais próxima. Copie qualquer formato com um clique. O seletor visual suporta matiz, saturação, luminosidade e canais alfa para seleção de cor precisa sem precisar de software 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.