Expandir cor hex abreviada
Transforme a forma abreviada na forma longa que os navegadores usam: #f0a vira #ff00aa porque cada dígito é duplicado, e você também recebe #FF00AA em maiúsculas e os canais 255, 0 e 170. 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
- #f0a
- Hex
- #ff00aa
- Hex sem #
- ff00aa
- Maiúsculas
- #FF00AA
- Forma abreviada
- #f0a
CSS e ferramentas de design costumam escrever cores na forma abreviada de três dígitos, como #f0a, em vez da forma completa de seis dígitos #ff00aa. Os navegadores expandem essa abreviação dobrando cada dígito hexadecimal para que cada canal vire um byte completo. Esta ferramenta de expansão de cor hex abreviada aceita um código de três dígitos com ou sem cerquilha inicial, valida se cada caractere é um dígito hexadecimal e devolve a expansão determinística de seis dígitos mais os inteiros de canal vermelho, verde e azul correspondentes. Desenvolvedores front-end usam quando tokens de design chegam em códigos curtos e folhas de estilo, capturas ou sistemas de design exigem a forma longa. Estudantes e scripts de QA usam para conferir se uma paleta escrita à mão coincide byte a byte com a regra do CSS Color Module.
O que significa a abreviação de 3 dígitos e como a expansão funciona
Em CSS, uma cor hexadecimal pode ser escrita com três dígitos após uma cerquilha opcional: um nibble para vermelho, um para verde e um para azul. A regra oficial de expansão é simples e absoluta: cada dígito é repetido uma vez de modo que três caracteres se tornem seis. Por exemplo, #abc se expande para #aabbcc, #f0a para #ff00aa e #000 para seis zeros.
Essa regra não é heurística nem aproximação perceptual; é o mesmo mapeamento que os navegadores aplicam ao analisar uma folha de estilo. Esta calculadora codifica exatamente esse mapeamento.
Você fornece uma abreviação de três dígitos, o motor coloca os dígitos em minúsculas para uma forma canônica estável, dobra cada nibble e devolve a string completa com cerquilha, os seis dígitos sem cerquilha, uma forma em maiúsculas para guias de estilo que preferem A–F em caixa alta, a abreviação normalizada de três dígitos com e sem cerquilha, um booleano que registra se a entrada trazia cerquilha inicial, e os canais inteiros r, g e b de 0 a 255 para que você possa alimentar a mesma cor em ferramentas RGB sem uma segunda conversão.
Não há caminho que invente um quarto canal, preserve alfa ou trate prefixos 0x como cores CSS válidas. Use um conversor dedicado de hex para RGB ou multiformato quando você já tiver seis dígitos e só precisar dos números de canal; use esta página quando a entrada for deliberadamente curta e a tarefa for materializar a forma longa com um contrato de validação claro.
Onde expandir hex abreviado agrega valor
Sistemas de design costumam receber amostras de marca como códigos de três dígitos de guias de estilo antigas, plugins do Figma ou anotações manuais, enquanto pipelines de tokens modernas e propriedades personalizadas CSS preferem hashes de seis dígitos para buscas, diffs de capturas e mapeamento canal a canal. Expandir a abreviação uma vez na fronteira mantém todos os consumidores posteriores na forma longa sem que cada equipe reimplemente a regra de dobramento de modo ligeiramente diferente.
Materiais de ensino de desenvolvimento web apresentam cores de três dígitos cedo porque são fáceis de digitar e depois pedem que os alunos expliquem a expansão; uma ferramenta determinística permite mostrar que #fff é branco e que #f0a não é o mesmo que inventar dígitos ausentes. Pipelines de QA e acessibilidade às vezes armazenam cores em formatos mistos; normalizar códigos curtos para seis dígitos antes das checagens de contraste evita falsos desalinhamentos quando um lado usou abreviação e o outro a forma longa.
Combine este expansor com conversores RGB ou HSL quando precisar de outros espaços, e mantenha esta página focada quando a única tarefa for de três dígitos para seis sob um contrato de validação estrito que recusa códigos já longos e caracteres ilegais em vez de adivinhar.
Casos de uso
Tokens de design e normalização CSS
Converta a abreviação de marca #RGB em strings #RRGGBB para arquivos de tema, propriedades personalizadas e pipelines de tokens do design system.
Ensino e verificação de exercícios
Mostre aos alunos a regra CSS de dobrar o nibble e confira cores expandidas à mão sem calculadoras opacas.
Perguntas frequentes
Como #RGB se expande para #RRGGBB?
Cada um dos três dígitos hex é dobrado: #abc vira #aabbcc e #f0a vira #ff00aa. É a mesma regra que os navegadores CSS usam para cores abreviadas.
A ferramenta aceita hex de 6 dígitos como entrada?
Não. Esta ferramenta só expande a abreviação de 3 dígitos.
Quais caracteres são permitidos?
Exatamente três dígitos hexadecimais 0–9 e A–F/a-f, com cerquilha opcional. Espaços, prefixos 0x, strings vazias e caracteres não hex são rejeitados.
Como fica #f0a com seis dígitos?
Fica #ff00aa. Cada um dos três dígitos é escrito duas vezes: o f vira ff, o 0 vira 00 e o a vira aa, o que dá vermelho 255, verde 0 e azul 170.
Preciso digitar a cerquilha inicial?
Não. Você pode digitar #f0a ou apenas f0a e o resultado é o mesmo. A resposta também indica se o valor digitado tinha a cerquilha.
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/hex3-hex6 \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#f0a"}'const res = await fetch("https://api.kit.forhosting.com/color/hex3-hex6", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#f0a"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex3-hex6",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#f0a"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex3-hex6", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#f0a"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#f0a"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex3-hex6", 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": "#f0a"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex3_hex6",
"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.
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
O motor nunca chama a rede, nunca usa aleatoriedade e nunca depende do relógio, de modo que execuções gratuitas no navegador e chamadas API a US$ 0,002 por solicitação bem-sucedida sempre concordam na mesma string #RRGGBB.
O que significa a abreviação de 3 dígitos e como a expansão funciona
Comprimento errado, incluindo um código de seis dígitos já expandido, é rejeitado com invalid_input em vez de ser passado em silêncio, porque a intenção de busca desta página é o passo de expansão em si, não uma conversão multiformato de cor.
Contrato de entrada, validação e formato de saída reproduzível
Espaços externos são removidos. Após a cerquilha opcional, o corpo deve conter exatamente três caracteres de 0 a 9 e de A a F em qualquer caixa. Espaços no corpo, corpos vazios, formas de quatro ou oito dígitos e qualquer caractere não hex falham na validação. O nome de campo preferido é hex, mas os aliases color, value, text, input, code e shorthand são aceitos para que formulários, query strings e planilhas reutilizem o mesmo contrato sem renomear colunas. O valor deve ser uma string: números puros são rejeitados porque zeros à esquerda e o comprimento dos dígitos importam em códigos de cor e um número JSON não preserva esses detalhes. Uma única cerquilha inicial opcional é permitida e registrada em had_hash; um prefixo 0x ou 0X não é abreviação CSS e falha com mensagem clara. Em caso de sucesso a resposta sempre inclui hex em minúsculas com cerquilha como valor expandido principal, hex_no_hash para arquivos de tokens que guardam dígitos sem cerquilha, uppercase para convenções de maiúsculas, shorthand e shorthand_no_hash como a entrada de três dígitos normalizada, os inteiros de canal r, g e b derivados dos pares expandidos, a tag de método hex3_to_hex6 e uma string de fórmula curta lembrando que cada nibble d vira d d. Validação falha não é cobrada; chamadas API bem-sucedidas custam o preço base publicado.
Onde expandir hex abreviado agrega valor
Como a implementação é parse puro de nível A, cada chamada bem-sucedida custa US$ 0,002 sem tokens de modelo e sem rede de saída, entrada inválida não consome saldo e nada é armazenado após a resposta.
Casos de integração
Fixtures determinísticas de CI
Fixe resultados hex expandidos em testes unitários e baselines de snapshot para que códigos curtos de paleta não divergam entre ambientes.
Perguntas técnicas
A cerquilha inicial é obrigatória?
Não. Tanto #f0a quanto f0a são aceitos. A resposta inclui had_hash para indicar se a entrada usou cerquilha, e hex sempre devolve uma string de seis dígitos com cerquilha.
Quanto custa expandir uma cor hex abreviada?
A ferramenta do navegador é gratuita. Solicitações API usam saldo KIT pré-pago a US$ 0,002 por chamada bem-sucedida; entrada inválida não é cobrada.