Conversor de cores

O que é um conversor de cores?

Um conversor de cores traduz valores de cor entre diferentes modelos de cor — HEX, RGB, HSL, HSV e CMYK. Designers e programadores precisam frequentemente de alternar entre formatos: o CSS usa HEX e RGB, as ferramentas de design usam muitas vezes HSL para seleção intuitiva de cores, e os fluxos de trabalho de impressão requerem CMYK. Esta ferramenta processa todas as conversões instantaneamente.

Cada modelo de cor representa as cores de forma diferente. O RGB (Vermelho, Verde, Azul) mistura luz — é usado para ecrãs. O CMYK (Ciano, Magenta, Amarelo, Preto) mistura tinta — é usado para impressão. O HSL (Matiz, Saturação, Luminosidade) descreve as cores da forma como os humanos as pensam — cor pura, vivacidade e brilho. O HEX é simplesmente o RGB escrito em hexadecimal.

Modelos de cor explicados

• HEX — um código hexadecimal de seis dígitos (#FF5733). Compacto e amplamente utilizado em desenvolvimento web.
• RGB — três valores (0-255) para vermelho, verde e azul. O modelo de cor nativo para ecrãs.
• HSL — matiz (0-360 graus), saturação (0-100%) e luminosidade (0-100%). Intuitivo para criar paletas de cores.
• HSV/HSB — semelhante ao HSL mas usa valor/brilho em vez de luminosidade. Comum em ferramentas de design gráfico.
• CMYK — quatro valores (0-100%) para ciano, magenta, amarelo e preto. Usado na produção gráfica.

Como utilizar esta ferramenta

Introduza um valor de cor em qualquer formato suportado e todas as outras representações são calculadas instantaneamente. Use o seletor de cores para seleção visual. A ferramenta mostra uma amostra de pré-visualização e os valores convertidos nos formatos HEX, RGB, HSL, HSV e CMYK, prontos para copiar e colar no seu código ou ferramenta de design.

Cores no desenvolvimento web

O CSS suporta múltiplos formatos de cor: hex (#ff5733), rgb(255, 87, 51), hsl(11, 100%, 60%) e cores com nome (tomato). O CSS moderno também suporta oklch() e oklab() para espaços de cor percetualmente uniformes. Ao escolher entre formatos, o HEX é mais compacto, o HSL é mais fácil de ajustar programaticamente (clarear aumentando L, dessaturar diminuindo S) e o RGB é o mais amplamente suportado.

Perguntas frequentes

Por que as cores parecem diferentes no ecrã e na impressão?

Os ecrãs emitem luz (RGB, mistura de cores aditiva) enquanto as impressoras usam tinta que absorve luz (CMYK, mistura subtrativa). A gama de cores RGB (intervalo de cores possíveis) é maior do que a CMYK, pelo que algumas cores vibrantes do ecrã não podem ser reproduzidas na impressão. É por isso que os designers devem trabalhar em CMYK ao criar materiais impressos e usar cores Pantone para correspondência crítica de cores.

Qual é a diferença entre HSL e HSV?

Ambos usam matiz e saturação, mas diferem no terceiro componente. A luminosidade do HSL varia de 0 (preto) passando por 0,5 (cor pura) até 1 (branco). O valor do HSV varia de 0 (preto) a 1 (brilho máximo). No HSL, uma saturação de 100% com luminosidade 50% dá a cor mais pura. No HSV, saturação 100% e valor 100% dá a cor mais pura. O HSL é geralmente mais intuitivo para web design.