Seletor de Cor HSL
Cor
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.
- 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
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Gerador de CSS Box Shadow
Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Gerador de Paleta de Cores
Crie paletas harmoniosas a partir de uma cor base em seis esquemas.
Verificador de Contraste de Cor
Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.