Softonic

Conversor de RGB para HSL

Etapa 1 / 2 HSL
Resultados

HSL (matiz, saturação, luminosidade) é o espaço de cor que os designers usam quando querem ajustar uma cor sem mudar seu caráter. Mude a luminosidade para obter um tom ou sombra mantendo a mesma matiz; mude a saturação para atenuar ou intensificar sem mudar para azul ou vermelho. Este conversor transforma valores RGB em HSL na hora, com uma amostra de cor ao vivo para você ver a cor enquanto digita.

Como a conversão funciona

  1. 1

    Insira RGB

    Cada canal de 0 a 255. A ferramenta normaliza para 0–1 internamente.

  2. 2

    Encontre os canais máximo e mínimo

    A luminosidade é o ponto médio; a saturação é a amplitude; a matiz é derivada de qual canal é dominante.

  3. 3

    Calcule H, S, L

    H em graus (0–360), S e L como porcentagens (0–100%).

  4. 4

    Use no CSS

    hsl(220, 80%, 50%) é um azul saturado de média luminosidade, diretamente utilizável por qualquer navegador moderno.

Os três canais HSL

  • Matiz (H), posição na roda de cores, 0–360°. Vermelho em 0, amarelo 60, verde 120, ciano 180, azul 240, magenta 300.
  • Saturação (S), cinza a cor pura, 0–100%. 0 é cinza, 100 é vívido.
  • Luminosidade (L), preto a branco, 0–100%. 0 é sempre preto, 100 é sempre branco, 50 é a matiz pura na máxima cromaticidade.

Referência rápida

RGB HSL
255, 0, 0 hsl(0, 100%, 50%)
0, 255, 0 hsl(120, 100%, 50%)
0, 0, 255 hsl(240, 100%, 50%)
255, 255, 0 hsl(60, 100%, 50%)
128, 0, 128 hsl(300, 100%, 25%)
255, 165, 0 hsl(39, 100%, 50%)
100, 149, 237 hsl(219, 79%, 66%)

Por que HSL é melhor para ajuste de cores

Criar uma paleta de cores em RGB é doloroso, clarear o vermelho (255, 0, 0) adicionando verde e azul igualmente resulta em rosa (255, 128, 128), não um vermelho mais claro. HSL separa a luminosidade da matiz, então:

  • Variante mais escura, mesma H e S, L mais baixa.
  • Variante atenuada, mesma H e L, S mais baixa.
  • Complementar, H + 180, mesma S e L.
  • Análoga, H ± 30, mesma S e L.

Truques de CSS

  • Defina uma paleta com variáveis CSS contendo H, S, L como números separados. Então hsl(var(--h), var(--s), var(--l)) permite que você tema substituindo um canal de cada vez.
  • color-mix() agora permite que você misture no espaço HSL sem conversão manual.
  • A nova sintaxe hsl(H S L) é separada por espaços; a sintaxe legada hsl(H, S, L) ainda é suportada.

Armadilhas

  • Luminosidade 0 é sempre preto, 100 sempre branco. Não importa a matiz. Isso é útil, mas não intuitivo a partir do RGB.
  • A cromaticidade máxima está em L = 50. Aumente L acima de 50 e a cor fica mais clara; acima de 80 é principalmente branca, independentemente de H.
  • A luminosidade perceptual não é L. Um amarelo em L=50 parece mais brilhante que um azul em L=50 porque os olhos humanos são mais sensíveis ao amarelo. Para uniformidade perceptual, use LCh ou OKLab.

HSL vs HSV

Eles não são a mesma coisa. A luminosidade de 100% do HSL é puro branco; o “valor” de 100% do HSV é a matiz pura. Isso significa:

  • hsl(120, 100%, 50%) = hsv(120, 100%, 100%) = verde puro.
  • hsl(120, 100%, 100%) = branco.
  • hsv(120, 100%, 100%) = verde puro.

Use HSL quando você se importa com “quão próximo do branco”; use HSV quando você se importa com “quão brilhante antes de ir para o branco”.

Perguntas frequentes

Sim. Todos os navegadores implementaram HSL em 2010; é um dos recursos de cor CSS mais estáveis.

HSL vai do preto à matiz até o branco à medida que a luminosidade aumenta. HSV vai do preto à matiz à medida que o valor aumenta, com a saturação controlando a cor em relação ao branco. Forma diferente, caso de uso diferente.

Sim. hsla(220, 80%, 50%, 0.5) na sintaxe legada, ou hsl(220 80% 50% / 0.5) no CSS moderno.

Porque a luminosidade é matemática, não perceptual. Um amarelo com “50% de luminosidade” é visualmente mais brilhante que um azul com “50% de luminosidade”. Para uniformidade perceptual, use OKLCh ou LCh.

Sim, dentro da precisão de ponto flutuante. RGB ↔ HSL faz a conversão de ida e volta de forma limpa porque ambos são representações de 3 canais do mesmo gamut sRGB.

Ferramentas relacionadas

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

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.

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 README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Ofuscador de JavaScript

Ofusque JavaScript com codificação de array de strings, renomeação de variáveis, achatamento de fluxo de controle e injeção de código morto para proteção do front-end.

Ferramenta disponível em outros idiomas