# Gerador de sistema de cor: um hex, quatro formatos de output

> Cola um hex de marca. Obténs uma escala de 11 passos, tokens semânticos, pareamento dark-mode, e output pronto a copiar para CSS, Tailwind, SCSS e Figma Tokens.

- **Source:** https://amplifiedcreations.com/pt/lab/colour-system-generator
- **Publisher:** amplified creations (https://amplifiedcreations.com/)
- **Published:** 2026-05-16
- **Updated:** 2026-05-17
- **Language:** pt
- **Stack:** HTML, JavaScript, HSL, Design tokens, Tailwind, Figma
- **Live demo:** https://ptthe13.github.io/amplifiedlabs/colour-system-generator/
- **Source code:** https://github.com/PTthe13/amplifiedlabs/tree/main/colour-system-generator

---

Os designers re-derivam a mesma escala de cor a partir de um hex de marca em cada projeto novo. A aritmética é mecânica — o Tailwind tem, o Material tem, qualquer design system tem — mas a área de superfície para copiar entre eles é chata. Então construímos uma ferramenta de um único ficheiro que corre a matemática uma vez e despeja todos os formatos que razoavelmente entregarias a um developer.

## O que te dá

- **Escala de 11 passos** (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) — ancorada a alvos de luminosidade perceptualmente uniformes
- **Tokens semânticos** — success, warning, danger, info — derivados de rotações de tonalidade configuráveis em torno da tua marca
- **Pareamento dark-mode** — mapeamento automático de superfície/foreground que vira com `prefers-color-scheme`
- **Quatro formatos de output**: CSS custom properties, config Tailwind, variáveis SCSS, JSON do Figma Tokens Studio

## Como funciona

A escala vive em espaço HSL. A luminosidade é ancorada numa escada escolhida à mão (97, 93, 86, 76, 64, 50, 42, 34, 26, 17, 10) que lê de forma uniforme em todas as tonalidades — fruto de alguns milhares de horas a olhar para sistemas de marca e ajustar até laranja, roxo, azul, verde e vermelho parecerem todos iguais no passo 500.

A saturação desce ligeiramente nos extremos. Os tons mais claros mantêm-se legíveis como papel, os mais escuros não chegam a fluorescente. Sem esse decaimento, um laranja saturado no passo 950 parece um cone de trânsito à sombra em vez de uma cor de marca na sua leitura mais baixa.

Os tokens semânticos derivam por rotação da tonalidade da marca. O spread default é 120° — longe o suficiente para que success e danger se sintam distintos, perto o suficiente para que continuem a sentir-se uma família. Warning fica a 45° da marca. Info fica oposto a success. Os quatro respeitam o envelope de saturação da marca.

## Porque construímos isto

Continuávamos a abrir um ficheiro Figma novo, a arrastar a escala slate do Tailwind, a re-tingir, a exportar, a colar no repo do developer, a ver mal no design system, a voltar ao Figma. O loop custava duas horas por projeto. Esta ferramenta corre o loop em três segundos — e despeja quatro formatos ao mesmo tempo para ninguém perguntar "tens isto em tokens Figma?"

## Usa-a

É um único ficheiro HTML. Abre localmente ou usa a versão live. Cola o hex da tua marca, dá um nome ao prefixo CSS, clica em qualquer swatch para copiar o hex, copia o output formatado, cola no teu stack. [Abrir no GitHub →](https://github.com/PTthe13/amplifiedlabs/tree/main/colour-system-generator)

## Ressalvas

A luminosidade perceptual em HSL é aproximada. Para marcas que dependem de contraste quase matemático para daltonismo (dashboards financeiros, interfaces accessibility-first), usa ferramentas APCA ou CIELAB por cima deste output. A escala aqui é um ponto de partida que é *quase sempre* melhor do que o que construirias à mão em vinte minutos — mas não substitui uma auditoria de acessibilidade em WCAG AAA.

---

Publicado por amplified creations, estúdio de tecnologia independente em Leiria e Lisboa, Portugal. Contacto: info@amplifiedcreations.com · Mais: https://amplifiedcreations.com/llms.txt