O Conversor de Cor traduz uma cor entre os formatos da web —HEX, RGB, HSL e os modernos OKLCH e OKLab— ao mesmo tempo. Aceita a cor tal como a copias: com vírgulas ou espaços, com transparência, com um nome (tomato) ou como o DevTools a der. Dá ainda uma escala de tons da mesma cor. Tudo acontece no teu navegador.

1. Escreve ou cola uma cor: #1a2b3c, #1a2b3c80, rgb(26 43 60 / 50%), hsl(210deg 40% 17%), oklch(62.8% 0.258 29.2) ou um nome CSS.
2. Ou escolhe-a com o seletor de cor à esquerda.
3. Aparecem a pré-visualização e a cor nos cinco formatos; o ícone de copiar leva cada um para a área de transferência.
4. Em baixo, a escala de tons: clica num para o tornar a cor atual.

HEX (hexadecimal) é o formato padrão de CSS e design web. Começa por # e leva três pares de dígitos hexadecimais (0-9, a-f) para vermelho, verde e azul, cada par de 00 a ff (0 a 255 em decimal). Exemplo: #1a2b3c. Aceita também a forma curta de 3 dígitos #abc, que se expande duplicando cada um (#abc equivale a #aabbcc). O # é opcional ao escrever.

RGB descreve a cor pelas suas três componentes de luz: Vermelho, Verde e Azul, cada uma de 0 a 255. Escreve-se rgb(r,g,b). Exemplo: rgb(26, 43, 60). É o modelo aditivo dos ecrãs: rgb(0,0,0) é preto e rgb(255,255,255) é branco.

HSL descreve a cor de forma mais intuitiva para o olho: Matiz (Hue, 0-360° na roda de cor: 0 vermelho, 120 verde, 240 azul), Saturação (0-100%, de cinzento a cor pura) e Luminosidade (Lightness, 0-100%, de preto a branco). Escreve-se hsl(h,s%,l%). Exemplo: hsl(210, 40%, 17%). É ideal para clarear, escurecer ou dessaturar uma cor sem mudar o seu matiz. O símbolo % é opcional ao escrever.

OKLCH descreve a cor com L (luminosidade, 0–100 %), C (croma, quanta cor) e H (tom, 0–360°), como o HSL, mas com uma diferença que importa: o seu L é a claridade que o olho percebe. Em HSL, hsl(60 100% 50%) (amarelo) e hsl(240 100% 50%) (azul) têm o mesmo L e o amarelo parece muito mais claro; em OKLCH, mesmo L = mesma claridade percebida. Por isso serve para criar paletas e escalas coerentes. Já quase todos os navegadores o entendem (oklch() em CSS). Algumas cores OKLCH não cabem no sRGB (a gama de um ecrã normal): é avisado e mostra-se a mais próxima.

Onze tons da mesma cor, de muito claro a muito escuro, distribuídos por luminosidade OKLCH e com o mesmo tom. Se numa luminosidade a cor não cabe no sRGB, baixa-se a croma o mínimo necessário em vez de cortar canais (o que mudaria o tom). O assinalado é o mais parecido com a tua cor. Servem para fundos, contornos e estados da mesma cor de marca.

À esquerda do campo há um seletor de cor nativo do seu sistema: prima-o para escolher uma cor com a roda ou paleta do seu navegador e o campo preenche-se sozinho em formato HEX. O quadro de pré-visualização sobre os resultados mostra a cor final tal como é, para verificar de relance que é a que procura.

Cada valor —HEX, RGB e HSL— tem à direita um ícone de copiar. Ao clicares nele, o valor completo e já formatado (p. ex. rgb(26, 43, 60)) vai para a área de transferência e o ícone mostra um ✓ por um instante como confirmação.

Na barra de ferramentas tem Reiniciar (esvazia o campo), Exportar (descarrega um .json com a cor e as suas equivalências) e Importar (recupera uma cor guardada). Além disso, a última cor que escreveu é lembrada automaticamente e reaparece da próxima vez que abrir a ferramenta.