O Conversor de Cor traduz a mesma cor entre os três formatos que a web usa —HEX, RGB e HSL— em simultâneo. Escreve a cor em qualquer um deles (ou escolhe-a com o seletor) e obtém de imediato as suas equivalências exatas, com uma pré-visualização e um botão para copiar cada valor. Tudo acontece no seu navegador: nada é enviado para nenhum servidor.

1. Escreva uma cor no campo «Cor» no formato #rrggbb, rgb(r,g,b) ou hsl(h,s%,l%).
2. Ou prima o quadrado de cor à esquerda para a escolher visualmente com o seletor do seu sistema.
3. O resultado aparece só após uma breve pausa: a pré-visualização e os três valores equivalentes.
4. Prima o ícone de copiar junto de qualquer valor para o levar para a área de transferência.
5. Se o formato não for reconhecido, o campo marca-se a vermelho com uma dica dos formatos válidos.

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.

À 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.

Clica no ícone de copiar junto a cada valor para o levares para a área de transferência.

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.