Conversor de Cores

Converta entre formatos HEX, RGB e HSL.

Pick a color

HEX

RGB

HSL

Quando Usar Cada Formato

HEX funciona melhor para folhas de estilo CSS, ferramentas de design como Figma ou Sketch, e compartilhar cores em um formato compacto.

RGB é ideal para CSS com transparência (rgba), software de edição de imagens e manipulação dinâmica de cores em código.

HSL é útil para criar paletas de cores ajustando saturação e luminosidade mantendo o matiz constante, criar estados hover e entender relacionamentos de cores intuitivamente.

Formato de Cor Explicado

HEX é uma representação hexadecimal (base-16) de 6 dígitos. Cada par representa Vermelho, Verde, Azul. #FF0000 = vermelho puro, #00FF00 = verde puro, #0000FF = azul puro.

RGB usa três valores de 0-255 para os canais Vermelho, Verde, Azul. rgb(255, 0, 0) = vermelho. Valores podem ser misturados: rgb(128, 0, 128) = roxo.

HSL usa Matiz (0-360°), Saturação (0-100%), Luminosidade (0-100%). Matiz é a posição na roda de cores, Saturação é intensidade, Luminosidade vai do preto ao branco.

Fundamentos da Teoria das Cores

Entender como as cores funcionam juntas ajuda você a fazer melhores escolhas de design. Aqui estão os fundamentos que todo designer deve conhecer.

Cores complementares ficam opostas na roda de cores. Vermelho e verde, azul e laranja, amarelo e roxo. Elas criam alto contraste e tensão visual, úteis para botões de chamada para ação ou destacar elementos importantes.

Cores análogas são vizinhas na roda. Azul, azul-verde e verde se sentem harmônicos juntos. Funcionam bem para criar designs coesos que parecem calmos e profissionais.

Esquemas triádicos usam três cores igualmente espaçadas ao redor da roda. Oferecem forte contraste visual mantendo equilíbrio. Pense nas cores primárias ou secundárias como exemplos.

Acessibilidade de Cores

Cerca de 8% dos homens e 0,5% das mulheres têm alguma forma de daltonismo. Projetar com acessibilidade em mente significa que mais pessoas podem usar seu trabalho.

Diretrizes WCAG recomendam uma razão de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Você pode verificar razões de contraste com ferramentas de desenvolvedor do navegador ou verificadores de acessibilidade dedicados.

Nunca dependa apenas da cor para transmitir informações. Adicione ícones, padrões ou rótulos de texto junto com codificação de cores. Vermelho e verde juntos são particularmente problemáticos pois parecem similares para muitos usuários daltônicos.

Teste seus designs com simuladores de daltonismo. Chrome DevTools tem um integrado na aba Rendering.

Usando Cor em CSS

CSS moderno oferece múltiplas formas de trabalhar com cor. Propriedades personalizadas CSS (variáveis) permitem definir cores uma vez e reutilizá-las em toda sua folha de estilos. As novas funções de cor oklch() e lch() fornecem espaços de cor perceptualmente uniformes, significando que uma mudança de luminosidade de 10% parece a mesma em todos os matizes. Para transparência, rgba() e hsla() adicionam um canal alfa. Ao escolher um formato, HEX continua sendo o mais amplamente suportado, mas HSL facilita criar variações de cor programáticas.

Cores de Referência Rápida

#FFFFFF White

#000000 Black

#FF0000 Red

#00FF00 Green

#0000FF Blue

#FFFF00 Yellow

#00FFFF Cyan

#FF00FF Magenta