Texto grande, 24 px
Texto normal de 15 px. Um pequeno jabuti xereta viu dez cegonhas felizes.
Converta HSL em código HEX: hsl(210, 100 %, 50 %) é #0080FF, um azul-celeste puro. HSL é prático para pensar ao desenhar, e HEX é o que a maioria dos guias de estilo e ferramentas pede, então converta uma vez e copie.
Como usar
- Toque na amostra grande para abrir o seletor, use o conta-gotas para capturar uma cor da tela ou digite em qualquer campo.
- Cole qualquer cor CSS (#hex, rgb(), hsl(), hwb(), oklch(), lab(), um nome…) em um campo ou em qualquer lugar da página.
- Toque no botão de copiar ao lado de um formato. Arraste Opacidade para adicionar transparência.
- Na paleta, toque em uma amostra para usá-la; mantenha pressionado (ou clique direito) para copiar o HEX. Em Contraste, defina texto e fundo e toque numa sugestão para corrigir uma combinação reprovada.
- A WCAG 2.1 pede 4,5:1 para texto normal (AA) e 7:1 para AAA. Texto grande (24 px, ou 18,66 px em negrito) precisa de 3:1 para AA e 4,5:1 para AAA. Componentes de interface e gráficos, 3:1.
- As sugestões mantêm matiz e saturação e mudam só a luminosidade (em OKLCH) até o valor mais próximo que passa.
- Cores semitransparentes são mescladas ao fundo antes do cálculo.
- Os valores CMYK são uma conversão simples; para impressão, use o perfil de cor da gráfica.
- Suas cores recentes ficam salvas apenas neste navegador.
Os formatos de cor
HEX é o código de seis dígitos usado em CSS e ferramentas de design: #1E88E5 significa vermelho 1E (30), verde 88 (136) e azul E5 (229). RGB escreve os mesmos valores em decimal, de 0 a 255. HSL descreve matiz (0–360°), saturação e luminosidade, o que facilita escurecer ou suavizar uma cor. HSV é o modelo da maioria dos quadros de seleção.
OKLCH é um formato CSS mais novo baseado no espaço perceptual Oklab: passos iguais de luminosidade parecem igualmente diferentes, por isso é ótimo para escalas e paletas acessíveis. CMYK descreve a cobertura de tinta na impressão; aqui é uma conversão simples, sem perfil, então para cores exatas use o perfil da sua gráfica.
Converter à mão
Para passar de HEX a RGB, divida o código em três pares e converta cada um da base 16: #FF6347 dá 255, 99, 71. Para CMYK a partir de RGB: K = 1 − máx(R, G, B) / 255, depois C = (1 − R/255 − K) / (1 − K), e o mesmo para M e Y; o laranja puro rgb(255, 165, 0) é cmyk(0 %, 35 %, 100 %, 0 %). A ferramenta faz tudo na hora e aceita nomes, rgb(), hsl(), hwb(), lab() e oklch().
Montar uma paleta
Tons claros misturam a cor com branco e tons escuros com preto, gerando passos para fundos, bordas e estados de hover. Paletas harmônicas giram o matiz: complementar (180°), análogas (±30°), tríade (120°) e tétrade (passos de 90°). As cores recentes ficam salvas só neste navegador.
Perguntas frequentes
Como converter HEX para RGB?
Cole o código HEX em qualquer campo e copie o valor RGB. À mão, divida o código em pares e converta cada um do hexadecimal: #1E88E5 é rgb(30, 136, 229).
Como pegar uma cor da tela?
Toque no conta-gotas e clique em qualquer ponto da tela. Funciona em navegadores com a API EyeDropper, como Chrome e Edge no computador.
O que é OKLCH e para que serve?
OKLCH é um formato de cor CSS com luminosidade, croma e matiz baseado no modelo Oklab. Mudando só a luminosidade, você obtém passos uniformes que mantêm o matiz, o que o HSL não faz.
Os valores CMYK servem para impressão?
São uma conversão matemática sem perfil de cor. A cor impressa depende do papel, da tinta e da máquina, então para cores de marca use os valores CMYK do perfil da sua gráfica.
Dá para adicionar transparência?
Sim. Arraste Opacidade e todos os formatos se atualizam: o HEX ganha um par alfa (#RRGGBBAA) e as funções CSS um valor alfa.
Meu histórico de cores fica salvo?
As cores recentes ficam só neste navegador, no seu aparelho. Nada é enviado a um servidor.