Conversor de Codigos de Cor

Cores no desenvolvimento web podem ser especificadas em multiplos formatos: hex, RGB, HSL e cores nomeadas. Esta ferramenta converte entre todos os formatos, exibe uma pre-visualizacao visual, calcula razoes de contraste para acessibilidade e gera paletas de cores complementares.

Especificacoes

• CSS Color Level 4
• WCAG 2.1 Contrast

Casos de Uso Comuns

• Converter cores hex fornecidas pelo designer para HSL para manipulacao mais facil
• Verificar se a cor do texto atende aos padroes de acessibilidade WCAG
• Gerar paletas de cores para design de interface
• Depurar valores de cor CSS que nao estao renderizando como esperado
• Encontrar o equivalente hex de cores nomeadas CSS

Funcionalidades

• Analisar hex (#RGB, #RRGGBB, #RRGGBBAA), RGB, RGBA, HSL, HSLA e cores nomeadas
• Converter entre todos os formatos de cor instantaneamente
• Saida HEX8 (hex de 8 digitos com alfa)
• Pre-visualizacao visual da cor com alternancia de fundo escuro/claro
• Pre-visualizacao de texto de exemplo em fundos branco e preto
• Calcular razao de contraste WCAG contra preto e branco
• Classificacao de cor clara/escura
• Gerar paletas de cores complementares, analogas, triadicas, tetradicas e monocromaticas
• Mostrar luminancia e recomendacoes de acessibilidade

Exemplos

#3B82F6

rgba(59, 130, 246, 0.8)

hsl(217, 91%, 60%)

steelblue

Dicas

• HSL e frequentemente mais facil de trabalhar: H e a cor, S e a vibrancia, L e o brilho.
• Para texto acessivel, mire em pelo menos 4.5:1 de razao de contraste (WCAG AA).
• O formato hex de 8 digitos (#RRGGBBAA) inclui transparencia alfa.
• CSS4 introduz novos espacos de cor como oklch() para melhor uniformidade perceptual.

Entendendo Conversor de Codigos de Cor

Valores de cor CSS definem cores para estilizacao web usando varios sistemas de notacao. O mais comum e hexadecimal (#RRGGBB), onde cada par de digitos hex representa os canais vermelho, verde e azul de 00 (0) a FF (255). A forma abreviada #RGB dobra cada digito (#F00 equivale a #FF0000). A forma de 8 digitos #RRGGBBAA adiciona um canal de transparencia alfa.

Notacoes funcionais fornecem especificacao de cor mais intuitiva. RGB (rgb(255, 0, 0)) especifica canais como inteiros de 0-255 ou percentuais. HSL (hsl(0, 100%, 50%)) usa matiz (roda de cores de 0-360 graus), saturacao (0-100%) e luminosidade (0-100%), que muitos designers consideram mais intuitivo para criar paletas de cores e ajustar cores. Tanto RGB quanto HSL suportam transparencia alfa com rgba() e hsla() ou a sintaxe moderna rgb(255 0 0 / 50%).

Acessibilidade de cores e uma preocupacao critica no desenvolvimento web. WCAG 2.1 define razoes de contraste minimas: 4.5:1 para texto normal (Nivel AA), 3:1 para texto grande e 7:1 para contraste aprimorado (Nivel AAA). Contraste insuficiente torna o texto dificil ou impossivel de ler para usuarios com baixa visao ou deficiencias de visao de cores.

CSS tambem suporta 148 cores nomeadas (como rebeccapurple, cornflowerblue, tomato), a palavra-chave currentColor e espacos de cor mais novos como HWB (matiz-brancura-negritude), LAB, LCH e OKLCH que fornecem manipulacao de cor perceptualmente uniforme. Os espacos mais novos sao particularmente uteis para gerar paletas de cores harmoniosas e gradientes suaves.

Hex (#FF0000) e RGB (rgb(255,0,0)) ambos especificam valores de canal vermelho, verde e azul — hex usa base-16 enquanto RGB usa inteiros decimais. HSL (hsl(0,100%,50%)) representa cor usando matiz (a cor em si em uma roda de 0-360 graus), saturacao (intensidade) e luminosidade (brilho), que muitos desenvolvedores consideram mais intuitivo para criar variacoes. Todos os tres formatos podem representar as mesmas cores, mas HSL torna simples produzir variantes mais claras, mais escuras ou mais suaves ajustando um unico valor.

O canal alfa controla a transparencia em uma escala de 0 (totalmente transparente) a 1 (totalmente opaco). Na notacao hex, alfa e adicionado como dois digitos adicionais — #FF000080 representa vermelho com 50% de transparencia (80 hex = 128 decimal). Na notacao funcional, a sintaxe e rgba(255,0,0,0.5) ou a forma moderna rgb(255 0 0 / 50%). Transparencia alfa e essencial para sobreposicoes, marcas d'agua e elementos de interface em camadas. Para conformidade WCAG, o Nivel AA requer uma razao de contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande (18px+ negrito ou 24px+ regular), enquanto o Nivel AAA requer 7:1 para texto normal e 4.5:1 para texto grande. Elementos nao textuais como icones, bordas e controles de formulario precisam de pelo menos 3:1 de contraste contra cores adjacentes.

LAB e OKLCH sao espacos de cor perceptualmente uniformes onde mudancas numericas iguais produzem diferencas de cor visualmente iguais, tornando-os superiores para gerar paletas e gradientes suaves. OKLCH (Luminosidade, Croma, Matiz) e particularmente util em CSS porque ajustar a luminosidade produz resultados naturais e previsiveis. Ambos sao suportados em CSS moderno com as funcoes oklch() e lab().