Categorias

← View All Tools

Gerador de Sombras de Cor

Gere variações mais escuras de uma cor adicionando preto, criando sombras ricas para profundidade e contraste no design

Quantas variações de sombra gerar

Máxima escuridão (0.1-1.0)

Valores separados por vírgula (ex: 0.1,0.3,0.5,0.7,0.9)

Fatos principais

Categoria
Design
Tipos de entrada
color, select, number, text, checkbox
Tipo de saída
html
Cobertura de amostras
2
API disponível
Yes

Visão geral

O Gerador de Sombras de Cor permite criar variações mais escuras de qualquer cor base, adicionando tons de preto para conferir profundidade, contraste e hierarquia visual aos seus projetos de design.

Quando usar

  • •Ao criar paletas de cores para interfaces de usuário que exigem estados de hover ou botões pressionados.
  • •Para adicionar profundidade a elementos gráficos, como sombras projetadas ou gradientes sutis.
  • •Ao desenvolver sistemas de design que precisam de variações consistentes de uma cor primária para textos ou fundos.

Como funciona

  • •Selecione a cor base utilizando o seletor de cores ou inserindo o código HEX.
  • •Escolha o método de sombreamento, como linear, HSL ou LAB, para definir como a cor será escurecida.
  • •Ajuste o número de variações desejadas e a intensidade da sombra para obter o resultado preciso.
  • •Visualize os códigos HEX, RGB e HSL gerados e copie-os diretamente para o seu software de design.

Casos de uso

Criação de estados de interação para botões (hover, active, disabled).
Desenvolvimento de paletas de cores para temas de modo escuro (dark mode).
Geração de gradientes suaves para fundos de sites e elementos de interface.

Exemplos

1. Paleta de Botões para UI

Designer de UI
Contexto
Preciso criar estados de 'hover' para um botão azul primário em um sistema de design.
Problema
Encontrar uma variação de azul que seja visivelmente mais escura, mas que mantenha a harmonia da marca.
Como usar
Defina a cor base como o azul da marca, escolha o método 'HSL' e gere 3 variações com intensidade moderada.
Configuração de exemplo
baseColor: #3B82F6, shadeMethod: hsl, shadeCount: 3, intensity: 0.3
Resultado
Obtenção de três tons de azul progressivamente mais escuros, perfeitos para estados de interação do botão.

2. Sombreamento para Modo Escuro

Desenvolvedor Front-end
Contexto
Estou adaptando um painel administrativo para um tema escuro.
Problema
As cores de fundo precisam de variações sutis para diferenciar cards e seções sem perder o contraste.
Como usar
Use o método 'LAB' para garantir que as sombras mantenham a percepção de cor correta ao escurecer o cinza base.
Configuração de exemplo
baseColor: #F3F4F6, shadeMethod: lab, shadeCount: 5, intensity: 0.6
Resultado
Uma escala de cinzas consistente que permite criar camadas visuais claras entre o fundo e os elementos da interface.

Testar com amostras

design
Exemplos de códigos de cor
Coleção de códigos de cor em vários formatos (Hex, RGB, HSL, cores com nome) para testes de validação
title token color
sample
Exemplos PDF
Exemplos PDF gerados por ferramentas de 2026-02-01 a 2026-02-10
task generate
sample

Hubs relacionados

Ferramentas de Design para Generate
Explore 19 ferramentas de design para fluxos de generate e encontre utilitários próximos com rapidez.
Ferramentas de Design para Convert
Explore 98 ferramentas de design para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Json para Generate
Explore 33 ferramentas de json para fluxos de generate e encontre utilitários próximos com rapidez.
Ferramentas de Pdf para Generate
Explore 10 ferramentas de pdf para fluxos de generate e encontre utilitários próximos com rapidez.

FAQ

Como o método de sombreamento afeta a cor?

Diferentes métodos alteram a matemática da cor. O método linear adiciona preto puro, enquanto o HSL ajusta a luminosidade e o LAB preserva melhor a percepção visual da cor.

Posso gerar sombras com passos personalizados?

Sim, ao selecionar o método 'Passos Personalizados', você pode definir valores específicos de intensidade separados por vírgula.

O que é a distribuição de passos exponencial?

A distribuição exponencial cria variações que escurecem mais rapidamente à medida que se afastam da cor original, ideal para sombras profundas.

É possível exportar os valores em diferentes formatos?

Sim, a ferramenta exibe automaticamente os códigos HEX, RGB e HSL para cada variação gerada.

A cor original é incluída na lista de resultados?

Sim, você pode marcar a opção 'Incluir Cor Original' para manter a cor base como referência no topo da sua nova paleta.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/color-shade

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
baseColor color Sim -
shadeMethod select Não -
shadeCount number Não Quantas variações de sombra gerar
intensity number Não Máxima escuridão (0.1-1.0)
stepType select Não -
customSteps text Não Valores separados por vírgula (ex: 0.1,0.3,0.5,0.7,0.9)
includeOriginal checkbox Não -
showHexCodes checkbox Não -
showRgbValues checkbox Não -
showHslValues checkbox Não -
generatePalette checkbox Não -

Formato de resposta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-color-shade": {
      "name": "color-shade",
      "description": "Gere variações mais escuras de uma cor adicionando preto, criando sombras ricas para profundidade e contraste no design",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-shade",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]