Gerador de Tint & Shade de Cores
Gere uma faixa de tints (misturados em direção ao branco) e shades (misturados em direção ao preto) de uma cor base, com valores hexadecimais exatos para sistemas de design e estados de UI.
Entrada
Escolha uma cor ou digite um valor HEX diretamente.
Quantas linhas de tint/shade gerar, espaçadas uniformemente entre a cor base e branco/preto puro.
Saída
Your color palette will appear here.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/color-tint-shade-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#808080",
"steps": "5"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `color-tint-shade-generator` tool (Color Tint & Shade Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/color-tint-shade-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Tint & Shade de Cores — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O Gerador de Tint & Shade de Cores pega uma cor base única e cria uma faixa de tints mais claros (misturados em direção ao branco) e shades mais escuros (misturados em direção ao preto), cada um rotulado com o percentual de mistura e seu código hex exato. Escolha uma cor, defina quantos passos deseja e obtenha uma rampa pronta para um sistema de design, biblioteca de componentes ou uma UI única.
Tints vs. shades
- Tint — a cor base misturada com branco. Os tints são usados para fundos de hover, estados desabilitados, destaques sutis e superfícies de modo claro que ainda se leem como a "mesma" cor da sua marca.
- Shade — a cor base misturada com preto. Os shades são usados para estados pressionado/ativo, superfícies de modo escuro, bordas e texto que precisa permanecer legível em um fundo claro enquanto ainda se relaciona com a cor base.
Juntos, uma rampa tint/shade é a base de muitas escalas de cores de token de design (color-50 até color-900, ou similar): um matiz base expandido em uma gama completa de valores de luminosidade que uma UI pode extrair consistentemente, em vez de cada componente escolher sua própria sombra ad hoc.
Como a mistura funciona
Cada passo mistura os canais vermelho, verde e azul da cor base em direção ao alvo (branco ou preto) por um percentual t, usando interpolação linear reta por canal:
- Tint:
channel + (255 - channel) × t - Shade:
channel × (1 - t)
O resultado é arredondado para o inteiro mais próximo e convertido de volta para hex. Os percentuais são espaçados uniformemente entre 0% e 100% — por exemplo, com 5 passos você obtém aproximadamente 17%, 33%, 50%, 67% e 83% — então a rampa nunca inclui um passo degenerado de 0% (idêntico à cor base) ou um passo de 100% (branco ou preto puro).
Como usar
- Escolha uma cor base com o seletor de cores ou digite um valor hex diretamente.
- Ajuste o slider Passos (3–9) para controlar quantas linhas de tint/shade são geradas.
- A tabela se atualiza instantaneamente com o percentual, hex do tint e hex do shade de cada linha.
- Copie a tabela ou baixe como CSV para colar em uma folha de estilo, configuração do Tailwind ou palet de cores de uma ferramenta de design.
FAQ
Por que interpolação RGB linear em vez de ajustar a luminosidade HSL? Misturar canais diretamente em direção ao branco ou preto é a leitura mais literal de "tint" e "shade" da teoria de cores tradicional — é o que acontece quando você mistura tinta fisicamente com pigmento branco ou preto. Ajustar apenas a luminosidade HSL pode mudar como a cor parece saturada no meio da rampa; a mistura de canais diretos mantém a mistura previsível.
Por que os passos não caem em percentuais redondos como 10%, 20%, 30%? Os passos são espaçados uniformemente pelo intervalo entre a cor base e branco/preto puro, então os percentuais exatos mudam com a contagem de passos. O passo do meio de uma contagem de passos ímpar sempre cai em um limpo 50%.
Posso usar essas cores diretamente em CSS?
Sim — cada código hex está pronto para ser colado em uma propriedade CSS personalizada, variável Sass ou escala de cores do Tailwind, p. ex. --color-primary-100: #E9E9E9;.
Aumentar a contagem de passos mudará meus valores hex existentes? Sim. Como os percentuais são espaçados uniformemente em todos os passos, mudar a contagem de passos refaz a posição de cada passo — não é simplesmente adicionar linhas à rampa existente.
Privacidade
Toda a matemática de cores acontece localmente em seu navegador — sua cor base e contagem de passos escolhida nunca são enviadas para um servidor.