TF

Design e CSS

Conversor de cores e verificador de contraste

Converta cores entre HEX, RGB, HSL, HSV, HWB, CMYK e OKLCH e verifique o contraste WCAG para texto acessível.

HEX, rgb(), hsl(), hsv(), hwb(), cmyk(), oklch() ou um nome CSS como tomato.

  • HEX#0f766e
  • RGBrgb(15 118 110)
  • HSLhsl(175 77% 26%)
  • HSV / HSBhsv(175 87% 46%)
  • HWBhwb(175 6% 54%)
  • CMYKcmyk(87% 0% 7% 54%)
  • OKLCHoklch(51.1% 0.086 186.4)

Tons claros e escuros

O que é esta ferramenta?

Cole uma cor em qualquer formato — #ff6347, rgb(255 99 71), hsl(9 100% 64%) ou simplesmente tomato — e copie-a em todos os outros. Mude para o verificador de contraste para testar cores de texto e fundo segundo a WCAG 2 e obter a cor mais próxima que cumpre quando um par falha.

Os ecrãs misturam luz vermelha, verde e azul, por isso HEX e RGB descrevem as cores como os monitores. HSL e HSV são mais fáceis de ajustar à mão, CMYK aproxima as tintas de impressão e OKLCH é um espaço percetual moderno suportado em CSS.

As relações de contraste WCAG vão de 1:1 a 21:1. O texto normal precisa de pelo menos 4,5:1 para AA e 7:1 para AAA; o texto grande (24px, ou 18,66px em negrito) e os componentes de interface precisam de 3:1. As cores translúcidas são misturadas com o fundo antes da medição.

Como usar: Conversor de cores e contraste

  1. Escreva ou cole uma cor, ou escolha-a com o seletor.
  2. Copie o formato de que precisa: HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH ou o nome CSS.
  3. Clique num tom mais claro ou mais escuro para explorar variações da mesma cor.
  4. Abra o verificador de contraste, defina texto e fundo e veja se cumprem WCAG AA e AAA.
  5. Se um par falhar, use a cor sugerida — mantém o tom e ajusta a luminosidade até cumprir.

Exemplos

Tomato noutros formatos

tomato
#ff6347
rgb(255 99 71)
hsl(9 100% 64%)

Perguntas frequentes

Como converto HEX em RGB?

Cole o código HEX, como #3366cc, e copie a linha RGB: rgb(51 102 204). Cada par de dígitos hexadecimais é um canal de 0 a 255.

De que relação de contraste preciso?

Para o texto principal, pelo menos 4,5:1 (WCAG AA). Títulos grandes e ícones precisam de 3:1. Aponte para 7:1 (AAA) em leituras longas ou para pessoas com baixa visão.

A conversão CMYK é exata para impressão?

É uma aproximação independente do dispositivo. O resultado real depende do papel e do perfil da impressora, por isso use o perfil de cor da gráfica nos ficheiros finais.

O que é o OKLCH?

O OKLCH descreve as cores por luminosidade, croma e tom num espaço percetualmente uniforme. É suportado pelo CSS moderno e facilita paletas coerentes.

Vai precisar de mais capacidades no futuro?

Ferramentas premium, limites mais altos e acesso por API estão nos nossos planos. A V1 continua gratuita e privada no seu navegador.