Saturação/Dessaturação de Cor

Ajuste a saturação das cores e crie variações de saturação

-100 20 100

Quantidade de ajuste para saturação da cor (-100% a +100%)

Aplica-se apenas quando "Gradiente (faixa completa)" está selecionado. Controla quantas cores gerar na sequência do gradiente de saturação (2-20 passos)

Fatos principais

Categoria
Design e cor
Tipos de entrada
color, select, range, number, checkbox
Tipo de saída
html
Cobertura de amostras
3
API disponível
Yes

Visão geral

A ferramenta de Saturação/Dessaturação de Cor permite ajustar com precisão a intensidade cromática de qualquer cor base, facilitando a criação de paletas equilibradas, variações de tons e efeitos visuais personalizados para seus projetos de design.

Quando usar

  • •Para criar variações de tons pastéis ou vibrantes a partir de uma cor principal.
  • •Ao precisar gerar escalas de saturação consistentes para interfaces de usuário (UI).
  • •Para ajustar a intensidade de cores em logotipos ou elementos gráficos sem alterar o matiz original.

Como funciona

  • •Selecione a sua cor base utilizando o seletor de cores.
  • •Escolha o tipo de ajuste desejado: saturar, dessaturar, criar um gradiente ou definir um valor personalizado.
  • •Ajuste a porcentagem de intensidade ou o número de passos para o gradiente conforme necessário.
  • •Ative a preservação de matiz para garantir que a tonalidade original permaneça inalterada durante a modificação.

Casos de uso

Desenvolvimento de sistemas de design (Design Systems) com escalas de cores consistentes.
Criação de estados de hover ou desabilitado para botões e elementos de interface.
Ajuste rápido de ativos gráficos para garantir harmonia visual em apresentações ou layouts.

Exemplos

1. Criação de Paleta para UI

Designer de Interface
Contexto
Um designer precisa criar uma escala de cores para um botão de ação que varia de um tom suave até um tom vibrante.
Problema
Manter a consistência da marca enquanto cria variações de intensidade para diferentes estados do botão.
Como usar
Defina a cor base da marca, selecione 'Gradiente' e configure para 5 passos com a opção de preservar matiz ativada.
Configuração de exemplo
adjustmentType: gradient, steps: 5, preserveHue: true
Resultado
Uma sequência de 5 cores que mantém a identidade da marca, variando suavemente da saturação baixa para a alta.

2. Suavização de Cores para Fundo

Desenvolvedor Web
Contexto
O desenvolvedor possui uma cor primária muito forte e precisa de uma versão mais neutra para usar como fundo de seção.
Problema
A cor original é muito agressiva para ser usada em grandes áreas de preenchimento.
Como usar
Escolha a cor base, selecione 'Dessaturar' e ajuste a quantidade para -40%.
Configuração de exemplo
adjustmentType: desaturate, adjustmentValue: 40
Resultado
Uma versão dessaturada da cor original, ideal para fundos de página que mantêm a harmonia com a identidade visual.

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
Amostras ICS do Agendador por Fuso Horario
Arquivos ICS na mesma estrutura retornada pelo Time Zone Workflow Scheduler, com varios VEVENT de horarios candidatos
task generate
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 11 ferramentas de pdf para fluxos de generate e encontre utilitários próximos com rapidez.

FAQ

O que significa preservar características de matiz?

Ao ativar esta opção, a ferramenta garante que apenas a intensidade da cor seja alterada, mantendo a tonalidade (hue) original intacta.

Posso criar uma escala completa de saturação?

Sim, selecionando a opção 'Gradiente' e definindo o número de passos, você pode gerar uma sequência de cores que vai da dessaturação total até a saturação máxima.

Qual a diferença entre saturar e dessaturar?

Saturar aumenta a vivacidade e a pureza da cor, enquanto dessaturar aproxima a cor de tons cinzas, tornando-a mais suave ou neutra.

A ferramenta suporta cores complementares?

Sim, ao marcar a opção 'Incluir Cores Complementares', a ferramenta gera automaticamente variações baseadas no oposto da sua cor no círculo cromático.

Como defino a intensidade do ajuste?

Utilize o controle deslizante 'Quantidade de Ajuste' para definir o valor entre -100% (dessaturação total) e +100% (saturação máxima).

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/color-saturate-desaturate

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
baseColor color Sim -
adjustmentType select Sim -
adjustmentValue range Não Quantidade de ajuste para saturação da cor (-100% a +100%)
steps number Não Aplica-se apenas quando "Gradiente (faixa completa)" está selecionado. Controla quantas cores gerar na sequência do gradiente de saturação (2-20 passos)
includeComplementary checkbox Não -
preserveHue 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-saturate-desaturate": {
      "name": "color-saturate-desaturate",
      "description": "Ajuste a saturação das cores e crie variações de saturação",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-saturate-desaturate",
      "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]