Gerador de Tokens de Design CSS
Gere uma paleta de cores OKLCH 50-950 completa mais propriedades CSS personalizadas semânticas — primária, superfície, borda, anel e muito mais, com uma variante de modo escuro opcional — de uma única cor hex da marca.
Entrada
Escolha uma cor ou digite um valor HEX diretamente.
Usado como chave da paleta, por exemplo --cor-marca-500.
Saída moderna valores oklch(); Hex exibe clássico #rrggbb.
Adiciona um segundo bloco com substituições de token semântico adequadas para o modo escuro.
Dimensione a saturação da paleta. 100 mantém a croma da cor da marca.
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-design-token-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"brandColor": "#464aff",
"tokenName": "brand",
"colorFormat": "oklch",
"includeDarkMode": "true",
"darkSelector": ".dark",
"chromaBoost": "100"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-design-token-generator` tool (CSS Design Token Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-design-token-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Tokens de Design CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que são tokens de design?
Tokens de design são valores nomeados e reutilizáveis — cores, espaçamento, raios, tamanhos de tipo — que compõem um sistema de design. Em vez de hard-code #3b3ff0 em vinte componentes diferentes, você define --cor-primaria uma vez e a referencia em qualquer lugar. Altere o valor do token e todos os componentes que o usam são atualizados juntos. Tokens são o que permite que um sistema de design permaneça consistente conforme cresce e o que permite que um único comutador de modo escuro repinte um produto inteiro.
Por que propriedades CSS personalizadas são um formato alvo comum
Os tokens de design podem ser exportados para muitos formatos — JSON, um objeto JS/TS, variáveis Sass — mas propriedades CSS personalizadas (--meu-token: valor;) têm uma vantagem distinta: são nativas do navegador, resolvidas em tempo de renderização e em cascata e substituem automaticamente por seletor. É isso que torna o theming possível com CSS simples: defina seus tokens uma vez em :root, depois substitua um subconjunto deles em .escuro (ou @media (prefers-color-scheme: escuro)), e cada componente que consome var(--cor-primaria) é repintado sem JavaScript ou rebuild. Esta ferramenta visa propriedades CSS personalizadas especificamente porque esse comportamento de cascata e substituição é exatamente o que um sistema de cores precisa.
Como esta ferramenta constrói a paleta
Começando com uma única cor hex da marca, a ferramenta interpola através de OKLCH — um espaço de cor perceptualmente uniforme — para gerar uma escala de 11 paradas (50 até 950), a mesma forma usada pela paleta padrão do Tailwind. Como as etapas de claridade OKLCH são perceptualmente uniformes, cada parada parece um salto consistente no brilho, não os saltos desiguais que você obtém interpolando RGB ou HSL bruto. Cada parada gerada também é fixada de volta ao espaço de cores sRGB, para que sempre render como uma cor válida e exibível, mesmo para cores de marca altamente saturadas.
No topo da paleta bruta, a ferramenta mapeia um conjunto fixo de funções semânticas — --cor-primaria, --cor-superficie, --cor-borda, --cor-anel e outras — para paradas específicas (por exemplo, primaria → 600 em modo claro, 400 em modo escuro). Esses nomes semânticos são o que seus componentes devem realmente referenciar; a escala bruta 50–950 existe principalmente para respaldar.
Como usar esta ferramenta
- Escolha uma Cor da Marca (ou digite um valor hex diretamente).
- Defina um Nome do Token — torna-se a chave da paleta, por exemplo
--cor-marca-500. Use algo específico para sua marca ou produto, comoacmeouindigo. - Escolha um Formato:
oklch()para valores modernos prontos para gama ampla, ou hex simples para compatibilidade máxima com ferramentas mais antigas. - Deixe Incluir variante do modo escuro ativada para obter um segundo bloco de substituições semânticas e escolha um Seletor escuro que corresponda ao seu framework — uma classe
.escuro(Tailwind, shadcn), um atributo[data-tema="escuro"]ou a consulta@media (prefers-color-scheme: escuro)para theming no nível do sistema operacional sem toggle JavaScript. - Ajuste Croma para dimensionar a saturação da paleta para cima ou para baixo — 100 mantém a intensidade original da cor da marca, valores mais baixos produzem uma paleta mais silenciosa e dessaturada.
- Copie o CSS gerado ou baixe-o como arquivo
.csse coloque-o em sua folha de estilo.
A saída é atualizada instantaneamente conforme você ajusta qualquer controle.
FAQ
Por que a paleta inclui paradas brutas (--cor-marca-600) e tokens semânticos (--cor-primaria)?
A escala bruta é a fonte da verdade; os tokens semânticos são uma camada de alias em cima. Os componentes devem referenciar nomes semânticos — --cor-primaria, --cor-borda — não diretamente as paradas brutas, portanto redesenhar a paleta (ou trocar cores de marca) nunca exige tocar no código do componente.
O que o slider Croma realmente faz? Ele dimensiona a saturação (croma) de cada parada gerada em relação à própria croma da cor da sua marca, enquanto re-fixa cada parada de volta ao espaço de cores sRGB. 100 reproduz a saturação da cor da marca o mais próximo possível do que o espaço de cores de cada parada de luminosidade permite; valores abaixo de 100 produzem uma paleta mais calma e mais silenciosa; valores acima de 100 empurram em direção à cor mais saturada exibível nessa luminosidade.
Qual seletor de modo escuro devo escolher?
Use .escuro se seu framework (Tailwind, shadcn/ui e a maioria das bibliotecas de componentes) alternar uma classe em <html> ou <body>. Use [data-tema="escuro"] se você alternar um atributo de dados. Use a consulta @media se quiser que a página siga automaticamente o tema do sistema operacional, sem toggle.
Posso usar os valores oklch() se precisar suportar navegadores mais antigos?
oklch() é suportado em todos os navegadores principais atuais, mas se você precisar suportar navegadores significativamente mais antigos, mude o Formato para Hex — a mesma paleta e estrutura semântica são geradas de qualquer forma, apenas com valores #rrggbb em vez de oklch().
Privacidade
Tudo acontece no seu navegador. Nenhuma cor, nome de token ou configuração que você insira é jamais enviada para um servidor — o CSS é gerado e atualizado localmente conforme você digita.