Escolha uma cor ou insira valores em qualquer formato. Converte instantaneamente entre HEX, RGB e HSL com pré-visualização ao vivo e cópia com um clique.
Obtenha acesso à nossa suíte completa de ferramentas de SEO local, acompanhamento de rankings e otimização impulsionada por IA.
Inscreva-se GrátisCor é um dos elementos de design mais poderosos na web, e escolher o formato correto para seu CSS pode fazer uma diferença real na eficiência do fluxo de trabalho. Os três formatos de cor mais usados — HEX, RGB e HSL — representam o mesmo espectro de mais de 16 milhões de cores, mas diferem significativamente em quão intuitivos são para leitura e manipulação. Códigos HEX como #3b82f6 são compactos e onipresentes no CSS, enquanto valores RGB como rgb(59, 130, 246) mapeiam diretamente para os canais de luz vermelho, verde e azul que sua tela usa para renderizar cores.
HSL (Matiz, Saturação, Luminosidade) tem sido cada vez mais preferido pelos designers porque se alinha à forma como os humanos naturalmente pensam sobre cor. Em vez de combinar valores abstratos de canais, você escolhe um matiz na roda de cores (0-360 graus), define sua intensidade com a saturação (0-100%) e controla o brilho com a luminosidade (0-100%). Isso torna trivial criar paletas harmoniosas: mantenha o matiz constante e varie saturação e luminosidade para produzir tons, sombras e matizes da mesma cor. As propriedades personalizadas modernas do CSS funcionam especialmente bem com HSL, permitindo definir um matiz base e derivar uma paleta inteira a partir dele.
Selecionar cores que pareçam boas é apenas metade da equação — elas também precisam ser acessíveis. As Diretrizes de Acessibilidade de Conteúdo Web (WCAG 2.1) exigem uma taxa de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Aproximadamente 8% dos homens e 0,5% das mulheres apresentam algum tipo de deficiência de visão de cores, portanto depender apenas da cor para transmitir informações é uma armadilha comum de acessibilidade. Sempre combine suas escolhas de cor com um verificador de contraste e considere como seu design aparece sob filtros simulados de daltonismo. Este conversor ajuda você a iterar rapidamente os valores de cor para que possa testar diferentes combinações e encontrar o equilíbrio perfeito entre estética e legibilidade.