Como funciona o conversor de HSL para RGB
A conversão de HSL para RGB é usada em web design, programação visual e ferramentas gráficas. O modelo HSL representa cores com base em matiz, saturação e luminosidade. Já o modelo RGB trabalha com intensidades de vermelho, verde e azul. Converter de HSL para RGB é necessário quando você ajusta uma cor visualmente e precisa aplicá-la em sistemas que trabalham com RGB, como telas digitais ou formatos de imagem como PNG e JPG.
Como usar o conversor online de HSL para RGB
O processo de conversão é rápido e útil para desenvolvedores front-end e designers. Veja como usar:
- Informe os valores de H (0 a 360), S (0% a 100%) e L (0% a 100%).
- A ferramenta calcula os valores correspondentes de R, G e B.
- Use os valores RGB resultantes em códigos HTML, CSS, ou softwares gráficos.
Essa conversão permite representar a mesma cor em diferentes formatos compatíveis com telas digitais.
Fórmula de conversão de HSL para RGB
O cálculo depende da posição do matiz e do nível de saturação e luminosidade. A fórmula é baseada em interpolação de cores:
C = (1 - |2L - 1|) × S
X = C × (1 - |(H / 60) mod 2 - 1|)
M = L - C / 2
Os valores intermediários (R', G', B') variam conforme o intervalo do matiz. Depois, somam-se M a cada componente e multiplicam-se por 255.
Exemplos práticos de conversão
- HSL (0, 100%, 50%) → RGB (255, 0, 0)
- HSL (120, 100%, 50%) → RGB (0, 255, 0)
- HSL (240, 100%, 50%) → RGB (0, 0, 255)
- HSL (0, 0%, 50%) → RGB (128, 128, 128)
- HSL (60, 100%, 50%) → RGB (255, 255, 0)
Esses exemplos mostram como a matiz controla a cor base, enquanto saturação e luminosidade ajustam intensidade e brilho.
Tabela de conversão HSL para RGB
| HSL | RGB |
|---|---|
| (0, 100%, 50%) | (255, 0, 0) |
| (120, 100%, 50%) | (0, 255, 0) |
| (240, 100%, 50%) | (0, 0, 255) |
| (180, 50%, 50%) | (64, 191, 191) |
| (300, 100%, 25%) | (128, 0, 128) |
Perguntas frequentes
Por que usar HSL em vez de RGB?
O HSL permite modificar cor, brilho e saturação separadamente, tornando o controle mais intuitivo em animações e temas dinâmicos.
O modelo HSL é compatível com CSS?
Sim. Você pode usar diretamente no formato hsl(240, 100%, 50%) em propriedades CSS.
Como a conversão afeta a visualização?
A aparência da cor não muda. A conversão apenas transforma a representação, mantendo a mesma percepção visual.
Existe diferença entre HSL e HSB?
Sim. Ambos usam matiz, mas HSB (ou HSV) calcula brilho de forma diferente, sendo mais usado em gráficos 3D e engines de jogos.
Curiosidade: como o HSL melhora a acessibilidade visual?
Ajustar apenas a luminosidade no HSL permite criar variações de contraste sem alterar a cor base. Isso facilita a criação de interfaces acessíveis para diferentes condições de visão.