Conversor de cores

O formato hexadecimal representa uma cor como seis dígitos em base 16 (0–9, A–F), agrupados em três pares: vermelho, verde e azul. Por exemplo, #FF0000 é vermelho puro. É o formato mais comum em HTML e CSS.

RGB (Red, Green, Blue) descreve uma cor usando três valores numéricos entre 0 e 255, um por canal. rgb(255, 0, 0) é vermelho puro. O CSS também suporta rgba(), que adiciona um canal de opacidade (alfa).

HSL representa a cor em termos de Hue (matiz, 0–360°), Saturation (saturação, 0–100%) e Lightness (luminosidade, 0–100%). É o formato mais intuitivo para ajustar cores manualmente, pois suas dimensões correspondem à forma como percebemos as cores.

Use HEX para cores fixas de marca (variáveis CSS ou design tokens). Use RGB/RGBA quando precisar de opacidade dinâmica. Use HSL ao criar paletas ou variar matiz/saturação/luminosidade programaticamente — por exemplo, em temas ou geração de variantes de cor.

OKLCH é um espaço de cor perceptualmente uniforme introduzido no CSS Color Level 4. Ao contrário do HSL, cores com o mesmo valor L (luminosidade) parecem igualmente brilhantes para o olho humano, tornando a criação de paletas acessíveis e harmoniosas muito mais previsível. Seus três valores são: L (luminosidade, 0–1), C (croma, aprox. 0–0,4) e H (matiz, 0–360°). Chrome, Firefox e Safari já o suportam com a função oklch().

O canal alfa define a opacidade de uma cor, de 0 (totalmente transparente) a 1 (totalmente opaco). Em CSS usa-se rgba(255, 0, 0, 0.5) ou a notação hexadecimal de 8 dígitos #FF000080. Também é possível separar a opacidade da cor com a propriedade opacity. A diferença principal: rgba() torna apenas aquela cor transparente, sem afetar os elementos filhos; opacity aplica a transparência a todo o elemento e seu conteúdo.

O contraste de cor é a diferença de luminância relativa entre duas cores — geralmente texto e fundo. A WCAG 2.1 exige uma relação mínima de 4,5:1 para texto normal (nível AA) e 3:1 para texto grande (18pt ou 14pt negrito). Um contraste insuficiente torna a leitura difícil para pessoas com baixa visão ou daltonismo. O ratio pode ser medido diretamente no painel de acessibilidade do Chrome ou com o verificador de contraste da WebAIM.

Designers web e UI/UX o usam diariamente para converter cores entre HEX, RGB, HSL e HSB ao trabalhar com CSS, Figma, Sketch ou Adobe XD — cada ferramenta tem seu formato preferido. Desenvolvedores front-end precisam dele para aplicar cores com precisão em CSS e Tailwind, e para entender quais valores numéricos correspondem a uma cor visual. Designers gráficos e de branding o consultam para transferir paletas de marca entre softwares (Illustrator, Canva, Photoshop) e garantir que a cor seja idêntica em todos os formatos. Designers de impressão o usam para converter entre RGB (tela) e os valores equivalentes mais próximos antes de exportar para CMYK. Especialistas em acessibilidade o empregam para obter valores precisos de luminosidade e verificar a proporção de contraste de acordo com as diretrizes WCAG 2.1.

No computador, pressione Ctrl + D (Windows/Linux) ou Cmd + D (Mac) no Chrome, Firefox ou Edge para adicionar esta página aos favoritos instantaneamente. No Safari para Mac, use Cmd + D ou acesse Favoritos → Adicionar favorito. No celular com Chrome (Android), toque no menu de três pontos (⋮) e escolha «Adicionar à tela inicial» ou «Adicionar aos favoritos». No celular com Safari (iPhone/iPad), toque no botão de compartilhar (□↑) e depois em «Adicionar à tela inicial». Com ela nos favoritos, da próxima vez que encontrar um valor HEX em um design e precisar do RGB para o CSS, já estará a um clique.