Conversor de código de cor

Sobre: Conversor de código de cor

O conversor de código de cor transforma uma cor nos três formatos mais usados na web: HEX (#FF8800), RGB (rgb(255, 136, 0)) e HSL (hsl(32, 100%, 50%)). Digite um código em qualquer um deles, ou escolha uma cor, e copie o formato de que precisa para CSS, uma ferramenta de design ou código.

Ele também verifica o contraste. Digite uma cor de texto e uma cor de fundo para ver a taxa de contraste WCAG e se elas passam nos níveis AA e AAA para texto normal e grande, para que o seu texto seja legível para todos.

Tudo roda no seu navegador; nada do que você digita é enviado para lugar nenhum.

Como usar

1. Digite um código de cor como #777, rgb(0 128 255) ou hsl(120, 50%, 50%), ou use o seletor de cor.
2. Veja a cor em HEX, RGB e HSL ao lado da pré-visualização.
3. Clique em Copiar ao lado do formato que você quer.
4. Para o contraste, digite uma cor de texto (ou deixe vazio para usar a cor acima) e uma cor de fundo.
5. Veja a taxa de contraste e os resultados AA e AAA para texto normal e grande.

Recursos

• HEX, RGB e HSL: Lê HEX curto e longo, rgb() e hsl() com vírgulas ou espaços, e três números soltos.
• Seletor de cor: Escolha uma cor visualmente e receba os códigos dela na hora.
• Taxa de contraste: A taxa de contraste WCAG 2 de quaisquer duas cores, de 1:1 a 21:1.
• AA e AAA: Passa ou não passa para texto normal e grande nos dois níveis.
• Erros claros: Diz qual parte do código está errada, como um valor de vermelho acima de 255.

Exemplos

Limitações e observações

• Cores com transparência (alfa), como #FF000080 ou rgba(), não são compatíveis.
• Nomes de cores (red, blue), CMYK, LAB e outros espaços de cor não são convertidos.
• Os valores HSL são arredondados para números inteiros, então ao converter de volta um canal pode mudar alguns pontos.
• A verificação de contraste segue a WCAG 2.x; ela não avalia por você o peso e o tamanho da fonte nem o daltonismo.

Perguntas frequentes