Pacote de tokens de cor da marca — escala HEX HSL OKLCH
Monte um pacote de tokens de cor da marca a partir de uma base no navegador. Passos: escolha a base (HEX ou seletor), veja HEX/RGB/HSL/OKLCH, gere a escala 50–950 com pares preto/branco em cada degrau e copie variáveis CSS ou JSON. Ao abrir, carrega o azul de exemplo #2563eb — nada é enviado.
Como funciona
Digite ou escolha uma cor base da marca. A página mostra HEX, RGB, HSL e OKLCH, gera escala de 11 degraus (50–950) com prévia de UI e recomenda texto preto ou branco com razão em cada amostra. Copie variáveis CSS ou JSON quando a rampa servir — tudo local.
Regras que você deve saber
O que esperar da escala, espaços de cor, dicas de contraste e privacidade.
- Degrau 500 é sua base. Abaixo clareia misturando com branco; acima escurece com preto (mistura linear em sRGB).
- O bloco base lista HEX, RGB, HSL e OKLCH da mesma cor. OKLCH usa conversão sRGB → linear → OKLab para alinhar com CSS moderno.
- Cada amostra recomenda texto preto ou branco — o que der maior contraste naquele fundo. Razões seguem luminância relativa WCAG; rótulos AA são orientativos.
- Privacidade: geração, prévia e cópia ocorrem localmente nesta aba — sem upload das cores da marca.
Exemplo
Carregue a amostra (#2563EB). O bloco de espaços mostra HEX, RGB, HSL e OKLCH da base; a grade lista 50–950 com texto preto ou branco recomendado e razão de contraste. Copiar CSS retorna :root { --color-50: …; … --color-950: …; } pronto para sua folha de estilo.
Bons casos
- Design systems: parta de um HEX de marca e entregue rampa 50–950 coerente com variáveis CSS para componentes.
- Modo escuro: use tons claros (50–300) em superfícies e tons profundos (700–950) para texto sobre a marca.
- Handoff para dev: copie tokens JSON ou propriedades CSS em vez de redigitar HEX de um print.
Frequently asked questions
Minha cor sai do navegador?
Não. Cálculo e exportação rodam nesta aba — suas cores não vão para servidor.
Como a escala 50–950 é construída?
O degrau 500 é sua cor base. Degraus mais claros (50–400) misturam com branco; mais escuros (600–950) com preto. A mistura é linear em sRGB para manter o matiz estável.
O que significam as colunas de contraste?
Cada amostra compara texto preto e branco sobre aquele fundo e escolhe o de maior contraste WCAG. Os rótulos mostram a razão e se texto normal provavelmente atinge AA (4,5:1) ou AA grande (3:1).
O que Copiar CSS e Copiar JSON incluem?
Copiar CSS gera propriedades :root (--color-50 a --color-950). Copiar JSON entrega a mesma escala mais os espaços da base em dados estruturados para tokens de design.
Quando usar o verificador de contraste?
São sugestões rápidas preto/branco por degrau. Para pares personalizados ou níveis WCAG exatos, abra o verificador de contraste WCAG e cole o HEX de qualquer amostra.
Related tools
Dúvidas ou feedback
Algo pouco claro, quebrado ou faltando? Escreva abaixo — lemos cada mensagem sobre estas ferramentas.