Gerador de tons claros e escuros

Como usar o gerador de tons claros e escuros

1. Escolhe uma Cor base com a amostra, ou escreve um valor em Código da cor: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) ou um nome CSS como teal.
2. Escolhe um Passo: 5 %, 10 %, 20 % ou 25 %. Com 10 %, obténs tons claros a 10 %, 20 % … 100 % e o mesmo número de tons escuros.
3. Escolhe como Misturar em: OKLCH (percetual) ou sRGB (clássico). As duas linhas atualizam-se de imediato: Tons claros (misturados com branco) e Tons escuros (misturados com preto), ambas a partir da cor base.
4. Clica em Copiar por baixo de qualquer amostra para copiares o seu código HEX.
5. Em Exportar como, escolhe Variáveis CSS, Configuração Tailwind (v3), Tailwind @theme (v4), Variáveis SCSS ou JSON, define um Nome como primary ou brand e depois usa Copiar ou Transferir para o código.

Tons claros, tons escuros e tons acinzentados

Na teoria da cor, um tom claro (em inglês tint) é uma cor misturada com branco, um tom escuro (shade) é uma cor misturada com preto, e um tom acinzentado (tone) é uma cor misturada com cinzento. A percentagem indica quanto branco ou preto é acrescentado: um tom claro a 30 % tem 70 % de cor base e 30 % de branco. A 100 % chega-se ao branco ou ao preto puros, e é por isso que a última amostra de cada linha é sempre #FFFFFF ou #000000; marca o fim da escala.

Os tons claros e escuros são a forma mais rápida de criar uma escala coerente a partir de uma única cor de marca: fundos claros e estados de hover a partir dos tons claros, bordas, estados premidos e texto escuro a partir dos tons escuros.

Mistura em OKLCH ou sRGB?

sRGB (clássico) mistura diretamente os valores de vermelho, verde e azul. É o que faz a maioria dos geradores mais antigos e corresponde ao color-mix(in srgb, …) do CSS. A fórmula de um tom claro é simplesmente canal + (255 − canal) × p, e a de um tom escuro canal × (1 − p). É previsível, mas os passos não são percetualmente uniformes: os azuis tendem a puxar para o roxo à medida que clareiam, e os tons escuros parecem muitas vezes sujos.

OKLCH (percetual) mistura no espaço de cor OKLCH, concebido por Björn Ottosson em 2020, tal como o color-mix(in oklch, …) do CSS. A luminosidade, o croma e a tonalidade são interpolados separadamente. O branco e o preto não têm tonalidade, por isso a tonalidade base mantém-se até ao fim, e cada passo altera a luminosidade numa quantidade visualmente semelhante. As cores que ficariam fora da gama sRGB são trazidas de volta reduzindo o croma, e não cortando canais, por isso a tonalidade mantém-se estável. Para design systems, isto dá normalmente escalas mais limpas e mais uniformes.

Usar a exportação

• Variáveis CSS produzem um bloco :root com nomes como --primary-tint-20 e --primary-shade-40, prontos a colar numa folha de estilos.
• Configuração Tailwind (v3) dá um objeto colors para theme.extend.colors; depois escreves classes como bg-primary-tint-20 ou text-primary-shade-60. DEFAULT guarda a cor base, por isso bg-primary também funciona.
• Tailwind @theme (v4) dá variáveis --color-… para a configuração CSS-first do Tailwind 4.
• Variáveis SCSS e JSON servem para outras ferramentas de build e design tokens.

Os nomes passam a minúsculas e os espaços a hífenes, por isso «Brand Blue» passa a brand-blue. Nos nomes exportados, os sufixos ficam em inglês (tint, shade).