Conversor de cores

Converte cores entre HEX, Formatos RGB e HSL

Escolha uma cor

Ou insira os valores abaixo

HEX

RGB

HSL

Compreensão Formatos de cores

As cores digitais podem ser representadas em vários formatos, cada um com vantagens diferentes. Esta ferramenta converte perfeitamente entre os três formatos de cores da web mais comuns: HEX, RGB e HSL. Todos o processamento acontece no seu navegador – suas escolhas de cores nunca são rastreadas ou armazenadas.

#️⃣ HEX (Hexadecimal)

Formato: #RRGGBB (6 caracteres) ou #RGB (abreviação de 3 caracteres)
Exemplo: #2563EB ou #F00 (vermelho)
Melhor para: CSS, atributos HTML, ferramentas de design. Formato mais compacto para desenvolvimento web.

🔴🟢🔵 RGB (vermelho, verde, azul)

Formato: rgb(R, G, B) onde cada valor é 0-255
Exemplo: rgb(37, 99, 235)
Melhor para: Funções CSS, manipulação de cores JavaScript, programática geração de cores. Fácil de entender como mixagem leve.

🌈HSL (Matiz, Saturação, Luminosidade)

Formato: hsl(H, S%, L%) onde H é 0-360°, S e L são 0-100%
Exemplo: hsl(221, 83%, 53%)
Melhor para: Criando esquemas de cores, ajustando brilho/saturação. A maioria intuitivo para a percepção humana.

Casos de uso comuns

Estilo CSS: Converter entre formatos para diferentes propriedades CSS e compatibilidade do navegador
Design Handoff: Traduzir cores de ferramentas de design (geralmente HEX) para formatos compatíveis com código
Esquemas de cores: Use HSL para criar variações (ajustar a luminosidade para estados de foco)
Acessibilidade: Calcular contraste proporções usando valores RGB
Diretrizes da marca: Cores do documento em vários formatos para diferentes casos de uso

Dicas rápidas sobre teoria das cores

Criando Estados de foco

Use HSL: diminua a luminosidade em 10-15% para efeitos de foco mais escuros ou aumente para efeitos mais claros uns. Muito mais fácil do que calcular alterações RGB.

Garantindo Contraste

Para conformidade com WCAG AA, o texto precisa de uma taxa de contraste de 4,5:1. Diferenças de leveza HSL de 40%+ geralmente atendem a esse requisito.

Perguntas frequentes

Qual formato devo usar em CSS?

Todos os três funcionam em navegadores modernos. HEX é o mais comum e compacto. Use RGB/HSL quando precisar transparência (rgba() ou hsla()) ou manipulação dinâmica de cores.

O que significa # em HEX quer dizer?

O símbolo # indica um valor de cor hexadecimal. É obrigatório em CSS, mas geralmente opcional em ferramentas de projeto. Os 6 caracteres a seguir representam Vermelho, Verde e Azul na base 16 (00-FF = 0-255).

Como funciona o HSL Hue?

Matiz é um grau na roda de cores: 0° = Vermelho, 60° = Amarelo, 120° = Verde, 180° = Ciano, 240° = Azul, 300° = Magenta, 360° = de volta ao Vermelho. Facilita a seleção de cores complementares (180° à parte) intuitivo.

Posso adicionar transparência?

Sim! Use rgba(R, G, B, A) ou hsla(H, S%, L%, A) onde A é 0-1. CSS moderno também suporta HEX de 8 caracteres: #RRGGBBAA.

Referência de cores CSS

                            /* HEX */

                            color: #2563EB;

                            /* RGB */

                            color: rgb(37, 99, 235);

                            /* HSL */

                            color: hsl(221, 83%, 53%);

                            /* With transparency */

                            color: rgba(37, 99, 235, 0.5);

                            color: hsla(221, 83%, 53%, 0.5);