Ferramentas de Cor
Ferramentas para escolher cores e converter entre formatos. Todo o processamento acontece no seu navegador.
Escolha, converta e verifique uma cor
Digite um valor HEX, RGB, HSL, HSV ou OKLCH para ver a mesma cor em todos os formatos disponíveis. Ajuste matiz, saturação, brilho e transparência visualmente e copie a notação exata para CSS, programas de design ou guias de estilo.
O painel de contraste calcula as proporções WCAG sobre branco e preto e informa se a combinação passa para texto normal ou grande. A escala de luminosidade transforma uma única cor escolhida em uma paleta coerente para interfaces.
A mesma cor, escrita de várias formas
Hex e rgb() são os valores de canal que a tela aciona diretamente. hsl() e hsv() reorganizam isso em matiz, saturação e luminosidade ou brilho, o que é mais fácil de raciocinar quando você está criando variações de uma cor em vez de escolher uma. oklch() descreve a mesma cor num espaço feito para acompanhar a percepção.
Nada se perde ao circular entre eles dentro da gama sRGB, então o formato a usar é o que o destino espera: hex na maioria das ferramentas de design, hsl ou oklch numa custom property de CSS, e cmyk apenas como indicação aproximada, já que uma conversão real para impressão depende de tinta, papel e perfil.
Por que uma paleta montada em HSL parece irregular
A luminosidade do HSL é uma média geométrica dos canais, não uma medida de quão clara a cor parece. Amarelo e azul ficam os dois em cinquenta por cento, e um deles parece quase branco aos olhos. Qualquer escala montada mantendo esse número fixo sai desequilibrada e acaba corrigida à mão, cor por cor.
O OKLCH resolve isso por construção: passos iguais de luminosidade parecem passos iguais. Mantenha-a constante entre matizes e a linha de cores realmente se lê como uma família só, o que faz dele o espaço certo para gerar tons claros, tons escuros e interpolações sem o cinza lamacento que aparece no meio de uma mistura em RGB.
Contraste é primeiro um requisito, depois um julgamento
As razões mostradas contra branco e preto seguem a fórmula do WCAG 2, com os limites de sempre: 4,5:1 para texto de corpo, 3:1 para texto grande e componentes de interface, 7:1 para AAA. Cumpri-los não é opcional na maioria dos lugares que compram software, e é o trabalho de acessibilidade mais barato que existe.
O número, porém, não é a resposta completa. A fórmula superestima o contraste de texto claro sobre fundo escuro e não sabe nada sobre peso de fonte, então um traço finíssimo que passa pode continuar difícil de ler. Alcance a razão e depois olhe o resultado no tamanho e no peso que você vai realmente publicar.