Color Picker
- Escolha a cor pelo seletor visual ou digite um valor em qualquer um dos formatos.
- Os quatro formatos são exibidos ao mesmo tempo: HEX, RGB, HSL e oklch.
- Copie o formato que o seu projeto usa.
HEX e RGB descrevem a mesma coisa de formas diferentes: a intensidade de vermelho, verde e azul. São diretos para a máquina e pouco intuitivos para quem cria uma paleta — não há como olhar dois valores HEX e saber se um é mais claro que o outro.
HSL separa matiz, saturação e luminosidade. Isso torna possível criar variações de forma previsível: mesma matiz com luminosidade diferente gera uma escala de tons.
oklch faz o mesmo, mas em um espaço perceptualmente uniforme. É a diferença que importa na prática.
Em HSL, luminosidade 50% não significa o mesmo brilho aparente em cores diferentes. Um amarelo com 50% parece muito mais claro que um azul com 50%, porque o olho humano é mais sensível ao verde e ao amarelo.
A consequência prática é conhecida: uma paleta montada variando a luminosidade em HSL sai visualmente irregular, e degradês passam por zonas acinzentadas no meio.
oklch corrige isso porque foi construído sobre um modelo de percepção humana. Luminosidade igual em oklch significa brilho aparente igual, independentemente da matiz. Paletas ficam consistentes e degradês ficam limpos sem ajuste manual.
É por isso que oklch entrou nas especificações de CSS e vem sendo adotado em sistemas de design.
Nenhum formato garante legibilidade sozinho. Texto precisa de contraste suficiente em relação ao fundo, e isso se mede pela razão de contraste, não pela diferença entre os valores da cor.
A referência usual exige razão de ao menos 4,5 para 1 em texto normal e 3 para 1 em texto grande.
Cuidado frequente: uma cor de marca bonita pode ser ilegível como texto. Nesse caso ela funciona melhor como fundo, borda ou elemento gráfico do que como cor de leitura.
- Informe a cor em HEX ou em RGB. A conversão é bidirecional e imediata.
- O sinal de cerquilha é opcional na entrada em HEX.
- Formatos aceitos: #RGB de três dígitos, #RGBA de quatro, #RRGGBB de seis e #RRGGBBAA de oito com canal alfa.
São a mesma informação em notações diferentes. Cada canal — vermelho, verde e azul — vai de 0 a 255, o que cabe exatamente em dois dígitos hexadecimais.
Por isso #FF0000 e rgb(255, 0, 0) são idênticos: FF em hexadecimal é 255 em decimal.
A forma curta de três dígitos é uma abreviação em que cada dígito é duplicado. #F00 vira #FF0000, e #ABC vira #AABBCC. Ela só consegue representar cores em que os dois dígitos de cada canal são iguais — 4.096 combinações contra os 16,7 milhões da forma completa.
Dois dígitos extras no fim do HEX representam a opacidade, também de 0 a 255. #FF000080 é vermelho com aproximadamente 50% de opacidade.
Em RGB, o alfa é expresso de 0 a 1 na notação rgba(). A conversão entre as duas escalas divide por 255, então nem todo valor tem correspondência exata — 0.5 vira 128, que devolve 0,5 arredondado.
A forma curta de quatro dígitos segue a mesma regra de duplicação: #F008 equivale a #FF000088.
- HEX é mais compacto e é o formato dominante em folhas de estilo e ferramentas de design.
- RGB permite manipular canais por variável em CSS, útil para gerar variações de opacidade a partir de uma cor base.
- HSL é mais intuitivo para criar paleta, porque separa matiz, saturação e luminosidade.
- oklch é o mais recente e trabalha em espaço perceptualmente uniforme, o que torna os degradês e as variações de luminosidade mais naturais aos olhos.
Perguntas frequentes
HEX continua sendo o mais comum e é suficiente para cores fixas. Para gerar variações programaticamente, oklch dá resultados mais previsíveis que HSL.
Porque a luminosidade em HSL não corresponde ao brilho percebido. Amarelo e azul com a mesma luminosidade parecem muito diferentes ao olho. Em oklch essa distorção não existe.
É suportado pelos navegadores atuais. Para compatibilidade com versões antigas, declare uma cor de fallback antes da regra em oklch.
Meça a razão de contraste com o fundo. A referência pede ao menos 4,5 para 1 em texto normal. A diferença entre os valores da cor não indica isso.
Não. Toda a conversão acontece no seu navegador.
Nenhuma no resultado. A forma curta duplica cada dígito, então #FFF equivale a #FFFFFF. Ela só existe para cores em que os dois dígitos de cada canal coincidem.
Acrescente dois dígitos no fim, de 00 para totalmente transparente a FF para opaco. #00000080 é preto com cerca de metade da opacidade.
Porque as escalas são diferentes: alfa vai de 0 a 1 em RGB e de 0 a 255 em HEX. 0.5 corresponde a 128, que em hexadecimal é 80.
Não. #ff0000 e #FF0000 são a mesma cor. A escolha é só de estilo de escrita.
Não. A conversão acontece no seu navegador.