Início
Ferramentas de Cores
Cor para Variáveis CSS

Gerador de Cor para Variáveis CSS Converte um conjunto de cores em propriedades personalizadas do CSS (variáveis).

🎨

Cor para Variáveis CSS

Converte um conjunto de cores em propriedades personalizadas do CSS (variáveis).

Adicionar Cores

Adicione cores com nomes de variáveis personalizadas usando seletores de cor.

Escolher Formato

Selecione o formato de saída: HEX, RGB ou HSL.

Copiar CSS

Copie o bloco de propriedades personalizadas :root CSS gerado.

Loading tool...

What Is Cor para Variáveis CSS?

O gerador de Cores para Variáveis CSS converte uma coleção de cores nomeadas em propriedades personalizadas de CSS (:root variables) prontas para serem coladas nos seus estilos. Você pode adicionar qualquer número de cores, dar a cada um um nome de variável semântico (como "primário", "secundário", "ênfase") e escolher o formato de saída: HEX para simplicidade, RGB separado por vírgulas para flexibilidade em rgba() ou HSL separado por vírgulas para fácil manipulação em tempo de execução. As propriedades personalizadas do CSS são a base dos sistemas de temas modernos, permitindo o modo escuro, tema de marca e atualizações dinâmicas de cores. Esta ferramenta gera o bloco de inicialização :root { --variável: valor; } para que você possa configurar rapidamente um sistema de cores. A pré-visualização ao vivo mostra todas as suas cores juntas como uma faixa de paleta.

Why Use Cor para Variáveis CSS?

Adicione cores ilimitadas com nomes de variáveis personalizadas
Três formatos de saída: HEX, RGB ou HSL
Gera um bloco de propriedades CSS limpo :root { }
Visualização da paleta de cores em tempo real
Base para sistemas de tema CSS

Common Use Cases

Tema CSS

Configure as propriedades personalizadas do CSS para o tema light/dark.

Tokens de Design

Converta tokens de sistema de design em variáveis CSS.

Cores da Marca

Crie um conjunto reutilizável de variáveis CSS para cores da marca.

Bibliotecas de Componentes

Defina variáveis de cor personalizáveis para bibliotecas de componentes CSS.

Technical Guide

As propriedades personalizadas do CSS (var(--nome)) são definidas em um seletor :root para escopo global. O formato HEX armazena o valor completo da cor: --primário: #3B82F6. O formato RGB separado por vírgulas armazena os canais: --primário: 59, 130, 246, que pode ser usado como rgb(var(--primário)) ou rgba(var(--primário), 0,5) para opacidade flexível. O formato HSL armazena: --primário: 217, 91%, 60%, usável como hsl(var(--primário)). Os formatos RGB e HSL são mais flexíveis porque permitem adicionar opacidade no ponto de uso sem redefinir a variável. As propriedades personalizadas do CSS são herdadas por todos os elementos filhos e podem ser substituídas em consultas de mídia ou seletor de classe para alternância de temas. Elas são suportadas em todos os navegadores modernos e cascata como propriedades regulares do CSS.

Tips & Best Practices

1
Use nomes semânticos como --primário, --secundário em vez de --azul, --vermelho para flexibilidade
2
O formato RGB é o mais flexível: rgba(var(--primário), 0.5) fornece controle de opacidade
3
O formato HSL permite derivar variações: hsl(var(--primário-h), var(--primário-s), 90%)
4
Substitua variáveis em consultas de mídia para modo escuro: @media (prefers-color-scheme: dark) { :root { ... } }
5
Mantenha o número de variáveis gerenciável - a maioria dos sistemas precisa de 5-10 variáveis de cor

Related Tools

Conversor HEX para RGB

Converta códigos de cor HEX em valores RGB instantaneamente com uma pré-visualização ao vivo.

🎨 Color Tools

Conversor HEX para HSL

Converta códigos de cor HEX para valores HSL (Matiz, Saturação, Luminosidade).

🎨 Color Tools

Seletor de Cores

Seletor de cores interativo com saídas em HEX, RGB, HSL e CMYK.

🎨 Color Tools

Encontrador de Cores Tailwind

Encontre a classe de cor CSS do Tailwind mais próxima para qualquer código HEX.

🎨 Color Tools

Gerador de Filtros CSS

Aplique efeitos de filtro CSS como blur, brilho, contraste e muito mais com controles visuais.

🎨 CSS & Design

Frequently Asked Questions

Q Qual formato devo escolher?

HEX para simplicidade e legibilidade. RGB se você precisar controlar opacidade via rgba(var(...), alpha). HSL se você quiser derivar variações de cor ajustando componentes individuais.

Q As propriedades personalizadas do CSS são suportadas em todos os lugares?

Sim, em todos os navegadores modernos desde 2016 (Chrome 49+, Firefox 31+, Safari 9.1+, Edge 15+). Não é suportado no IE11.

Q Posso usar variáveis para modo escuro?

Absolutamente. Defina os valores do modo claro em :root, então substitua em @media (prefers-color-scheme: dark) { :root { ... } } ou na classe .dark.

About This Tool

Cor para Variáveis CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.