# De paleta de imagem para design tokens Extrai cores dominantes da imagem por k-means e exporta como variáveis CSS / SCSS / config Tailwind / tokens JSON, com nomes e escala de tons > Página canônica: https://elysiatools.com/pt/tools/image-to-design-tokens - **Categoria:** Design - **Palavras-chave:** paleta, tokens, cor, css, tailwind ## Visão geral Envie uma imagem e a ferramenta: 1. Reduz e aplica **k-means** para achar as cores dominantes (3 / 5 / 8 / 12 à escolha). 2. Nomeia cada cor (numérico `color1`… ou semântico `primary`/`accent`…) com o % de pixels. 3. Gera opcionalmente uma **escala de tons** (Tailwind 50–950 ou Material 100–900) mantendo matiz e saturação e variando a luminosidade. 4. Serializa o resultado em variáveis CSS, SCSS, config Tailwind, tokens JSON ou todos. Escolha um `prefixo` e um estilo de nomes, copie o código gerado — seu design system consome a paleta na hora. ## Entradas - **Imagem de origem** (file): PNG, JPG, WebP… - **Tamanho da paleta** (select) - **Escala de tons** (select) - **Formato de saída** (select) - **Prefixo de token** (text): e.g. brand, app, theme - **Estilo de nomes** (select) ## Quando usar - Ao iniciar um novo projeto web e precisar extrair a identidade visual de uma imagem de referência ou logotipo. - Ao construir ou atualizar um design system que exige escalas de cores consistentes a partir de uma foto conceitual. - Ao traduzir paletas de cores de moodboards visuais diretamente em código limpo e estruturado para desenvolvedores. ## Como funciona - Faça o upload de uma imagem nos formatos PNG, JPG, WebP, GIF ou AVIF. - Defina o número de cores dominantes a extrair (3, 5, 8 ou 12) e escolha se deseja gerar uma escala de tons (Tailwind ou Material). - Configure o prefixo dos tokens, o estilo de nomenclatura (numérico ou semântico) e o formato de exportação desejado. - Copie o código gerado em CSS, SCSS, Tailwind JS ou JSON diretamente para o repositório do seu projeto. ## Casos de uso - Criação rápida de temas escuros e claros a partir de uma imagem conceitual de marca. - Geração de arquivos de configuração Tailwind CSS baseados em fotos de produtos ou campanhas de marketing. - Padronização de tokens de cores em formato JSON para compartilhamento entre equipes de design e desenvolvimento. ## Perguntas frequentes ### Como a ferramenta identifica as cores dominantes? Ela reduz a imagem e aplica o algoritmo de agrupamento k-means para agrupar pixels semelhantes e extrair as cores mais representativas. ### Quais formatos de exportação são suportados? Você pode exportar como variáveis CSS, variáveis SCSS, objeto de configuração do Tailwind (JS), tokens de design JSON ou todos juntos. ### Posso gerar escalas de cores automaticamente? Sim, a ferramenta gera escalas no estilo Tailwind (50–950) ou Material Design (100–900) variando a luminosidade e mantendo o matiz. ### O que faz a opção de nomenclatura semântica? Ela nomeia as cores extraídas usando termos funcionais como 'primary' e 'accent' em vez de nomes puramente numéricos. ### Há limite de tamanho para o upload da imagem? Sim, o limite máximo para o arquivo de imagem enviado é de 10 MB. ## Ferramentas relacionadas - [Gerador de Data URI](https://elysiatools.com/pt/tools/data-uri-generator): Converte arquivos em Data URIs (Base64 ou porcentagem-codificada) para incorporar imagens, fontes e recursos diretamente em HTML, CSS ou Markdown - [Conversão de Imagens em Lote](https://elysiatools.com/pt/tools/batch-convert): Converter múltiplas imagens para diferentes formatos com configurações de qualidade - [Corte de Imagens em Lote](https://elysiatools.com/pt/tools/image-batch-crop): Cortar múltiplas imagens para dimensões específicas ou proporção de aspecto com posicionamento personalizado. Retorna imagens cortadas como download ZIP. - [Redimensionador de Imagem](https://elysiatools.com/pt/tools/image-resize): Ferramenta profissional de redimensionamento de imagem com múltiplos métodos, preservação de proporção e conversão de formato, incluida a funcionalidade de desenfoque de fundo, suportando GIF/Animated WebP/APNG e JPEG/PNG/WEBP. - [Conversor de profundidade de imagem para PNG](https://elysiatools.com/pt/tools/image-to-bit-depth-png): Converte imagens para profundidades PNG monocromáticas, indexadas, cinza, RGB ou RGBA exatas com verificação. - [Conversor em lote de imagens para WebP](https://elysiatools.com/pt/tools/image-to-webp-batch-converter): Converte imagens ou imagens dentro de um ZIP para WebP e retorna um ZIP - [Folha de Contato PDF](https://elysiatools.com/pt/tools/pdf-photo-contact-sheet): Gera folha de contato com miniaturas, nomes e EXIF - [Conversão de Imagens em Lote](https://elysiatools.com/pt/tools/image-batch-convert): Converta múltiplos arquivos de imagem entre diferentes formatos como JPG, PNG, WebP, AVIF, TIFF, GIF com configurações de qualidade e processamento em lote ## Exemplos - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato - [Exemplos de Processamento de Imagens Web TypeScript](https://elysiatools.com/pt/samples/web-image-processing-typescript): Exemplos de processamento de imagens Web TypeScript incluindo leitura/salvamento, redimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Android Java](https://elysiatools.com/pt/samples/android-image-processing-java): Exemplos de processamento de imagem Android Java incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Android Kotlin](https://elysiatools.com/pt/samples/android-image-processing-kotlin): Exemplos de processamento de imagem Android Kotlin incluindo leitura/escrita, dimensionamento e conversão de formato ## Conteúdo relacionado - [Ferramentas de conversao de formatos de imagem e exportacao animada](https://elysiatools.com/pt/hubs/image-convert): Compare conversores de imagem para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 e saidas voltadas para animacao em um unico hub. - [Ferramentas de intercambio JSON e traducao de formatos](https://elysiatools.com/pt/hubs/json-convert): Compare ferramentas de conversao JSON para CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN e outros formatos estruturados em um unico hub. - [Ferramentas de inspecao, diff e transformacao JSON](https://elysiatools.com/pt/hubs/json-utility): Reune em um so hub ferramentas para formatar JSON, comparar mudancas, inspecionar caminhos, validar schema, mesclar arquivos e transformar dados para fluxos de API e dados. - [Ferramentas de limpeza, acabamento e preparo em lote de imagens](https://elysiatools.com/pt/hubs/image-utility): Reune em um so hub ferramentas para limpar imagens, recortar bordas, adicionar margem ou moldura, redimensionar e comprimir em lote, aplicar marca d agua e dar acabamento visual.