Gerador de tint e shade HEX

Isto é um gerador de tint e shade. A partir de um HEX mistura rumo ao branco e ao preto, ou percorre luminosidade, croma e matiz HSL.

Clique num valor para copiar

Exemplos — clique numa amostra

Converte várias cores de uma vez. Uma por linha, ou vírgulas como #3B82F6, #FF573380. Inserir exemplo preenche três linhas e a tabela abaixo.

Gerador de tint e shade

Isto é um gerador de tint e shade. Mistura um HEX rumo ao branco ou ao preto para hover e bordas.

Como usar

  1. Cole HEX, rgb() ou hsl(), escolha uma cor, Aleatório, um exemplo (#3B82F6, #171B45, #0074D9, #0F766E) ou um pixel se o navegador permitir.
  2. O eixo Mistura (branco / preto) é o inicial. Luminosidade, Croma e Matiz fixam os outros canais HSL. O passo 5%, 10%, 20% ou 25% define os cortes; Personalizado usa 2–20 divisões.
  3. A escala completa tem shades à esquerda, a base ao centro e tints à direita. O HEX fica debaixo do bloco. Um clique copia o HEX e atualiza as pastilhas.
  4. O token (brand) preenche --brand-tint-10 e um trecho Tailwind. Copiar resultado copia o CSS. Mostrar exemplo recarrega #3B82F6 a 10% em Mistura.
  5. O lote aceita vários HEX. O exemplo carrega #3B82F6, #171B45 e #0074D9. Cada linha mostra base, tint médio e shade médio.

Notas

A mistura é sRGB linear rumo a #FFFFFF ou #000000. 50% de tint de #3B82F6 é esse azul a 50% sobre branco. Luminosidade / Croma / Matiz usam HSL, não OKLCH. HEX inválido mostra erro. Limpar tudo esvazia as rampas. Relacionado: HEX para Tailwind, opacidade, HEX para RGBA.

Onde usar

  • Hover, pressionado e borda a partir de um HEX de marca.
  • Uma rampa a 10% para tokens 100–900.
  • Preenchimentos suaves baixando o croma.
  • Matizes companheiras rodando o matiz.

Perguntas

50% de tint é 50% de opacidade no branco?

No eixo Mistura, sim: a cor a 50% sobre #FFFFFF.

10% é o Tailwind 50–950?

Nove passos de cada lado mais a base. São percentagens de mistura, não OKLCH. Para uma classe predefinida use HEX para Tailwind.

Várias cores de uma vez?

Sim. Uma por linha, ou vírgulas fora de parênteses. rgb(22, 163, 74) continua um item.