Entendendo Modelos de Cores
Existem três principais modelos de cores usados no design digital. O HEX(#RRGGBB) é o mais popular na web — cada par de caracteres hexadecimal representa a intensidade de vermelho (RR), verde (GG) e azul (BB), de 00 a FF. É compacto e amplamente suportado em CSS, tornando-o o padrão para desenvolvedores front-end.
O RGB(Red, Green, Blue) usa valores de 0 a 255 para cada canal de cor, representando a mesma informação que HEX em formato decimal. O HSL(Hue, Saturation, Lightness) é mais intuitivo para designers: a matiz (0-360°) define a cor, a saturação (0-100%) a intensidade e a luminosidade (0-100%) o brilho. HSL é ideal para criar variações de uma mesma cor ajustando apenas luminosidade ou saturação.
As cores web-safeeram 216 cores que funcionavam uniformemente em monitores antigos (8-bit). Hoje são obsoletas com displays de 24-bit e 32-bit, mas o conceito de acessibilidadepermanece crucial. O padrão WCAG(Web Content Accessibility Guidelines) exige contraste mínimo de 4.5:1para texto normal e 3:1para texto grande (acima de 18px), garantindo legibilidade para pessoas com baixa visão.
Dicas para Escolha de Cores
- Use HEX para CSS e URLs — é o formato mais compacto e universalmente suportado.
- Use HSL para explorar variações de uma cor — ajuste luminosidade para tons mais escuros ou claros.
- Verifique sempre o contraste com ferramentas WCAG antes de usar cores em texto sobre fundo.
- A paleta gerada automaticamente mostra variações de luminosidade da cor selecionada — clique para copiar.
- Cores complementares (opostas no círculo cromático) criam contraste visual forte e dinâmico.
- Para acessibilidade, nunca use apenas cor para transmitir informação — adicione ícones ou texto auxiliar.
Perguntas Frequentes
Qual modelo de cor devo usar no CSS?
HEX é o mais comum e compacto (ex: #3b82f6). RGB e HSL também funcionam: rgb(59,130,246) e hsl(217,91%,60%). Prefira HEX para simplicidade e HSL quando precisar ajustar brilho ou saturação programaticamente.
O que significam as 5 barras de cor abaixo?
São variações de luminosidade da cor selecionada — da mais clara à mais escura. Cada barra é uma opção de tom complementar, ideal para criar hierarquia visual com tons da mesma família cromática.
Como verificar contraste para acessibilidade?
Use ferramentas como WebAIM Contrast Checker ou Chrome DevTools. Cole os códigos HEX de foreground e background. O resultado deve ser no mínimo 4.5:1 para texto normal e 3:1 para texto grande.
Posso compartilhar a cor selecionada?
Sim! O botão "Compartilhar" copia um link com a cor selecionada. Em dispositivos móveis com Web Share API, abre o menu de compartilhamento nativo do sistema operacional.
A exação de cores pode variar entre monitores e dispositivos. Para cores críticas em material impresso, utilize perfis de cor ICC e faça provas físicas antes da produção final.