Tokens legíveis
Cada etapa tem função estável e nome de variável CSS. Luz, base e sombra passam da exploração ao componente sem transcrição manual.
Ferramenta de cor gratuita
Gerador de tons de cor para luzes e sombras cartoon
Crie uma paleta de cinco, sete ou nove etapas a partir de uma cor base. Alterne entre tons clássicos regulares e uma curva cartoon mais expressiva, depois copie valores sem enviar arquivos.
Atualizado em 23 de julho de 2026
gerador de tons de cor
O que este gerador de tons de cor cria?
O gerador transforma um HEX válido de três ou seis dígitos em uma escala centralizada e preserva exatamente a cor original. O modo Clássico mistura com branco para criar tintas e com preto para criar sombras. O modo Cartoon muda matiz, saturação e brilho juntos para produzir luzes mais quentes e sombras mais frias. Cada resultado mostra HEX, RGB, HSB, contraste com branco e preto, cópia, propriedades CSS e PNG criado localmente.
Uma cor base, três resultados úteis
Use a escala como sistema com funções claras, não apenas como uma linha decorativa.
Contraste visível
Cada amostra mostra a relação com texto branco e preto. AA normal, AA grande ou abaixo de AA ajudam na escolha inicial antes do teste completo.
Sombra adequada a cartoon
O modo Cartoon desloca levemente o matiz ao clarear e escurecer. É um início vivo para personagens, interfaces de jogos, selos e ilustração plana.
HEX · RGB · HSB · WCAG
Gere uma escala de luz a sombra
Escolha cor base, método e quantidade de etapas. A escala muda imediatamente no navegador.
Tinta 3#D1EFF6
RGB 209, 239, 246
HSB 191°, 15%, 96%
- Texto branco
- 1.21:1Abaixo de AA
- Texto preto
- 17.39:1AA normal
--toon-shade-01Tinta 2#9FDEED
RGB 159, 222, 237
HSB 192°, 33%, 93%
- Texto branco
- 1.48:1Abaixo de AA
- Texto preto
- 14.15:1AA normal
--toon-shade-02Tinta 1#6ACCE3
RGB 106, 204, 227
HSB 191°, 53%, 89%
- Texto branco
- 1.85:1Abaixo de AA
- Texto preto
- 11.36:1AA normal
--toon-shade-03Base#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
- Texto branco
- 2.34:1Abaixo de AA
- Texto preto
- 8.97:1AA normal
--toon-shade-04Sombra 1#22869E
RGB 34, 134, 158
HSB 192°, 78%, 62%
- Texto branco
- 4.22:1AA grande
- Texto preto
- 4.97:1AA normal
--toon-shade-05Sombra 2#175A6A
RGB 23, 90, 106
HSB 192°, 78%, 42%
- Texto branco
- 7.76:1AA normal
- Texto preto
- 2.71:1Abaixo de AA
--toon-shade-06Sombra 3#0C3038
RGB 12, 48, 56
HSB 191°, 79%, 22%
- Texto branco
- 14.04:1AA normal
- Texto preto
- 1.50:1Abaixo de AA
--toon-shade-07:root {
--toon-shade-01: #D1EFF6;
--toon-shade-02: #9FDEED;
--toon-shade-03: #6ACCE3;
--toon-shade-04: #2FB8D8;
--toon-shade-05: #22869E;
--toon-shade-06: #175A6A;
--toon-shade-07: #0C3038;
--toon-shade-base: var(--toon-shade-04);
}Como gerar tons de cor úteis
Uma escala se torna reutilizável quando origem, intervalo e função estão explícitos. Repita este fluxo curto em cada revisão.
1. Comece com um HEX confiável
Use o valor do arquivo de design, token da marca ou amostra verificada, não uma captura comprimida. O gerador preserva esse HEX exatamente no centro e torna cada etapa vizinha rastreável.
2. Escolha o método para o trabalho
Clássico é previsível em fundos, bordas, gráficos e estados. Cartoon é uma heurística artística para luz e sombra. Compare ambos e mantenha a escala simples quando o deslocamento de matiz não melhorar a hierarquia.
3. Verifique contraste no contexto
Use as relações como filtro rápido. Antes de publicar, teste tamanho e peso reais, cor vizinha, foco e estado interativo. Uma amostra aprovada não torna automaticamente o componente inteiro acessível.
Tons clássicos versus tons cartoon
Os dois métodos preservam a base no centro, mas usam transformações e atendem objetivos diferentes.
| Método | Mudança | Melhor uso | Atenção |
|---|---|---|---|
| Clássico | Mistura RGB linear com branco ou preto | Superfícies, bordas, gráficos e tokens neutros | O meio pode parecer cinza ou mecânico |
| Cartoon | Curva HSB com pequenos deslocamentos de matiz e saturação | Personagens, jogos, adesivos e ilustração plana | Ponto criativo, não especificação oficial de marca |
| Contraste | Luminância relativa WCAG com branco e preto puros | Triagem inicial do texto em cada cor | Teste fonte, tamanho, estado e componente reais |
Como a escala é calculada
Um número ímpar cria um centro verdadeiro. Cinco etapas contêm duas cores claras, a base original e duas escuras; sete e nove adicionam intervalos menores dos dois lados. As tintas clássicas levam os canais RGB em direção a 255, enquanto as sombras os levam a zero. As pontas param antes do branco e preto puros, preservando identidade cromática. Como a base não é recalculada, HEX, RGB e HSB permanecem exatos.
O modo Cartoon segue outra curva. As luzes ganham brilho, perdem um pouco de saturação e se deslocam alguns graus para uma direção mais quente. As sombras perdem brilho, ganham leve saturação e seguem na direção oposta. A mudança cresce com a distância do centro. É uma heurística transparente, não uma simulação física. Material, luz ambiente, reflexos e composição podem exigir outra direção; trate o resultado como rascunho editável.
Tinta, tom e sombra não são iguais
Na terminologia tradicional, uma tinta resulta da adição de branco, uma sombra da adição de preto e um tom geralmente da adição de cinza, que reduz intensidade. Ferramentas digitais muitas vezes chamam toda variação clara ou escura de shade, misturando definições. Este gerador chama o lado claro de tinta e o lado escuro de sombra, com a base entre eles. O método Clássico não cria uma linha separada apenas com cinza.
A diferença importa na entrega. “Use sombra 2” é reproduzível quando método, base e etapas são salvos; “deixe um pouco mais escuro” não é. Copie o bloco CSS completo quando o projeto precisar de nomes consistentes. Se um estado hover ou desativado exigir menos saturação, crie-o intencionalmente no seletor HSB em vez de supor que todo ponto médio da rampa serve como tom.
Sombras cartoon sem deixar a paleta suja
Um erro comum reduz todos os canais RGB por igual até a sombra parecer enegrecida. O objeto mantém tecnicamente a família do matiz, mas perde a energia do desenho. Pequenos deslocamentos de matiz e saturação mantêm cor nas áreas escuras. O modo Cartoon demonstra essa opção com uma curva contida, dando personalidade diferente à luz e à sombra profunda sem dificultar a comparação entre etapas próximas.
Use poucas etapas em arte plana. Cinco cores normalmente cobrem brilho, luz, base, sombra e sombra profunda; nove servem a tokens de interface ou renderização gradual. Não use todas apenas porque existem. Selecione o mínimo de funções visíveis na composição, nomeie por propósito e veja no tamanho final. Diferenças claras em amostras grandes podem desaparecer em um ícone pequeno ou contorno fino.
Padrões, medidas e notas do método
O gerador separa cálculo reproduzível de decisão criativa. Estas fontes explicam formatos, termos e limites.
- CSS Color Module Level 4 define HEX de seis dígitos como três canais sRGB de 8 bits. Cada canal tem 256 valores, gerando 16.777.216 combinações RGB antes do alfa. W3C CSS Color Module Level 4
- WCAG 2.2 define 4.5:1 para texto normal e 3:1 para texto grande no nível AA; o critério melhorado usa 7:1 para texto normal. Diretrizes WCAG 2.2 do W3C
- A escala clássica é interpolação RGB reproduzível. Cartoon é uma heurística da Toon Tone, não modelo de iluminação, paleta oficial ou prova completa de acessibilidade. Referência de teoria da cor do W3C
A WCAG 2.2 afirma:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Continue trabalhando com sua paleta
Perguntas sobre o gerador de tons
Qual é a diferença entre tinta e sombra?
Uma tinta mistura a cor com branco; uma sombra mistura com preto. Tom geralmente adiciona cinza. A ferramenta coloca tintas antes da base exata e sombras depois.
O HEX original é preservado?
Sim. Um HEX de três dígitos é expandido para seis, e esse valor normalizado fica exatamente no centro de escalas com cinco, sete ou nove etapas.
Qual modo devo usar em interfaces?
Comece com Clássico para superfícies, bordas e estados previsíveis. Experimente Cartoon se um jogo ou ilustração melhorar com luz quente e sombra fria.
Os rótulos WCAG garantem acessibilidade?
Não. Eles calculam apenas a relação com branco ou preto puro. Teste primeiro plano, fundo, tamanho, peso, estado e componente completos.
Minhas cores são enviadas ou armazenadas?
Não. Geração, cópia, contraste e PNG funcionam no navegador sem conta. O arquivo é criado localmente no seu dispositivo.