Por que HSL ao invés de RGB?

HSL mapeia pra como designers pensam: matiz (qual cor), saturação (quão vívida), luminosidade (quão brilhante). Pra ajustar só um eixo — "mesma cor, um pouco mais escura" — só move um slider. A mesma mudança em RGB exige tocar nos três canais.

O que significa o HEX de 8 dígitos?

Quando alpha cai abaixo de 100%, o HEX se estende pra `#RRGGBBAA`. Os últimos dois dígitos hex codificam o canal alpha (00 = transparente, FF = opaco). Navegadores modernos e ferramentas de design suportam.

Por que luminosidade 50, não 100, é o mais saturado?

Em HSL, luminosidade 0% é preto puro e 100% é branco puro — ambos matam saturação. A renderização mais saturada de qualquer matiz fica em 50% de luminosidade.

Seletor de Cor HSL

Seletor com sliders pra HSL, o modelo de cor com que a maioria dos designers CSS pensa. Cada trilho visualiza o que o slider varia — fácil ver como saturação 0 fica no seu matiz atual, ou como luminosidade vai de preto pra sua cor pra branco. Saída em HEX (com alpha opcional de 8 dígitos), `rgb()` / `rgba()`, `hsl()` / `hsla()` e wrapper de valor arbitrário Tailwind.

—

Pré-visualização

Matiz200°

Saturação75%

Luminosidade50%

Alpha100%

Saídas

HEX#209FDF
RGBrgb(32, 159, 223)
HSLhsl(200, 75%, 50%)
Tailwind[color:#209fdf]

Como usar

Arraste os sliders. O painel grande reflete a cor atual; tabuleiro aparece quando alpha abaixo de 100%.
Aperte Random pra inspiração — escolhe saturação e luminosidade razoáveis, não neon puro.
Copie o formato que precisar pro seu CSS ou classe utility Tailwind.

Perguntas frequentes

Por que HSL ao invés de RGB?: HSL mapeia pra como designers pensam: matiz (qual cor), saturação (quão vívida), luminosidade (quão brilhante). Pra ajustar só um eixo — "mesma cor, um pouco mais escura" — só move um slider. A mesma mudança em RGB exige tocar nos três canais.
O que significa o HEX de 8 dígitos?: Quando alpha cai abaixo de 100%, o HEX se estende pra `#RRGGBBAA`. Os últimos dois dígitos hex codificam o canal alpha (00 = transparente, FF = opaco). Navegadores modernos e ferramentas de design suportam.
Por que luminosidade 50, não 100, é o mais saturado?: Em HSL, luminosidade 0% é preto puro e 100% é branco puro — ambos matam saturação. A renderização mais saturada de qualquer matiz fica em 50% de luminosidade.

Ferramentas relacionadas

Conversor de Formatos de Cor

Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.

Cor 0 0

Gerador de Cores Aleatórias

Gere uma grade de cores aleatórias em HEX, RGB ou HSL — escolha quantas, copie qualquer valor com um clique e regenere na hora para se inspirar.

Aleatório 0 0

Conversor de comprimento de onda para cor (nm → sRGB)

Converte um comprimento de onda em nanômetros (380–780 nm — o espectro visível) em uma cor sRGB aproximada, com barra de gradiente arco-íris clicável e linhas de absorção de Fraunhofer do espectro solar real como referência.

Cor 0 0

Conversor de cor CMYK ↔ RGB (espaço de cor de impressão)

Converte entre cores RGB/hex de tela e porcentagens CMYK para impressão, com estratégias de geração de preto Simples, GCR (Substituição de componente cinza) e UCR (Remoção de cor sob), pré-visualização de separação de canais e leitura de cobertura total de tinta.

Cor 0 0

Paleta de Cores Tailwind

Paleta padrão completa do Tailwind CSS — 22 matizes × 11 tons, 50 até 950 — clique pra copiar como classe Tailwind, HEX ou rgb().

Cor 0 0

Comparador de Brilho de Cor (HSL vs Lab L* vs WCAG vs HSP)

Compare sete métricas de brilho diferentes — Luminosidade HSL, Valor HSV, Luminância Relativa WCAG (LRV), L* CIE Lab (claridade perceptual), Luma Rec. 709, Brilho Percebido HSP e média ingênua (R+G+B)/3 — para uma ou duas cores lado a lado, com deltas mostrando por que uma cor 'mais clara' pode parecer mais escura.

Cor 0 0