Sobre esses formatos de cor
HEX e RGB são os formatos padrão para telas e CSS - HEX é compacto (#3B82F6), RGB é explícito sobre cada canal (0-255). HSL (matiz, saturação, luminosidade) e HSV (matiz, saturação, valor/brilho) descrevem a cor de um jeito mais parecido com o que as pessoas pensam - mais fácil para escolher um tom ou uma variação do mesmo matiz. CMYK (ciano, magenta, amarelo, preto) é para impressão, onde a cor é criada misturando tinta em vez de emitir luz.
O que esta ferramenta faz
O conversor de cores mostra uma cor em cinco notações ao mesmo tempo: HEX, RGB, HSL, HSV e CMYK. Digite um código hex, informe valores RGB, arraste os controles ou escolha uma das 148 cores nomeadas do CSS, e todos os formatos se atualizam na hora.
Cada linha tem seu próprio botão de copiar e está escrita em sintaxe pronta para CSS, como rgb(59, 130, 246) ou hsl(217, 91%, 60%). A conversão acontece inteiramente no seu navegador.
Quando usar
- Levar uma cor da marca de um arquivo de design em HEX para código CSS, Android ou iOS que espera RGB ou HSL.
- Criar um tom mais claro ou mais escuro da mesma cor mudando só a luminosidade no HSL.
- Verificar se um texto sobre uma cor continua legível com o Verificador de Contraste de Cor.
- Montar a paleta de um design system e documentar cada cor em todas as notações de que os desenvolvedores possam precisar.
Exemplo prático
#3B82F6
rgb(59, 130, 246) · hsl(217, 91%, 60%) · hsv(217, 76%, 96%) · cmyk(76%, 47%, 0%, 4%)
#FF6347 (tomato)
rgb(255, 99, 71) · hsl(9, 100%, 64%) · hsv(9, 72%, 100%) · cmyk(0%, 61%, 72%, 0%)
Perguntas sobre esta ferramenta
Por que o CMYK só se aproxima das cores de impressão?
Telas misturam luz e impressoras misturam tinta, e cada impressora e papel se comporta de um jeito. Os valores CMYK são uma conversão matemática, então peça à gráfica um valor baseado em perfil quando a cor exata importar.
Qual a diferença entre HSL e HSV?
Os dois começam com matiz e saturação. O HSL usa a luminosidade, em que 100% é sempre branco, e o HSV usa o valor ou brilho, em que 100% é a versão mais viva da cor. Ferramentas de design costumam usar HSV; o CSS usa HSL.
Ele aceita transparência?
A opacidade não faz parte desses cinco formatos aqui. No CSS, acrescente-a como quarto valor, por exemplo rgb(59 130 246 / 50%), ou como dois dígitos hex extras, #3B82F680.
Esta ferramenta é gratuita?
Sim, é grátis. Sem cadastro nem e-mail. Veja o resultado nesta página.
Como recebo o resultado?
Use a ferramenta nesta página. O resultado aparece aqui, sem envio por e-mail.