Converter RGB para HSL
Converta valores de vermelho, verde e azul em matiz, saturação e luminosidade para ajustar cores com mais facilidade no CSS.
Entrada rgb
Resultado · HSL
hsl(344, 100%, 62%)
HEX
#FF3D72
RGB
rgb(255, 61, 114)
HSV
hsv(344, 76%, 100%)
CMYK
cmyk(0%, 76%, 55%, 0%)
Como usar: RGB para HSL
- 1
Insira uma cor
Digite um código de cor ou escolha uma cor com o seletor: cada campo aceita o formato que exibe.
- 2
Veja a conversão
O resultado é atualizado instantaneamente enquanto você digita, junto com uma pré-visualização da cor em tempo real.
- 3
Copie o código
Copie o valor de que precisa com um clique e cole-o no seu design, no seu CSS ou nas configurações de impressão.
RGB e HSL
O RGB monta uma cor a partir de três canais de luz, o que combina com telas, mas é difícil de ajustar à mão: deixar rgb(255, 61, 114) um pouco mais escuro significa mudar os três números. O HSL descreve a mesma cor como matiz, um ângulo na roda de cores de 0 a 360°, mais saturação e luminosidade em porcentagem, então esse rosa vira hsl(344, 100%, 62%).
Essa estrutura torna o HSL ideal para criar variações de tom e temas. Mantenha o matiz e a saturação e diminua a luminosidade para obter um estado de hover ou pressionado, aumente-a para um fundo levemente colorido ou reduza a saturação para uma versão mais suave. Todos os navegadores modernos aceitam hsl() no CSS, então você pode colar o resultado diretamente. O conversor arredonda os valores para números inteiros, então converter de volta pode deslocar um canal em um passo.
Tudo funciona localmente no seu navegador: suas imagens nunca são enviadas para um servidor.