N/NEUMO///

Gerador de Variáveis CSS

Monte um design token de cores em custom properties (--var) prontas para :root.

Cores
 estilo.css

Propriedades CSS utilizadas

Custom properties (--nome)

Variáveis nativas do CSS, declaradas com prefixo -- e lidas com var(--nome). Diferente de pré-processadores, elas existem em tempo real no navegador e podem mudar via JavaScript ou media queries.

:root

Seletor que representa o elemento raiz do documento (html); declarar variáveis ali as torna acessíveis globalmente em toda a folha de estilo.

Perguntas frequentes

Qual a vantagem sobre variáveis do Sass/Less?

Custom properties do CSS podem ser lidas e alteradas em tempo de execução via JavaScript, e respeitam cascata/herança — ideal para temas claro/escuro, como neste site.

Como usar uma variável no CSS?

Basta escrever var(--nome-da-variavel) em qualquer propriedade que aceite o tipo de valor correspondente.

Posso ter valores diferentes por seção da página?

Sim — redeclare a mesma variável dentro de qualquer seletor mais específico para sobrescrever o valor só naquele escopo.

Ferramentas relacionadas

Cores

Gerador de Paleta de Cores

Gere paletas harmônicas — complementar, análoga, tríade — a partir de uma cor base.
Cores

Conversor de Cores

Converta entre HEX, RGB e HSL instantaneamente, nos dois sentidos.
Efeitos & Visual

Gerador de Gradientes

Gradientes lineares, radiais e cônicos com múltiplos stops de cor.