Color Converter
HEX RGB HSL conversion
HEX RGB HSL conversion Executa localmente no seu navegador
#2563eb
rgb(37, 99, 235)
hsl(221, 83%, 53%)
About the
O Color Converter traduz uma única cor entre HEX, RGB, HSL e HSV e mostra a taxa de contraste WCAG em relação ao preto e branco para que você possa ver imediatamente se o texto nessa cor é legível. HEX e RGB são os formatos que você copia entre as ferramentas, mas HSL é o que é realmente útil para o trabalho de design: ele separa o matiz da luminosidade, para que você possa produzir uma tonalidade ou sombra que mantenha o mesmo matiz em vez de desviar para o cinza como faz a matemática RGB ingênua. Valores hexadecimais e rgba de oito dígitos carregam um canal alfa, e o conversor também lida com eles.
Where people use the
- Transformar o valor hexadecimal de uma marca na sintaxe rgb que uma ferramenta de design espera.
- Produzindo um conjunto consistente de tonalidades a partir de uma tonalidade de marca usando HSL.
- Verificando se a cor de um link é legível em um fundo escuro.
- Correspondência de uma cor escolhida em uma captura de tela com o valor hexadecimal mais próximo.
How to use the
- 1
Insira a cor em qualquer formato
Cole um valor hexadecimal, como 2f6fed, ou uma função rgb ou hsl, ou use o seletor. Os outros formatos são atualizados conforme você digita.
- 2
Leia todas as representações de uma vez
Hex, RGB, HSL e HSV são mostrados juntos com o canal alfa separado.
- 3
Verifique as taxas de contraste
As proporções em relação ao preto e branco informam se a cor pode ser usada como cor de texto ou como plano de fundo. O texto do corpo precisa de 4,5 para 1, o texto grande e as bordas da interface precisam de 3 para 1.
- 4
Copie o formulário que seu código precisa
Cada campo tem seu próprio botão de cópia, então você obtém exatamente a sintaxe que sua folha de estilo espera, em vez de reformatar manualmente.
Dicas e práticas recomendadas
- Ajuste a luminosidade em HSL em vez de adicionar branco ou preto em RGB; a tonalidade permanece intacta.
- Teste o contraste no menor tamanho em que o texto será realmente usado, e não no tamanho do título.
- Mantenha uma paleta documentada de cinco ou seis valores em vez de inventar uma nova por componente.
Perguntas frequentes
Como uma cor hexadecimal é convertida em RGB?
Cada par de dígitos hexadecimais é um canal, lido como base 16. Em 2f6fed, 2f é 47 vermelho, 6f é 111 verde e ed é 237 azul. A abreviação de três dígitos como f0a dobra cada dígito, tornando-se ff00aa.
Por que a luminosidade HSL não é igual ao brilho percebido?
Porque o olho é muito mais sensível ao verde do que ao azul. O azul puro e o amarelo puro podem compartilhar um valor de luminosidade, enquanto o amarelo parece muito mais brilhante. É por isso que o contraste deve ser medido com uma fórmula de luminância em vez de julgado a partir do número HSL.
O que significa o quarto par de dígitos em uma cor hexadecimal?
Alfa, de 00 totalmente transparente a ff totalmente opaco. Hexadecimal de oito dígitos é compatível com todos os navegadores atuais e é o equivalente hexadecimal de rgba.
A conversão CMYK é precisa para impressão?
Não, e nenhuma ferramenta de navegador pode ser. CMYK depende da tinta, do papel e do perfil da impressora. Use esse valor como ponto de partida e converta através do perfil ICC do seu fornecedor de impressão para qualquer coisa que seja importante.
Como escolho texto legível para um fundo colorido?
Compare a taxa de contraste entre a cor do texto e o fundo. Se nem o preto nem o branco atingirem 4,5 para 1, o fundo está muito saturado para o corpo do texto e precisa ser escurecido ou clareado antes de ser usado atrás da cópia.
Por que o mesmo hexadecimal parece diferente em duas telas?
Porque os monitores diferem em gama, calibração e brilho. Uma tela de ampla gama mostra cores saturadas que um painel sRGB padrão não consegue reproduzir. Trabalhe em sRGB, a menos que tenha um motivo específico para não fazê-lo.