FAQ do Conversor de cores (HEX, RGB, HSL)
Como converter HEX para RGB?
Para converter um código de cor hex para RGB, divida a string hex de seis dígitos #RRGGBB em três pares e converta cada par de hexadecimal (base-16) para decimal (base-10).
Exemplo: #FF5733
FF= 255 (Vermelho)57= 87 (Verde)33= 51 (Azul)- Resultado:
rgb(255, 87, 51)
Para hex abreviado (#F53), expanda cada dígito em um par primeiro: #F53 vira #FF5533. Os dígitos são duplicados: F expande para FF, 5 expande para 55, 3 expande para 33.
O hex de oito dígitos (#RRGGBBAA) funciona da mesma forma, mas com um par extra para o canal alfa. #FF573380 adiciona 80 (128, ou cerca de 50% de opacidade) para o canal alfa.
Para conversões instantâneas, use nosso conversor de cores. Ele lida com todos os formatos, incluindo hex curto e longo, com e sem alfa.
Qual é a diferença entre RGB e RGBA?
O RGB define uma cor usando os canais vermelho, verde e azul. RGBA é o RGB com um canal Alfa adicional que controla a opacidade. O valor alfa varia de 0.0 (totalmente transparente) a 1.0 (totalmente opaco).
rgb(255, 0, 0) /* Vermelho totalmente opaco */
rgba(255, 0, 0, 0.5) /* Vermelho com 50% de opacidade */
No CSS moderno (CSS Color Level 4), o alias rgba() não é mais necessário. A função rgb() agora aceita um canal alfa opcional:
rgb(255 0 0 / 0.5) /* Sintaxe moderna, vermelho com 50% de opacidade */
Todos os navegadores modernos suportam essa sintaxe. A função legada rgba() funciona em todos os lugares e não será removida, mas usar rgb() com a sintaxe de barra é a abordagem recomendada para código novo.
Como converter RGB para HSL?
Converter RGB para HSL envolve três etapas:
- Normalizar os valores RGB para a faixa 0-1 (dividir por 255)
- Encontrar o mínimo e o máximo dos três valores normalizados — a média entre mínimo e máximo é a luminosidade (L)
- Calcular a matiz e a saturação com base em qual canal é o máximo e na diferença entre máximo e mínimo
A fórmula varia dependendo de qual canal de cor domina:
- Se o vermelho é o máximo: matiz = (verde - azul) / (máx - mín)
- Se o verde é o máximo: matiz = 2 + (azul - vermelho) / (máx - mín)
- Se o azul é o máximo: matiz = 4 + (vermelho - verde) / (máx - mín)
- A saturação depende da luminosidade: se L > 0.5, saturação = (máx - mín) / (2 - máx - mín), caso contrário saturação = (máx - mín) / (máx + mín)
A matemática é não trivial e fácil de errar, então usar uma ferramenta de conversão de cores é recomendado para resultados instantâneos.
Por que minhas cores parecem diferentes em telas diferentes?
A aparência das cores varia entre telas por vários motivos:
Calibração da tela — A maioria das telas de consumo não é calibrada por cor. Os padrões de fábrica variam amplamente em brilho, contraste e temperatura de cor.
Diferenças de gama de cores — Telas diferentes suportam faixas de cores diferentes. sRGB é o padrão da web, mas muitos celulares e laptops modernos suportam DCI-P3 (25% mais ampla). Uma cor fora da gama sRGB parece correta em uma tela de ampla gama, mas é cortada ou deslocada em uma tela padrão.
Tecnologia de exibição — Telas OLED produzem pretos mais profundos e cores mais saturadas do que telas LCD. Painéis IPS têm melhor precisão de cor do que painéis TN.
Ângulo de visão — As cores mudam quando vistas de um ângulo, especialmente em telas de baixo custo.
Brilho e luz ambiente — Uma tela a 50% de brilho em uma sala escura parece diferente da mesma tela a 100% de brilho sob luz solar direta.
Para minimizar as diferenças: trabalhe no espaço de cores sRGB, calibre seu monitor com um calibrador de hardware e teste seus designs em vários dispositivos antes de publicar.
Para que serve o modelo de cores HSL?
HSL (Matiz, Saturação, Luminosidade) é ideal para manipulação programática de cores. Sua principal vantagem é que um canal carrega a informação de "cor" (a matiz), enquanto os outros dois controlam a aparência de forma independente do valor da matiz.
O que o HSL torna fácil:
- Paletas de cores — Mantenha a mesma matiz, varie a luminosidade e a saturação para criar uma escala de cores completa
- Estados de hover e ativo — Mude a luminosidade em uma porcentagem fixa:
hsl(220, 80%, 50%)->hsl(220, 80%, 60%) - Modo escuro — Reduza a luminosidade de todas as cores: subtraia 30% da luminosidade de cada cor
- Temas — Troque os valores de matiz para gerar esquemas de cores totalmente novos a partir da mesma estrutura de saturação/luminosidade
- Estados desabilitados — Reduza a saturação para dessaturar elementos:
hsl(220, 80%, 50%)->hsl(220, 30%, 70%)
Para o que o HSL não é bom:
O HSL não é perceptualmente uniforme. Duas cores com o mesmo valor de luminosidade (por exemplo, hsl(60, 100%, 50%) — amarelo brilhante e hsl(240, 100%, 50%) — azul puro) têm brilhos percebidos muito diferentes. Para manipulação de cores perceptualmente uniforme, use OKLCH.
O que significa o # nas cores hex?
O prefixo # (cerquilha ou jogo da velha) informa ao parser de CSS que os caracteres seguintes representam um valor de cor hexadecimal. É a notação padrão em CSS e HTML para códigos de cores hex.
O formato completo é #RRGGBB ou #RRGGBBAA:
| Componente | Significado | Exemplo (#FF5733) |
|-----------|-------------|---------------------|
| # | Prefixo hex | Indicador obrigatório |
| RR | Canal vermelho | FF (255) |
| GG | Canal verde | 57 (87) |
| BB | Canal azul | 33 (51) |
Em HTML, o # também é usado para links de âncora (<a href="#section">), mas em um contexto de CSS ou no atributo style, ele sempre indica uma cor hex. O HTML também suporta as "cores nomeadas" legadas (140 nomes predefinidos como red, blue, rebeccapurple) que não exigem o #.
O que é gama de cores e por que isso importa?
Gama de cores é a faixa de cores que um dispositivo pode exibir ou que um espaço de cores pode representar. Pense nela como o "vocabulário" de cores disponível para uma tela ou formato de arquivo.
Gamas de cores comuns, da menor para a mais ampla:
| Espaço de Cores | Tamanho Relativo | Onde é Usado | |-------------|------------------|--------------| | sRGB | Linha de base | Padrão da web, maioria dos monitores, todos os navegadores | | Adobe RGB | ~50% mais ampla | Fotografia profissional, impressão | | DCI-P3 | ~25% mais ampla | Celulares modernos, Macs, muitos laptops | | Rec. 2020 | ~75% mais ampla | Televisão HDR, telas de alto padrão |
Por que isso importa: Uma cor fora da gama de uma tela não pode ser exibida com precisão. O dispositivo cortará a cor para o valor mais próximo dentro da gama ou a aproximará. É por isso que um vermelho profundo vibrante em um arquivo de design pode parecer sem graça ou turvo em uma tela de laptop padrão.
Para design web: sempre projete em sRGB ou verifique se suas cores são seguras para sRGB. O OKLCH e o espaço de cores display-p3 permitem atingir gamas mais amplas, mas você deve fornecer um fallback sRGB para telas padrão.
Qual é a diferença entre hex e hex com alfa?
O hex padrão (#FF5733) usa seis dígitos e não tem canal alfa — a cor é sempre totalmente opaca. O hex com alfa (#FF573380) usa oito dígitos, adicionando dois dígitos hex extras no final para o canal alfa (opacidade).
Valores alfa em hex:
| Par Hex | Decimal | Opacidade |
|----------|---------|-----------|
| 00 | 0 | Totalmente transparente |
| 80 | 128 | ~50% de opacidade |
| FF | 255 | Totalmente opaco |
Exemplos:
#FF5733 — Laranja-avermelhado sólido, sem transparência
#FF5733FF — Mesma cor, totalmente opaco (FF redundante)
#FF573380 — Mesma cor, 50% transparente
#FF573300 — Mesma cor, completamente invisível
Também existe o hex abreviado de quatro dígitos com alfa: #F538 expande para #FF553388 (50% de opacidade).
Suporte de navegadores: O hex de oito dígitos é suportado em todos os navegadores modernos. Para suporte a navegadores legados (Internet Explorer), use rgba().
Como escolher cores acessíveis para o meu site?
Siga este processo passo a passo para construir um sistema de cores acessível:
1. Comece com uma cor de marca primária. Escolha uma matiz que represente sua marca e, em seguida, use HSL ou OKLCH para criar uma escala completa, do muito claro (fundos) ao muito escuro (texto).
2. Defina seu texto como quase preto. O texto do corpo sobre fundos brancos deve ser de #1A1A1A a #333333. Nunca use preto puro (#000000) sobre branco puro — isso causa cansaço visual para alguns leitores. Cinza escuro sobre branco oferece melhor legibilidade.
3. Verifique cada par de primeiro plano e fundo. Cada combinação de texto e fundo deve atender aos padrões WCAG:
- Texto normal: mínimo de 4.5:1 (WCAG AA)
- Texto grande: mínimo de 3:1 (WCAG AA)
- Busque 7:1 no texto do corpo (WCAG AAA)
4. Nunca use cor como único diferenciador. Links devem ter sublinhado (não apenas uma cor diferente). Estados de erro devem incluir ícones ou texto. Gráficos devem usar padrões ou rótulos.
5. Teste com simuladores de daltonismo. A deuteranopia (vermelho-verde) é o tipo mais comum. Garanta que seu design funcione sem percepção de cores.
6. Verifique em escala de cinza. Se o seu design perder o significado quando convertido para escala de cinza, você está dependendo demais da cor para transmitir informações.
Use nosso conversor de cores para verificar instantaneamente as proporções de contraste entre quaisquer duas cores.