Nome CSS para hex
O nome de cor CSS tomato é #ff6347, ou rgb(255, 99, 71), o tom exato que qualquer navegador pinta. Converta os nomes de cor do seu guia de estilo em códigos hex prontos para seus tokens. 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
- Nome
- tomato
- Nome original
- tomato
- Cód. hex
- #ff6347
- Hex de 6
- ff6347
- Resistência (Ω)
- 255
Um conversor de nome de cor CSS para hex recebe uma cor nomeada legível da plataforma web—palavras como tomato, navy, coral ou rebeccapurple—e devolve o código hexadecimal exato e os valores de canal vermelho, verde e azul que os navegadores resolvem ao pintar esse nome. Cole um único identificador CSS; a ferramenta normaliza maiúsculas e minúsculas, consulta o nome na tabela estendida de cores nomeadas do CSS Color Level 4 e devolve uma string #rrggbb em minúsculas, canais inteiros de zero a duzentos e cinquenta e cinco, uma string rgb() pronta para colar e linhas de consulta passo a passo que você pode asserir em testes.
O que são cores nomeadas CSS e como o hex é obtido
As folhas de estilo em cascata definem um vocabulário fixo de cores nomeadas estendidas que todo navegador moderno mapeia para o mesmo triplo sRGB. Quando uma folha de estilo diz color tomato ou background rebeccapurple, o motor não inventa um tom: resolve a palavra-chave por uma tabela padrão de cento e quarenta e oito nomes—incluindo as grafias britânica e americana grey ou gray e a adição do Level 4 rebeccapurple—em três canais de oito bits.
Esses canais se empacotam na forma hexadecimal familiar #RRGGBB que ferramentas de design, tokens de design e HTML de e-mail ainda usam todos os dias. Para tomato a tabela produz vermelho duzentos e cinquenta e cinco, verde noventa e nove, azul setenta e um, empacotado como #ff6347; para navy os canais são zero, zero, cento e vinte e oito e o hex é #000080.
Este conversor realiza exatamente essa consulta de tabela: remove aspas opcionais e espaços ao redor, coloca o identificador em minúsculas, rejeita qualquer coisa que pareça um código hex ou notação funcional de cor e emite o hex empacotado e os três inteiros. Exercícios de sala e handoffs de design muitas vezes partem de um nome em um deck de marca; ter uma referência determinística remove ambiguidade sobre maiúsculas, variantes ortográficas e se uma palavra de marketing é de fato uma palavra-chave CSS.
Dicas práticas, limites e buscas relacionadas
Prefira enviar a palavra-chave CSS exata que sua folha de estilo ou sistema de design já usa, inclusive maiúsculas mistas no estilo camel se for assim no ticket; a resposta sempre normaliza para um name em minúsculas e hex de seis dígitos em minúsculas para que diffs posteriores permaneçam estáveis. Não passe códigos hex como #ff6347 nem notações funcionais como rgb(255, 99, 71)—este landing se limita intencionalmente a palavras-chave nomeadas, e esses formatos são rejeitados para que você note em vez de falhar em silêncio uma consulta de tabela.
Transparent e currentcolor não são mapeados para hex opaco aqui; se precisar de alfa ou cores de sistema, use outra ferramenta. Ao escrever testes unitários, cubra ao menos um nome comum como tomato, um nome Level 4 como rebeccapurple, um par de grafias grey ou gray, uma entrada com maiúsculas mistas e uma palavra não reconhecida de propósito para que regressões de validação não passem.
Esta página atende quem busca um conversor de nome de cor CSS para hex, código hex de tomato, cor nomeada para #RRGGBB ou rebeccapurple hex online; não é um divisor hex-para-RGB, nem um conversor multi-espaço completo para HSL LAB e CMYK, nem um extrator de paleta a partir de imagens. Prefira esta capacidade quando você já tem uma palavra-chave CSS e só precisa do token hex ou dos inteiros de canal; se a fonte já for hex, use um conversor de hex para RGB.
Casos de uso
Handoff de tokens de design a partir de cores de marca nomeadas
Designers listam cores de marca como nomes CSS em um guia de estilo; engenheiros colam cada nome e recebem valores exatos #rrggbb e rgb() para tokens e tickets.
Campos de cor em conteúdo e CMS
Editores digitam tomato ou navy em um campo CMS; o backend resolve a palavra-chave para hex antes de gravar variáveis CSS ou templates de e-mail.
Perguntas frequentes
Quais nomes de cor são suportados?
Todas as 148 cores nomeadas estendidas do CSS Color Level 4, incluindo rebeccapurple e ambas as grafias gray/grey onde o padrão as define. Maiúsculas são ignoradas.
Posso passar um código hex como #ff6347?
Não. Esta ferramenta converte apenas nomes para hex. Para hex para RGB, use um conversor de hex para RGB.
Aqua e cyan são iguais?
Sim. Na tabela CSS ambos os nomes mapeiam para o mesmo triplo (0, 255, 255) e o mesmo hex #00ffff.
Qual é o código hex da cor tomato?
Tomato é #ff6347, o que equivale a vermelho 255, verde 99 e azul 71. Todos os navegadores modernos pintam o nome tomato exatamente com essa cor.
Maiúsculas fazem diferença no nome da cor?
Não. Nomes de cor não diferenciam maiúsculas, então Tomato, tomato e DarkSlateGray funcionam igual. A resposta sempre vem com o nome e o código hex em minúsculas.
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/name-hex \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"name":"tomato"}'const res = await fetch("https://api.kit.forhosting.com/color/name-hex", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"name": "tomato"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/name-hex",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"name": "tomato"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/name-hex", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"name":"tomato"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"name":"tomato"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/name-hex", 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
{
"name": "tomato"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.name_hex",
"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_chars | 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
Nomes não reconhecidos, códigos hex soltos, notações funcionais rgb() ou hsl() e frases com espaços falham com um erro invalid_input claro em vez de inventar uma cor. O caminho é uma consulta de tabela determinística pura—sem rede, sem sementes aleatórias nem dependência de relógio—de modo que o executor gratuito do navegador e a API pré-paga devolvem o mesmo JSON a cada chamada.
Como chamar a API e o que retorna
Exemplos válidos incluem tomato, Tomato, rebeccapurple, DarkSlateGray e lightskyblue; espaços ao redor são removidos, aspas opcionais são eliminadas e as letras podem ser maiúsculas ou minúsculas porque nomes de cor CSS não distinguem maiúsculas. Envie um corpo JSON com um campo de string obrigatório chamado name—os aliases color, value, text, input e color_name são aceitos pelo mesmo solver. Em caso de sucesso a resposta devolve name como chave canônica em minúsculas, name_raw como a string original aparada, hex como string #rrggbb normalizada em minúsculas, hex6 sem o hash, campos inteiros r, g e b junto com aliases red, green e blue, um array rgb de três números, uma string css da forma rgb(r, g, b), uma mensagem breve e um array steps que mostra a chave normalizada e cada linha de canal para hex para depuração ou ensino. Validação falha—campo ausente, string vazia, tipos não string, códigos hex com ou sem hash, formas rgb() ou hsl(), espaços dentro de uma frase multi-palavra, caracteres fora de A–Z, comprimento acima do limite publicado ou qualquer string ausente na tabela de cores nomeadas—retorna invalid_input e nunca é cobrada. O preço é um US$ 0,002 fixo por requisição bem-sucedida com unidade item e preço unitário marginal zero.
Dicas práticas, limites e buscas relacionadas
Tarefas falhas que retornam invalid_input não consomem saldo pré-pago, o que mantém baratos scripts exploratórios e validação de formulários enquanto aprendizes colam valores imperfeitos da área de transferência.
Casos de integração
Testes unitários de fixtures de tema e paleta
Fixe triplos hex e RGB de referência a partir de palavras-chave CSS para que testes de regressão visual e de razão de contraste assiram canais estáveis.
Perguntas técnicas
O que acontece se o nome não for uma cor CSS?
A API retorna invalid_input com uma mensagem de que o nome não é reconhecido. Não há cobrança por validação falha.
O conversor de nome de cor CSS para hex é gratuito?
Sim no executor do navegador. Via API, conversões bem-sucedidas são cobradas a um US$ 0,002 fixo por requisição; resultados invalid_input não são cobrados.