Se você já tentou criar um site, criar um logotipo ou imprimir um cartão de visita, imediatamente se deparou com a confusa sopa de letrinhas de códigos de cores: HEX, RGB, HSL e CMYK. Por que existem tantas maneiras de descrever um simples tom de azul?
A verdade é que computadores e impressoras “vêem” a luz de maneiras fundamentalmente diferentes. Além disso, a forma como os computadores processam a luz não é necessariamente a forma como o cérebro humano interpreta as cores. Compreender esses formatos não é apenas teoria – isso evitará que você implante sites com taxas de contraste inacessíveis ou pague milhares de dólares por folhetos de marketing que são impressos com uma aparência turva e escura.
Luz Aditiva vs Subtrativa
Antes de mergulhar no código, devemos estabelecer a diferença física entre telas e papel.
- As telas emitem luz (Aditivo). Se você desligar todos os pixels, a tela ficará preta. Para tornar o branco, uma tela dispara luz vermelha, verde e azul com intensidade máxima.
- O papel reflete a luz (Subtrativo). Um pedaço de papel em branco já é branco (reflete toda a luz). Para tornar o preto, uma impressora coloca tinta ciano, magenta e amarela uma sobre a outra para absorver toda a luz.
1. RGB (vermelho, verde, azul)
RGB é o idioma nativo do monitor do seu computador. Ele define uma cor informando à tela exatamente quanta luz vermelha, verde e azul deve ser emitida. Cada canal é representado por um número inteiro de 0 (desligado) a 255 (intensidade máxima).
Por exemplo, vermelho puro é rgb(255, 0, 0). Branco puro é rgb(255, 255, 255).
Melhor para: edição de imagens (Photoshop) e fotografia digital. Ele manipula diretamente pixels de hardware.
2. HEX (Hexadecimal)
Códigos HEX, como #FF5733, são exatamente iguais a RGB. A única diferença é a matemática. Em vez de usar números de base 10 (0-255), ele usa números hexadecimais de base 16 (00 a FF). As duas primeiras letras ditam Vermelho, as duas do meio Verde e as duas últimas Azul.
Por que os desenvolvedores web usam HEX? Porque é mais curto. Escrever #FFF é muito mais rápido para um desenvolvedor CSS do que escrever rgb(255, 255, 255).
Ideal para: codificação de cores de marca em CSS. É conciso e facilmente copiado e colado entre ferramentas de design como Figma e editores de código.
Converta códigos de cores instantaneamente
Não perca tempo fazendo contas hexadecimais de cabeça. Use nossa ferramenta off-line para traduzir instantaneamente entre HEX, RGB, HSL e CMYK com uma visualização visual.
Abra o conversor de cores3. HSL (matiz, saturação, luminosidade)
RGB e HEX são terríveis para os humanos. Se eu mostrar o código #4A90E2, você não conseguirá adivinhar facilmente de que cor ele é. Se eu pedir para você "tornar aquele azul 20% mais escuro", fazer as contas em HEX será quase impossível.
HSL foi projetado para cérebros humanos. Ele define as cores em uma roda de cores de 360 graus.
- Matiz (0-360): A cor real. 0 é Vermelho, 120 é Verde, 240 é Azul.
- Saturação (0-100%): Quão intensa é a cor. 0% é cinza, 100% é vibrante.
- Luminosidade (0-100%): quão escuro ou claro é. 0% é preto, 100% é branco.
Se o azul da sua marca for hsl(210, 100%, 50%) e você quiser um tom mais escuro para o efeito de foco do botão, basta alterar o último número: hsl(210, 100%, 40%). É mágico para a arquitetura CSS.
4. CMYK (ciano, magenta, amarelo, chave/preto)
CMYK é puramente para o mundo físico. Ele determina como uma impressora mistura tinta física. Como a tinta absorve luz, o espaço de cores é fisicamente menor que o RGB. Existem verdes neon vibrantes que uma tela pode emitir (em RGB) e que uma impressora fisicamente não consegue imprimir (em CMYK).
A Regra de Ouro: Nunca envie um arquivo RGB para uma impressora comercial. A impressora irá convertê-lo à força para CMYK, fazendo com que suas cores vibrantes pareçam turvas e desbotadas. Sempre converta seus designs para CMYK antes de enviá-los para a gráfica.
Matriz de Comparação
| Format | Environment | Readability | Primary Use Case |
|---|---|---|---|
| HEX | Digital | Low | Standard web design, copying from Figma |
| RGB | Digital | Medium | Manipulating alpha transparency (rgba) |
| HSL | Digital | High | Dynamic CSS theming, Dark Modes |
| CMYK | Physical Print | N/A | Business cards, flyers, packaging |
Perguntas frequentes (FAQ)
Qual formato devo usar para um modo escuro CSS?
Sempre use HSL para temas dinâmicos. Ao manter o Matiz e a Saturação constantes, você pode simplesmente inverter o valor da Luminosidade para traduzir perfeitamente uma cor do modo claro em uma cor do modo escuro.
Posso usar CMYK em um site?
Não. Os navegadores da Web entendem apenas formatos de cores baseados em luz (RGB, HEX, HSL). Se você carregar um JPEG CMYK em um site, alguns navegadores tentarão renderizá-lo, mas as cores aparecerão quebradas ou invertidas.
O que é um canal alfa?
O “A” em RGBA ou HSLA significa Alpha, que controla a transparência. Um alfa de 1,0 é totalmente sólido, enquanto 0,5 é 50% transparente. CSS moderno agora permite transparência diretamente em códigos HEX, adicionando dois dígitos extras (por exemplo, #FFFFFF80).