Editor de Cores
Ajuste e refine cores com precisão. Altere saturação, luminosidade e matiz, crie escalas de tons e verifique o contraste de acessibilidade para textos.
Sobre esta ferramenta
O Editor de Cores é uma ferramenta completa para ajustar e aperfeiçoar qualquer cor com precisão. Insira uma cor em formatos como HEX, RGB, HSL ou até mesmo pelo nome e utilize os controles deslizantes para modificar propriedades como Matiz (a tonalidade da cor), Saturação (a intensidade das cores) e Luminosidade (o quanto a cor é clara ou escura). As alterações são aplicadas em tempo real, permitindo visualizar instantaneamente o resultado e verificar a legibilidade da cor com textos claros e escuros. Além disso, a ferramenta converte automaticamente a cor para os principais formatos utilizados em design e desenvolvimento web, incluindo HEX, RGB, HSL, HSV e OKLCH.
Funcionalidades
Para que Usar o Editor de Cores
- Criar paletas consistentes para design systems, componentes e interfaces web
- Verificar se combinações de cor passam nos critérios de acessibilidade WCAG e APCA antes de publicar
- Ajustar a cor de marca para diferentes contextos, como modo escuro, hover e estados desabilitados
- Gerar escalas de tons no estilo Tailwind para exportar como variáveis CSS ou tokens de design
- Converter cores entre HEX, RGB, HSL e OKLCH ao integrar diferentes ferramentas de design e desenvolvimento
Como Usar o Editor de Cores
Insira a cor base
Digite qualquer valor HEX, RGB, HSL ou nome de cor no campo Cor Base. A ferramenta carrega a cor automaticamente e converte para todos os formatos disponíveis
Ajuste com os sliders
Use os controles de Matiz, Saturação e Luminosidade para modificar a cor em tempo real. Todas as saídas e a escala de tons são atualizadas instantaneamente
Verifique o contraste
A seção de acessibilidade mostra a taxa de contraste com texto branco e preto nos modelos WCAG 2.1 e APCA, indicando se a combinação passa ou falha nos critérios
Copie os valores
Clique em qualquer bloco de formato (RGB, HSL, HSV, OKLCH) para copiar o valor diretamente. O HEX é exibido no preview central
Exporte a escala de tons
Na seção Tints & Shades, escolha o formato de exportação (CSS, SCSS, JSON, Tailwind) e o formato de cor (HEX, RGB, HSL ou OKLCH). Clique em Copiar para usar no seu projeto
Perguntas Frequentes
WCAG 2.1 usa uma fórmula matemática simples para calcular o contraste entre cores. APCA (Accessible Perceptual Contrast Algorithm) é um modelo mais moderno que considera como o olho humano percebe a luminosidade em diferentes contextos de leitura. Para textos normais, um valor APCA de 60 ou mais é considerado adequado.
Selecione o formato de exportação Tailwind e o formato de cor desejado. O código gerado pode ser colado diretamente no tailwind.config.js ou em um arquivo CSS como variáveis customizadas. Se usar OKLCH, é compatível com Tailwind 4 nativamente.
OKLCH é um espaço de cor perceptualmente uniforme — isso significa que alterar a luminosidade ou a croma muda a cor de forma visualmente previsível. É o formato adotado pelo Tailwind 4 internamente e pelo CSS Color Level 4, sendo ideal para gerar escalas de tons mais consistentes do que HSL.