Conversor de Cores
Converta uma cor entre HEX, RGB e HSL com pré-visualização.
Como usar Conversor de Cores
- Digite uma cor em HEX (#137256) ou RGB (rgb(19,114,86)).
- Copie o formato de que precisa.
Sobre Conversor de Cores
O CSS aceita a mesma cor em várias notações, e cada uma tem sua função. rgb(19, 114, 86) soletra os três canais em decimal, de 0 a 255. #137256 são esses mesmos números exatos na base 16, dois dígitos hexadecimais por canal — motivo pelo qual as duas formas são intercambiáveis, e pelo qual #abc se expande para #aabbcc. Ambas são aditivas: descrevem luz que uma tela emite, o oposto da impressão CMYK, onde cada tinta adicionada subtrai luz da página.
hsl() é a notação que vale a pena converter para. A matiz é um ângulo na roda de cores, a saturação é o quão vívida a cor é, a luminosidade é o quão clara — três números que você pode raciocinar separadamente. Um estado de hover é a mesma matiz com a luminosidade reduzida. Uma rampa de tons é uma matiz em vários níveis de luminosidade. Tente fazer isso a olho em RGB e você estará resolvendo três equações interligadas ao mesmo tempo. Se quiser uma rampa pronta, o gerador de tons faz isso, e o verificador de contraste dirá se o texto continua legível sobre o resultado.
Cole HEX (três ou seis dígitos, # opcional) ou um valor rgb() e receba os três formatos de volta com uma amostra ao vivo, atualizada enquanto você digita. rgba() é aceito, mas seu alfa é descartado. Entrada em HSL, hexadecimal de oito dígitos e cores nomeadas não são interpretados. Nada é enviado.
Perguntas frequentes
Quais formatos posso colar?
HEX com três ou seis dígitos, com o # opcional, além de valores rgb() e rgba(). Você sempre recebe HEX, RGB e HSL de volta.
Posso colar um valor HSL?
Não como entrada. O HSL é um formato de saída aqui, então comece a partir de um valor HEX ou RGB e leia o HSL no resultado.
O que acontece com o alfa numa cor rgba()?
Ele é ignorado. A ferramenta converte os três canais de cor e devolve valores HEX, RGB e HSL opacos.
Por que converter para HSL?
Porque isso separa a matiz da saturação e da luminosidade. Ajustar a luminosidade dá a você um estado de hover ou um tom que permanece na mesma família de cores, o que é muito mais fácil do que adivinhar novos números RGB.
#ABC é a mesma cor que #AABBCC?
Sim. O hexadecimal de três dígitos é pura abreviação — cada dígito é dobrado para produzir a forma de seis dígitos.