O que é e para que serve
Designers e programadores lidam o tempo todo com cores em formatos diferentes: HEX para CSS, RGB para código, HSL quando é preciso ajustar tonalidade e luminosidade de forma intuitiva. Esse conversor traduz entre os três formatos em tempo real e mostra uma prévia visual da cor, para conferir se o resultado é mesmo o esperado.
Como usar
1. Digite um código HEX (como #f4b400), ou preencha os campos de RGB, ou os de HSL. 2. Os outros dois formatos são atualizados automaticamente. 3. A prévia da cor aparece ao lado, atualizada a cada mudança. 4. Use o botão de copiar para levar o valor pronto para o CSS.
Como funciona o cálculo
RGB descreve uma cor pela quantidade de vermelho, verde e azul (0 a 255 cada). HSL descreve a mesma cor por matiz (0 a 360°), saturação e luminosidade (ambas em porcentagem), o que costuma ser mais intuitivo para criar variações de uma cor — escurecer, clarear ou dessaturar sem perder o tom original. HEX é apenas RGB escrito em base 16, dois dígitos por canal.
A conversão entre RGB e HSL segue as fórmulas padrão do modelo de cor HSL definido no CSS Color Module; não há perda de precisão relevante entre os formatos para uso em design de interface.
Perguntas frequentes
Qual a diferença entre RGB e HSL?
RGB descreve a cor pela mistura de luz vermelha, verde e azul. HSL descreve pela matiz (o tom em si), saturação e luminosidade, o que facilita criar variações mais claras ou escuras de uma mesma cor.
Como descobrir o RGB de um código HEX?
Cole o código HEX no campo correspondente; o RGB equivalente aparece automaticamente nos três campos ao lado.
A ferramenta aceita HEX de 3 dígitos, como #fff?
Sim, o formato abreviado de 3 dígitos é expandido automaticamente para o equivalente de 6 dígitos.