Guia da ferramenta de cores

Conversor de cores: HEX, RGB, HSL e OKLCH

Digite HEX, RGB ou HSL na ferramenta principal e copie os valores HEX, RGB, HSL e OKLCH no inspetor. OKLCH está disponível como formato de saída.

Este guia explica o processo. Use a ferramenta indicada abaixo para gerar cores e exportar arquivos.

Criar uma paleta Explorar todas as ferramentas

O que você encontra nesta página

Cole uma cor HEX, RGB ou HSL na ferramenta principal e confira os formatos convertidos no inspetor.
Copie HEX, RGB, HSL, OKLCH ou uma declaração de variável CSS.
Use OKLCH para ter mais controle perceptual sobre as escalas de tons.

Indicado para

Implementação CSS
Documentação de design
Organização de tokens

Como usar

Gerador de paletasGere paletas, confira o contraste WCAG, extraia cores de imagens localmente e exporte CSS, Tailwind, SCSS, JSON, SVG e PNG.Verificador WCAGConfira o contraste entre texto e fundo segundo os níveis AA e AAA das WCAG. Gratuito, imediato e sem envio de arquivos.Extrator de cores de imagensExtraia uma paleta de cores dominantes de imagens PNG, JPG ou WebP. O processamento ocorre no navegador, sem envio da imagem.

Posso usar esta página com o gerador principal?

Sim. Comece aqui, abra a ferramenta principal do Chromoforge com a mesma cor base e exporte a paleta.

Por que um valor muda um pouco ao converter e voltar?

HEX e RGB usam oito bits por canal, com 256 valores possíveis. Outros formatos permitem valores contínuos. A conversão de volta arredonda para um valor representável; o arredondamento e os limites de gama podem alterar o resultado.

Quando usar OKLCH em vez de HSL?

Quando o controle da luminosidade percebida for importante. A luminosidade HSL não corresponde diretamente à percepção. OKLCH procura separar melhor luminosidade, croma e matiz; porém, a conversão e o recorte para sRGB podem afetar os intervalos visuais.

Ferramentas e guias relacionados

Gerador de variáveis de cores CSSGere propriedades personalizadas CSS a partir de uma paleta e copie-as para sua folha de estilos ou arquivo de tokens.Gerador de tokens de designCrie tokens de cores a partir de uma paleta e exporte variáveis CSS, mapas SCSS, JSON e valores para Tailwind.Gerador de tons de coresGere uma escala de 50 a 950 a partir de uma cor base para superfícies, bordas, estados de interação e modo escuro.

Todas as ferramentas