Conversor de cores
Converta qualquer cor entre HEX, RGB, HSL e HSV. Use o seletor ou digite em qualquer campo — os outros se atualizam ao vivo. Inclui verificador de contraste WCAG para pares acessíveis.
Útil para traduzir cores de design systems, escolher pares acessíveis de texto/fundo e alinhar valores entre ferramentas.
Verificador de contraste WCAG
Pick a foreground and background color to check whether they meet the accessibility minimums from WCAG 2.1.
Normal text at 16 px — the quick brown fox jumps over the lazy dog.
Large text at 24 px — quick brown fox.
Limiares WCAG
- AA — normal text: contrast ratio ≥
4.5:1. - AA — large text (18 pt or 14 pt bold): ≥
3:1. - AAA — normal text: ≥
7:1. - AAA — large text: ≥
4.5:1. - UI components and graphical objects: ≥
3:1against adjacent colors.
A razão é calculada a partir da luminância relativa por WCAG 2.1, usando os canais sRGB linearizados e os pesos 0.2126·R + 0.7152·G + 0.0722·B.
Notas sobre formatos
- HEX accepts
#rgb,#rgba,#rrggbband#rrggbbaaforms. The leading#is optional in the input. - RGB input accepts
rgb(r, g, b),rgba(r, g, b, a)and bare comma- or space-separated triplets like59, 130, 246. - HSL: hue is 0–360°, saturation and lightness are percentages.
hsl(217 91% 60%)(CSS Color 4) is accepted alongside the legacy comma form. - HSV (also called HSB) is not in CSS — it's shown here because it's useful in design tools. The display form is
hsv(h, s%, v%).
Perguntas frequentes
Por que HSL e HSV não batem exatamente com meus valores do Photoshop / Figma?
Arredondamento. Hue, saturation e lightness são contínuos; as ferramentas arredondam de formas diferentes. Uma diferença de 1° em hue ou 1% em saturation é esperada e visualmente idêntica.
O verificador de contraste considera o alfa (transparência)?
Não. As proporções WCAG assumem cores totalmente opacas. Se você tem um primeiro plano semitransparente, misture-o antes contra o fundo e verifique a cor opaca resultante.
E o APCA, o novo algoritmo de contraste?
O APCA é candidato a substituir a proporção WCAG 2.x na WCAG 3.0 (ainda em rascunho). Para trabalho em produção hoje, a proporção WCAG 2.1 é o que auditores e o Lighthouse verificam.
Algo é enviado para um servidor?
Não. Toda a conversão e a matemática de contraste rodam no seu navegador.