Como escolher e converter cores para web design
Traduza qualquer cor entre HEX, RGB, HSL e OKLCH; monte pares com contraste acessível; exporte paleta que seu design system possa usar.
Mais utilitários que combinam com este guia:
Por que isso importa
Designer passa #5B2A6F no Figma; dev coloca na variável CSS. Duas semanas depois QA diz que CTA falha WCAG AA no fundo suave. Correção é empurrar luminância em HSL — mas olho nu não diz se contraste passou de 4,5:1. Ferramenta que mostra modelos numéricos + pontuação de contraste fecha o ciclo entre “bonito” e “passa auditoria”.
Três cenários reais
Cole primeiro plano e fundo; leia razão de contraste; ajuste luminância até ≥ 4,5.
UI acessível
Parta da marca; gere passos mais claros/escuros em OKLCH para passos perceptivamente uniformes.
Tons consistentes
Converta referência Pantone para RGB e refine em HSL até swatch na tela casar com amostra impressa.
Campanha on-brand
Passo a passo
Abra o editor de cores.
Escolha ou cole cor
Clique no swatch e use seletor, ou cole
#5B2A6F,rgb(91 42 111),hsl(280 45% 30%),oklch(35.5% 0.12 304).Veja todos os modelos
Campos lado a lado HEX, RGB, HSL, HSV, OKLCH. Edite qualquer um; os outros atualizam.
Monte par de contraste
Segunda cor no slot “fundo”. Razão de contraste aparece com selos WCAG AA / AAA.
Gere variantes
Use picker OKLCH para escalar luminância mantendo matiz e croma — caminho limpo para tokens.
Exporte
Copie em CSS, Sass, JSON ou formato de design tokens.
HEX
#5B2A6FOutros modelos
RGB: rgb(91, 42, 111)
HSL: hsl(280, 45%, 30%)
OKLCH: oklch(35.5% 0.12 304)
Dicas avançadas
- OKLCH para tokens de design. Ajustar luminância em HSL gera passos perceptivos irregulares; OKLCH aproxima mudanças de brilho como humanos veem.
- Não confie no monitor para impressão. Displays calibrados são necessários para casar Pantone ou CMYK.
- Modo escuro: inverta luminância em OKLCH e reduza levemente croma para menos fadiga ocular.
- Documente HEX e valores perceptivos no design system — mantenedores futuros agradecem.
Armadilhas comuns
Erro comum
Mesmo HEX parece diferente no celular vs notebook
Gamuts diferentes (sRGB vs Display P3) e brilho mudam sensação. Marque cores que devem usar gamut largo com color(display-p3 ...).
Erro comum
Tester diz falha mas “parece ok” ao olho
Contraste é medida matemática; contraste óptico varia com contexto. Math é baseline legal; busque mais que 4,5:1 em texto corrido quando der.
Erro comum
Cores drift entre componentes nas CSS vars
Defina token canônico uma vez e referencie em todo lugar. Variantes devem derivar (oklch(from var(--brand) calc(l + 0.1) c h)) em vez de redigitar.
Quando esta não é a ferramenta certa
- Gestão de cor para impressão — fluxo Adobe calibrado.
- Análise massiva de cores em imagens — script com
chroma.jsouculori. - Simulação de daltonismo — ferramentas dedicadas (ex.: axe) simulam deuteranopia/protanopia além da razão simples.
FAQ
Diferença entre HSL e OKLCH?
HSL não é perceptivamente uniforme: deslocar matiz 10° pode parecer cor diferente conforme luminância. OKLCH (forma polar de OKLab) corrige para ajustes mais previsíveis.
Suporta recursos CSS Color 5?
Sim — color-mix() e oklch(from ...) em navegadores modernos. Ferramenta emite valor compatível com flags do navegador escolhido.
Minhas cores ficam salvas?
Não. Tudo local; copiar para clipboard é opcional.
Próximos passos
- Valide cores contra paleta geral do asset com conversor de imagens.
- Exporte favicon/logo com SVG para PNG.
- Casos embutidos use Imagem para Base64.