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

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 →

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.