Softonic

Conversor de HSL para RGB

Etapa 1 / 3
Próximo

Designers especificam cores em HSL porque é mais natural para as pessoas, mas o Photoshop, bibliotecas de imagem e muitos conjuntos de ícones precisam de RGB. Insira um triplo HSL, matiz em graus, saturação e luminosidade em porcentagens, e esta ferramenta retorna os valores de canal RGB correspondentes com uma prévia ao vivo da cor, para você alternar entre seus design tokens e suas ferramentas gráficas.

Como converter HSL em RGB

  1. 1

    Insira o triplo HSL

    Matiz 0-360°, saturação 0-100%, luminosidade 0-100%. Digite os três valores nos campos, sem a sintaxe `hsl(...)`.

  2. 2

    Leia os canais RGB

    O resultado mostra a string `rgb(r, g, b)` com três números inteiros entre 0 e 255.

  3. 3

    Prévia da cor

    Uma amostra ao vivo mostra a cor resultante, com os valores dos canais R, G e B abaixo.

  4. 4

    Use os valores

    Copie a string `rgb(r, g, b)` ou os valores individuais dos canais para o seu CSS ou software de design.

A fórmula de HSL para RGB

A especificação do Módulo de Cores CSS define o algoritmo de conversão na seção “HSL para RGB”. Escrito passo a passo, são quatro etapas.

O algoritmo

Com H entre 0 e 360, S entre 0 e 1 e L entre 0 e 1:

  1. C = (1 − |2L − 1|) × S
  2. X = C × (1 − |((H / 60) mod 2) − 1|)
  3. m = L − C/2
  4. Escolha um (R', G', B') conforme o sextante de 60° em que H se encontra, adicione m e escale para 0-255.

Mapeamento de sextantes

Faixa de H (R’, G’, B’)
0-60° (C, X, 0)
60-120° (X, C, 0)
120-180° (0, C, X)
180-240° (0, X, C)
240-300° (X, 0, C)
300-360° (C, 0, X)

Conversões de referência

HSL RGB HEX
hsl(0, 100%, 50%) (255, 0, 0) #FF0000
hsl(120, 100%, 50%) (0, 255, 0) #00FF00
hsl(240, 100%, 50%) (0, 0, 255) #0000FF
hsl(0, 0%, 50%) (128, 128, 128) #808080
hsl(210, 79%, 50%) (27, 127, 228) #1B7FE4

Armadilhas

  • Com 0% de saturação, HSL é sempre um cinza; o matiz é irrelevante.
  • Com 100% de luminosidade, HSL é branco independentemente do matiz ou da saturação; com 0%, é preto.
  • No Módulo de Cores CSS 4, hsl() também pode ser escrito separado por espaços com alfa opcional: hsl(210 79% 50% / 0.5).

Perguntas frequentes

Arredondamento. HSL é armazenado como números reais, mas RGB usa inteiros de 8 bits, então hsl(210, 50%, 50%) arredonda para (64, 127, 191) ou (64, 128, 191) dependendo da implementação. A diferença é imperceptível.

Não, digite as três componentes separadamente: matiz no primeiro campo (0-360), saturação e luminosidade em porcentagem nos outros dois. Um valor CSS como hsl(210, 79%, 50%) corresponde a matiz 210, saturação 79% e luminosidade 50%.

HSL usa luminosidade (50% = matiz puro, 100% = branco). HSB/HSV usa valor (100% = matiz puro, sem extremidade branca). Os seletores de cor do Photoshop e do Figma costumam mostrar HSB; CSS usa HSL.

HSL em CSS assume o espaço sRGB. Em monitores de ampla gama, o navegador ainda renderiza HSL como valores sRGB, então a cor é consistente em monitores padrão. Para saída de ampla gama, use funções do Módulo de Cores CSS 4 como color(display-p3 ...).

Ferramentas relacionadas

Gerador de Cartão CSS

Crie o CSS de um contêiner de cartão: fundo, borda, raio dos cantos, espaçamento interno e sombra suave, com pré-visualização imediata e código para copiar e colar.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Gerador de Configuração Nginx

Gere blocos de servidor Nginx com TLS, HTTP/2, gzip, cache de navegador e regras de proxy reverso a partir de um formulário simples.

Ferramenta disponível em outros idiomas