Hex para variável CSS
Transforme uma cor solta em uma variável CSS reutilizável: #3366ff com o nome brand-primary vira --brand-primary: #3366ff;, com a forma abreviada expandida e o hex em minúsculas. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Hex
- #3366ff
- Nome
- brand-primary
- Valor
- #3366ff
- Hex6
- 3366ff
- Hex bruto
- #3366ff
- Nome
- --brand-primary
Uma propriedade personalizada CSS —também chamada variável CSS— é um token reutilizável que você declara uma vez e consulta com var() em toda uma folha de estilo, um arquivo de tema ou um pipeline de tokens de design.
O que é uma propriedade personalizada CSS e por que envolver uma cor hex
Propriedades personalizadas CSS são declarações CSS comuns cujos nomes começam com dois hífens. O hex continua sendo o formato de intercâmbio que a maioria dos seletores, PDFs de marca e arquivos de token ainda exporta, mas um #3366ff cru não é um contrato de folha de estilo: não tem nome, não tem prefixo -- e não tem ponto e vírgula final.
Envolvê-lo como declaração de ident com hífens é uma transformação pequena e exata que mesmo assim falha em pipelines — hashes ausentes, mistura de maiúsculas, abreviação de três dígitos sem expandir, nomes que começam com um dígito, $variáveis Sass coladas por hábito ou um invólucro var() onde só o ident cabe. Cada um desses erros produz CSS que parece quase certo e depois falha na análise ou em uma revisão.
Um passo dedicado de hex para variável CSS padroniza o contrato: validar a cor, validar o nome, expandir a abreviação, passar o hex de seis dígitos para minúsculas, preservar a capitalização do ident e emitir um espaço após os dois-pontos mais um ponto e vírgula final. O resultado é uma linha de definição pronta para colar em :root, uma classe de tema ou um tokens.css gerado, sem rederivar a gramática em cada repositório.
Onde um formatador de hex para variável CSS entrega valor de verdade
Repositórios de tokens de design e pipelines Style Dictionary convertem objetos de paleta estruturados em propriedades personalizadas CSS; um formatador compartilhado mantém cada pacote na mesma gramática de declaração em vez de templates ad hoc que discordam sobre maiúsculas do hash, abreviação ou o espaço após os dois-pontos. Bibliotecas de componentes e a documentação do Storybook podem expor um seletor de cor mais um campo de nome e copiar o declaration exato para trechos que coincidem com as folhas que irão a produção.
Geradores de tema que emitem blocos :root claros e escuros precisam de um passo final que nunca invente um ident com hífens ilegal nem omita o ponto e vírgula. Prefira esta capacidade quando você já tem um token hex e um nome escolhido e só precisa da linha de definição; ela não converte hex em HSL, não resolve cores CSS nomeadas como rebeccapurple e não aceita hex alfa de oito dígitos.
Fixe a string declaration nos testes, mantenha os nomes em kebab-case ou na convenção da casa, e você obtém linhas de propriedade personalizada reproduzíveis para sistemas de design, workers na borda e geradores de documentação sem levantar uma biblioteca completa de ciência da cor só para envolver.
Casos de uso
Documentação de Storybook e componentes
Deixe os autores escolherem um hex e um nome de token e depois copiem o campo declaration exato para trechos de código que coincidem com o bloco :root de produção.
Geradores de temas e paletas
Depois de calcular uma rampa hex clara ou escura, envolva cada parada como propriedade personalizada CSS com nome para que o arquivo de tema seja CSS válido na primeira emissão.
Perguntas frequentes
Como envolvo uma cor hex como propriedade personalizada CSS?
Envie hex (3 ou 6 dígitos, # opcional) e name (com ou sem --).
Quais formatos hex são aceitos?
Cores hexadecimais de três dígitos (#RGB) e de seis dígitos (#RRGGBB), com ou sem # inicial. A abreviação é expandida. Formas com alfa (#RGBA, #RRGGBBAA) e cores CSS nomeadas não são aceitas.
Como é a linha de definição?
Sempre --<ident>: #<seis dígitos hex minúsculos>; com um espaço após os dois-pontos e um ponto e vírgula final. Exemplo: --brand-primary: #3366ff;.
Quais nomes de variável são recusados?
O nome deve começar com letra ou sublinhado, com um hífen opcional antes, e usar só letras, dígitos, hífens e sublinhados. Um nome que começa com dígito ou uma variável $ do Sass é recusado em vez de gerar CSS quebrado.
O nome precisa começar com --?
Não. Você pode digitar brand-primary ou --brand-primary e o resultado é o mesmo: a linha final sempre traz os dois hífens, como em --brand-primary: #3366ff;.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/color/hex-to-css-var \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#3366ff","name":"brand-primary"}'const res = await fetch("https://api.kit.forhosting.com/color/hex-to-css-var", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#3366ff",
"name": "brand-primary"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex-to-css-var",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#3366ff",
"name": "brand-primary"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-to-css-var", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#3366ff","name":"brand-primary"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#3366ff","name":"brand-primary"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-to-css-var", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"hex": "#3366ff",
"name": "brand-primary"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_to_css_var",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Limites
max_name_len | 64 |
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
As equipes ainda guardam cores de marca como códigos hex no Figma, em PDFs de marca e em paletas JSON, e depois precisam de uma única linha determinística para colar em :root ou em um bloco de tema. Esta ferramenta envolve uma cor hex validada em uma declaração de propriedade personalizada com nome: você escolhe o identificador, o solver normaliza o hex para seis dígitos minúsculos com hash, garante que o nome seja um ident com hífens legal e devolve a linha de definição --name: #rrggbb;. Códigos hex inválidos e identificadores ilegais falham com invalid_input em vez de emitir CSS que não analisaria. A mesma lógica pura roda grátis no navegador e na API, de modo que os tokens gerados não divergem entre prévias locais, integração contínua e folhas de produção.
O que é uma propriedade personalizada CSS e por que envolver uma cor hex
Você escreve --brand-primary: #3366ff; em :root ou em qualquer seletor e depois consome o token com color: var(--brand-primary) em botões, links e superfícies. Essa fonte única da verdade é como os sistemas de design mantêm um hex do Figma, uma paleta JSON e uma folha de produção em acordo sem caçar dezenas de literais embutidos.
Contrato de entrada, regras de validação e a linha de definição
O espaço em branco ao redor é recortado. Em caso de sucesso o hex sempre volta como #rrggbb minúsculo, a abreviação de três dígitos é expandida (#abc vira #aabbcc) e o nome volta com prefixo -- preservando a capitalização original das letras. O campo principal declaration é a própria linha de definição: --brand-primary: #3366ff;. Envie um corpo JSON com duas strings obrigatórias. hex é a cor: três ou seis dígitos hexadecimais, hash inicial opcional, letras maiúsculas ou minúsculas. Os aliases color, value, text, input e code são aceitos pelo mesmo solver. name é o ident da propriedade personalizada, com ou sem -- inicial; os aliases incluem variable, var, var_name, custom_property e ident. A mesma string se parte em variable e value para tabelas de tokens, e root_block a envolve como :root { --brand-primary: #3366ff; } para semear uma folha com uma só colagem. Os canais inteiros r, g e b, mais as flags shorthand, had_hash e had_prefix, descrevem a forma original. Validação falha —campo ausente, hex vazio após um hash, comprimento diferente de três ou seis, caracteres não hex, prefixo de programação 0x, espaços dentro do nome, prefixo $ do Sass, invólucro var(), ident que não começa com letra ou sublinhado, ou um nome com mais de sessenta e quatro caracteres incluindo o prefixo— devolve invalid_input nomeando o campo e nunca é cobrada. O preço é um fixo US$ 0,002 por requisição bem-sucedida.
Onde um formatador de hex para variável CSS entrega valor de verdade
Como a implementação é parse pura de tier A, cada chamada bem-sucedida custa o preço-base publicado US$ 0,002 sem tokens de modelo e sem rede de saída, e a validação falha não consome saldo.
Casos de integração
Pipelines de tokens de design e folhas de estilo
Transforme entradas hex de um JSON de marca em linhas estáveis --name: #rrggbb; para Style Dictionary, Theo ou um tokens.css próprio, sem deriva de maiúsculas nem de abreviação entre máquinas.
Perguntas técnicas
O nome precisa de um -- inicial?
Não. brand-primary e --brand-primary viram ambos --brand-primary. A capitalização é preservada. $nomes Sass e invólucros var() são rejeitados com invalid_input.
Quanto custa a ferramenta de hex para variável CSS?
A ferramenta do navegador é gratuita. Pedidos API usam saldo pré-pago KIT a US$ 0,002 por chamada bem-sucedida; entrada inválida não é cobrada.