Converta uma cor entre HEX, RGB, HSL, HSV e CMYK com sincronia ao vivo nos dois sentidos, no seu navegador.
Toda cor numa tela é a mesma coisa física — uma quantidade de luz vermelha, verde e azul — mas quem faz design, quem programa e quem imprime descreve essa cor em idiomas diferentes. O HEX é compacto e universal no CSS; o RGB são os dados brutos dos canais; HSL e HSV descrevem uma cor do jeito que uma pessoa pensa nela, como um matiz mais o quanto ele é vívido e o quanto é claro; o CMYK descreve as quatro tintas que uma impressora deposita no papel. Este conversor guarda uma cor na memória e a mostra nos cinco idiomas de uma vez.
Internamente, toda entrada é primeiro normalizada para RGB. A leitura do HEX expande a forma curta de três dígitos (#fff vira #ffffff) e ignora um par de alfa se você colar um. HSL e HSV usam o modelo padrão de croma: o croma vem da saturação combinada com a luminosidade ou o valor, um componente secundário vem da posição do matiz dentro do seu setor de 60°, e um deslocamento constante eleva o resultado ao brilho certo. O CMYK usa a conversão clássica de tela, em que o preto é um menos o maior canal e cada tinta é a distância restante até esse preto. O leitor é propositalmente tolerante — vírgulas, espaços, barras e sinais de porcentagem são todos opcionais, então rgb(255 0 0), 255,0,0 e #f00 chegam exatamente na mesma cor.
Usos típicos: transformar o HEX de uma marca no HSL que uma variável CSS quer, ler o RGB que uma ferramenta de design pede ou obter um CMYK aproximado para passar a uma gráfica. Esse último merece um aviso. CMYK na tela é sempre uma aproximação: a impressão real depende do perfil ICC da máquina, do conjunto de tintas e do papel, e cores vívidas de tela — sobretudo azuis e verdes intensos — não têm equivalente exato em tinta. Trate o CMYK daqui como um ponto de partida, não como uma prova de cor. Nada do que você digita é enviado: toda a conversão roda em JavaScript no seu dispositivo.
O HEX é a notação hexadecimal dos três bytes RGB. HSL → RGB: croma C = (1 − |2L − 1|) × S, secundário X = C × (1 − |(H/60) mod 2 − 1|), deslocamento m = L − C/2; a tripla (C, X, 0) é rotacionada conforme o setor de matiz de 60° e m é somado aos três canais. HSV → RGB usa C = V × S e m = V − C. RGB → CMYK: K = 1 − max(R, G, B) e cada tinta = (1 − canal − K) / (1 − K).
HEX com ou sem o # (#fff, #ffffff, 3498db), rgb() e rgba(), hsl() e hsla(), hsv() ou hsb(), cmyk() e cerca de trinta nomes de cores comuns do CSS, como red, teal ou crimson. Os separadores são flexíveis: vírgulas, espaços e barras funcionam.
Não — trate como uma aproximação. A conversão aqui é a fórmula padrão de tela e ignora perfis de cor, enquanto uma impressora de verdade usa um perfil ICC que depende da tinta, do papel e da máquina. Pergunte à sua gráfica qual perfil eles usam antes de fechar um valor.
Os dois partem do mesmo ângulo de matiz, mas descrevem o brilho de formas diferentes. No HSL, 50% de luminosidade é a cor pura e 100% é sempre branco; no HSV, 100% de valor é a cor pura e você só chega ao branco baixando a saturação. Ferramentas de design costumam expor HSV, enquanto o CSS usa HSL.
Ela lê o canal alfa e o descarta. Se você colar um HEX de 8 dígitos ou um valor rgba(), só a cor opaca é convertida — a transparência não é levada para os outros formatos.
Não. Toda conversão roda em JavaScript no seu dispositivo. Nada é enviado a um servidor, registrado ou armazenado.
O Vai.la transforma qualquer URL em um link curto com estatísticas de cliques, QR Code e seu próprio biolink.
O Vai.la não se responsabiliza pelo uso das ferramentas nem por decisões tomadas com base nos seus resultados.