Categorias

← View All Tools

Encurtador de Cor

Encurtar códigos HEX de 6 dígitos para 3 dígitos (ex: #FFFFFF para #FFF)

Incluir cores que não podem ser encurtadas com razões

Fatos principais

Categoria
Design
Tipos de entrada
textarea, select, checkbox
Tipo de saída
text
Cobertura de amostras
4
API disponível
Yes

Visão geral

O Encurtador de Cor é uma ferramenta prática para desenvolvedores e designers que desejam otimizar seus arquivos CSS, convertendo códigos de cores hexadecimais de 6 dígitos para o formato abreviado de 3 dígitos sempre que possível.

Quando usar

  • •Ao reduzir o tamanho de arquivos CSS para melhorar o tempo de carregamento do site.
  • •Ao limpar e padronizar paletas de cores em projetos de design web.
  • •Ao converter rapidamente listas extensas de cores para um formato mais legível e compacto.

Como funciona

  • •Cole seus códigos HEX na caixa de entrada, um por linha.
  • •Selecione o formato de saída desejado, como maiúsculas, minúsculas ou sem o símbolo de hash.
  • •Ative a opção de incluir cores não encurtáveis se desejar manter a lista original completa.
  • •Clique no botão de processar para obter seus códigos otimizados instantaneamente.

Casos de uso

Otimização de folhas de estilo (CSS) para produção.
Padronização de variáveis de cores em sistemas de design.
Limpeza de exportações de cores vindas de softwares de edição gráfica.

Exemplos

1. Otimização de CSS para Performance

Desenvolvedor Front-end
Contexto
Um projeto web possui um arquivo CSS com centenas de definições de cores em formato de 6 dígitos.
Problema
O arquivo está maior do que o necessário, impactando levemente a performance de carregamento.
Como usar
Cole a lista de cores do CSS na ferramenta e selecione o formato 'CSS format'.
Configuração de exemplo
Formato: CSS format
Resultado
Todas as cores compatíveis foram reduzidas para 3 dígitos, mantendo a sintaxe correta para o navegador.

2. Padronização de Paleta de Cores

Designer UI
Contexto
Uma equipe de design precisa unificar uma lista de cores hexadecimais enviadas por diferentes membros.
Problema
A lista contém uma mistura de formatos maiúsculos e minúsculos, dificultando a organização.
Como usar
Insira as cores na ferramenta e escolha o formato 'lowercase' para padronizar tudo.
Configuração de exemplo
Formato: lowercase
Resultado
Uma lista limpa, uniforme e otimizada, pronta para ser inserida no guia de estilo do projeto.

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 de Áudio OPUS Livres de Direitos Autorais
Coleção de áudio OPUS de nova geração com compressão e qualidade superiores, otimizada para streaming moderno incluindo sons da natureza e música de meditação
task compress
sample
Amostras de Áudio AAC Livres de Direitos Autorais
Coleção de áudio AAC de alta qualidade para testes e desenvolvimento, incluindo sons da natureza e música de meditação
task compress
sample
Amostras de Áudio WAV Livres de Direitos Autorais
Coleção de áudio WAV sem compressão para testes e desenvolvimento, incluindo sons da natureza e música de meditação
task compress
sample

Hubs relacionados

Ferramentas de Design para Convert
Explore 98 ferramentas de design para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Design para Generate
Explore 19 ferramentas de design para fluxos de generate e encontre utilitários próximos com rapidez.
Ferramentas de Json para Convert
Explore 100 ferramentas de json para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Image para Convert
Explore 100 ferramentas de image para fluxos de convert e encontre utilitários próximos com rapidez.

FAQ

O que é um código HEX de 3 dígitos?

É uma forma abreviada de representar cores hexadecimais onde cada par de caracteres é idêntico (ex: #FFFFFF torna-se #FFF).

Todas as cores podem ser encurtadas?

Não. Apenas cores onde cada par de dígitos é composto por caracteres iguais podem ser reduzidas para 3 dígitos.

A ferramenta altera a cor original?

Não, o valor visual da cor permanece exatamente o mesmo; apenas a representação do código é otimizada.

Posso remover o símbolo '#' dos resultados?

Sim, basta selecionar a opção 'FFF (no hash)' no menu de formato de saída.

É possível processar várias cores de uma vez?

Sim, a ferramenta aceita uma lista de cores, processando cada uma individualmente conforme as regras definidas.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/color-shortener

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
colors textarea Sim -
format select Sim -
includeUnshortenable checkbox Não Incluir cores que não podem ser encurtadas com razões

Formato de resposta

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

Documentação de MCP

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

{
  "mcpServers": {
    "elysiatools-color-shortener": {
      "name": "color-shortener",
      "description": "Encurtar códigos HEX de 6 dígitos para 3 dígitos (ex: #FFFFFF para #FFF)",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-shortener",
      "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]