Paleta de Cores para Variáveis CSS

• Vários formatos de saída: nosso conversor de paleta de cores para variáveis CSS suporta quatro formatos de saída: HEX (#rrggbb), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)) e "Todos os formatos", que gera HEX, RGB, HSL e variáveis individuais de canal R/G/B em um único bloco - perfeito para compor valores rgba().
• Geração instantânea de variáveis CSS: insira seus nomes de cor e valores hex, escolha o seletor e o formato, e clique em "Gerar" para obter declarações de propriedades personalizadas CSS prontas para colar na hora. Nosso conversor também suporta colagem em massa - insira várias cores de uma vez no formato nome: #hex.
• Paleta de cores para variáveis CSS segura online: toda a conversão roda inteiramente no seu navegador. Seus valores de cor e nomes de variável nunca são enviados a qualquer servidor quando você usa nosso conversor online - 100% privado, funciona totalmente offline após carregar.
• Paleta de cores para variáveis CSS - sem instalação: use nosso conversor grátis diretamente no seu navegador, sem downloads, sem complementos e sem conta. Suporta seletores personalizados, prefixos de variáveis e entrada de cores em massa para fluxos de design system.

• Geração de tokens de design system: converta a paleta de cores da sua marca em propriedades personalizadas CSS para um design system. Use nosso conversor de paleta de cores para variáveis CSS para gerar todos os tokens de cor com um clique e colá-los na folha de estilos global ou arquivo de tokens de design.
• Extensão de tema do Tailwind CSS: gere variáveis CSS a partir das cores da sua marca e referencie-as na configuração do Tailwind com var(--nome-cor). Nosso conversor facilita conectar sua paleta de design ao sistema de temas do Tailwind.
• Troca de tema em modo escuro: defina paletas de cores clara e escura como variáveis CSS sob seletores diferentes (.light, .dark ou [data-theme]). Use nosso conversor com a opção de seletor personalizado para gerar os dois blocos de tema.
• Documentação de cores da marca: converta a paleta de cores hex de um guia de estilo de marca em variáveis CSS para entrega aos desenvolvedores. Nosso conversor gera variáveis limpas e nomeadas que correspondem às convenções de nomes da equipe de design.
• Tematização de bibliotecas de componentes: gere propriedades personalizadas CSS para os tokens de cor de uma biblioteca de componentes. Use a opção de prefixo de variáveis no nosso conversor para criar namespaces (por exemplo, --brand-color-primary) e evitar conflitos.
• Composição RGBA com variáveis de canal: use a saída "Todos os formatos" para gerar variáveis individuais de canal R, G e B junto com a cor completa. Isso permite compor valores rgba() com opacidade dinâmica: rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.5).

Um conversor de paleta de cores para variáveis CSS é uma ferramenta que transforma uma lista de valores de cor hex em declarações de propriedades personalizadas CSS - também conhecidas como variáveis CSS. As propriedades personalizadas CSS são definidas com prefixo de hífen duplo (por exemplo, --color-primary: #3b82f6 ) e podem ser referenciadas em qualquer lugar da sua folha de estilos com var(--color-primary) . Nosso conversor de paleta de cores para variáveis CSS suporta formatos de saída HEX, RGB, HSL e combinados, com seletores e prefixos de variáveis configuráveis para fluxos de design system.

1. Insira suas cores: adicione cores uma a uma com o seletor de cor e o campo hex, ou use o recurso de colagem em massa para inserir várias cores de uma vez no formato nome: #hex. Cada cor recebe um nome de variável que se torna o nome da propriedade personalizada CSS.
2. Configure as opções de saída: escolha o formato de saída (HEX, RGB, HSL ou todos os formatos), o seletor CSS (:root, .theme ou personalizado) e um prefixo de variáveis opcional. Toda a configuração roda localmente no seu navegador - seus valores de cor nunca saem do seu dispositivo.
3. Copie ou baixe o CSS: clique em "Gerar variáveis CSS" para produzir o bloco CSS completo. Copie-o para a área de transferência ou baixe-o como arquivo .css pronto para importar no seu projeto.

• Variáveis HEX: valores de cor hex padrão (por exemplo, --color-primary: #3b82f6 ). Compatíveis com todos os navegadores e o formato mais compacto para tokens de cor.
• Variáveis RGB: notação de função RGB (por exemplo, --color-primary: rgb(59, 130, 246) ). Útil quando você precisa aplicar opacidade com rgba() sobre uma cor fixa.
• Variáveis HSL: notação de função HSL (por exemplo, --color-primary: hsl(217, 91%, 60%) ). Preferida por muitos design systems porque matiz, saturação e luminosidade são ajustáveis de forma independente.
• Variáveis de canal (formato "Todos"): valores individuais de canal R, G e B (por exemplo, --color-primary-r: 59 ) que permitem compor rgba() com opacidade dinâmica: rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.5) .

As propriedades personalizadas CSS diferenciam maiúsculas de minúsculas - --Color-Primary e --color-primary são variáveis diferentes. Nosso conversor de paleta de cores para variáveis CSS converte automaticamente os nomes de variáveis para kebab-case em minúsculas, seguindo as convenções de nomes do CSS. Variáveis definidas em :root ficam disponíveis globalmente. Variáveis definidas em um seletor de classe (por exemplo, .dark ) só se aplicam quando essa classe está presente em um elemento ancestral - útil para troca de tema.