Pular para o conteúdo
Mobiis Design System

Gerador de cores

No MDS, cada paleta nasce de uma cor só (a semente, o passo 400). O resto da escala e os pares de texto (on-*) são calculados, não desenhados à mão. Use o gerador para testar uma cor antes de propor uma paleta nova: escolha uma semente, veja se os textos passam no contraste e copie o resultado.

Serve para comparar uma cor nova com o que já existe.

Vira --mds-colors-palettes-<nome>-… na exportação.

Define o que conta como "passa" no APCA e no WCAG.

Papéis semânticos

Os cinco tons que o MDS expõe por paleta, cada um com o seu texto (on-*). O tema claro usa os passos 50, 200, 400, 500 e 600 em todas as paletas. No tema escuro, os passos variam por paleta (veja a opção acima).

Como fica na interface

Escala completa

O passo 400 é a própria semente. Os mais claros misturam com branco (90, 75, 50 e 25%); os mais escuros, com preto (25, 50, 75, 90 e 97%). O texto de cada passo é o branco ou o preto, levemente tingidos com a cor da semente, que tiver mais contraste APCA.

Exportar

Como funciona

Seção intitulada “Como funciona”
  1. Escala: a semente é o passo 400. Os passos 300, 200, 100 e 50 misturam a semente com branco (25%, 50%, 75% e 90%). Os passos 500, 600, 700, 800 e 900 misturam com preto (25%, 50%, 75%, 90% e 97%).
  2. Papéis semânticos: o MDS só expõe cinco tons por paleta: lighter, light, main, dark e darker. No tema claro eles vêm dos passos 50, 200, 400, 500 e 600, em todas as paletas. No escuro, os passos variam: 9 das 12 paletas do MDS usam 700, 600, 500, 400 e 300; as duas de marca usam 700, 600, 500, 300 e 200; e a Brand Log usa 600, 500, 400, 200 e 100. A ferramenta oferece os três e escolhe o certo ao carregar uma paleta existente.
  3. Texto (on-*): cada paleta tem dois candidatos, branco e preto, cada um tingido com cerca de 3% da cor da semente, para o texto nunca ficar num branco ou preto sem matiz. Para cada fundo, vence o candidato com maior contraste APCA (em valor absoluto).
  4. Contraste: o APCA (Lc) é o critério de escolha. O WCAG (razão de contraste) aparece ao lado como referência. O piso de conforto do MDS é Lc 45 para texto de 16 px, e o build de tokens avisa quando um par fica abaixo.

Os detalhes do algoritmo, incluindo as exceções conhecidas em relação à produção, estão em Geração de Cores.

O que esta ferramenta não faz

Seção intitulada “O que esta ferramenta não faz”
  • Não altera o MDS. Ela só calcula e exporta. Para adicionar uma paleta de verdade, use o formato Semente da exportação, registre a paleta em scripts/tokens/palettes.config.js e rode npm run tokens.
  • O tema escuro é uma prévia. No MDS, o _dark.scss ainda é mantido à mão, e não existe um único mapeamento. Com o padrão, o resultado bate com a produção nas paletas que o usam. Nas de marca, o texto do tema escuro é ajustado à mão e difere do calculado. A gray no tema escuro é uma escala própria, azulada, e não deriva da semente.
  • Não substitui o Figma. As sementes oficiais vêm do arquivo Design System 2.0. Use o seletor “carregue uma paleta do MDS” para comparar uma cor nova com as existentes.

Precisa linkar uma cor?

Seção intitulada “Precisa linkar uma cor?”

A URL se atualiza sozinha enquanto você mexe. Por exemplo, ?semente=408afa&nome=minha-marca abre a página já com essa cor e esse nome.