Categorias

← View All Tools

Deslocador de Matiz de Cor

Desloque matizes de cores e crie variações com controles de rotação horária/antihorária

0 30 360

Quantidade de deslocamento de matiz para rotação de cor (0° a 360°)

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

Fatos principais

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

Visão geral

O Deslocador de Matiz de Cor é uma ferramenta intuitiva para designers e desenvolvedores que precisam ajustar tons e criar variações cromáticas precisas através da rotação no círculo cromático.

Quando usar

  • •Ao criar paletas de cores harmoniosas a partir de uma cor base.
  • •Para gerar variações de tons em interfaces de usuário ou elementos gráficos.
  • •Quando você precisa converter uma cor específica para seu equivalente complementar ou análogo.

Como funciona

  • •Selecione sua cor base utilizando o seletor de cores.
  • •Escolha o tipo de ajuste, como rotação horária, anti-horária ou gradiente completo.
  • •Defina a quantidade de graus para o deslocamento ou o número de passos para o gradiente.
  • •Aplique opções adicionais, como a preservação da luminosidade, para manter a consistência visual.

Casos de uso

Criação de esquemas de cores para sistemas de design (Design Systems).
Geração automática de variações de cores para estados de botões (hover/active).
Exploração de paletas complementares para ilustrações e layouts web.

Exemplos

1. Gerador de Paleta para UI

Designer de Interface
Contexto
Um designer precisa criar variações de cores para um sistema de botões que mantenham a mesma luminosidade para garantir acessibilidade.
Problema
Criar variações de matiz sem que as cores fiquem muito claras ou escuras.
Como usar
Defina a cor base, selecione 'Deslocamento de Matiz Personalizado' e ative 'Preservar Valor de Luminosidade'.
Configuração de exemplo
baseColor: #4A90E2, adjustmentType: custom, adjustmentValue: 45, preserveValue: true
Resultado
Uma série de cores com o mesmo nível de brilho, mas com matizes distintos para uso em diferentes estados de interação.

2. Criação de Gradiente de Marca

Desenvolvedor Front-end
Contexto
O desenvolvedor precisa de uma sequência de 5 cores para um gradiente de fundo que percorra uma parte do círculo cromático.
Problema
Calcular manualmente os valores hexadecimais para uma transição suave.
Como usar
Selecione o modo 'Gradiente (Roda completa)' e defina o número de passos para 5.
Configuração de exemplo
baseColor: #FF5733, adjustmentType: gradient, steps: 5
Resultado
Uma paleta de 5 cores gerada automaticamente, garantindo uma transição de matiz fluida e profissional.

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

O que é o deslocamento de matiz?

É a alteração da posição de uma cor no círculo cromático, permitindo criar novas tonalidades mantendo a relação original.

Posso manter o brilho da cor original?

Sim, ao ativar a opção 'Preservar Valor de Luminosidade', a ferramenta ajusta apenas o matiz, mantendo a intensidade da cor original.

Como funciona o modo gradiente?

O modo gradiente gera uma sequência de cores distribuídas uniformemente ao longo do círculo cromático com base no número de passos definido.

O que são cores complementares?

São cores opostas no círculo cromático que, quando combinadas, criam um contraste visual forte e equilibrado.

A ferramenta suporta exportação?

A ferramenta gera os resultados visualmente em HTML, permitindo que você visualize e copie os códigos das cores resultantes.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/color-hue-shifter

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 deslocamento de matiz para rotação de cor (0° a 360°)
steps number Não Aplica-se apenas quando "Gradiente (roda completa)" está selecionado. Controla quantas cores gerar na sequência do gradiente de matiz (2-20 passos)
includeComplementary checkbox Não -
preserveValue 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-hue-shifter": {
      "name": "color-hue-shifter",
      "description": "Desloque matizes de cores e crie variações com controles de rotação horária/antihorária",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-hue-shifter",
      "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]