Nombre CSS a hex
El nombre de color CSS tomato es #ff6347, es decir rgb(255, 99, 71), el tono exacto que pinta cualquier navegador. Convierta los nombres de color de su guía de estilo en códigos hex listos para sus tokens. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Nombre
- tomato
- Nombre original
- tomato
- Cód. hex
- #ff6347
- Hex de 6
- ff6347
- Resistencia (Ω)
- 255
Un convertidor de nombre de color CSS a hex toma un color con nombre legible de la plataforma web—palabras como tomato, navy, coral o rebeccapurple—y devuelve el código hexadecimal exacto y los valores de canal rojo, verde y azul que los navegadores resuelven al pintar ese nombre. Pegue un único identificador CSS; la herramienta normaliza mayúsculas, busca el nombre en la tabla ampliada de colores con nombre de CSS Color Level 4 y devuelve una cadena #rrggbb en minúsculas, canales enteros de cero a doscientos cincuenta y cinco, una cadena rgb() lista para pegar y líneas de búsqueda paso a paso que puede asertar en pruebas.
Qué son los colores con nombre CSS y cómo se obtiene el hex
Las hojas de estilo en cascada definen un vocabulario fijo de colores con nombre ampliados que todo navegador moderno mapea al mismo triplete sRGB. Cuando una hoja de estilo dice color tomato o background rebeccapurple, el motor no inventa un matiz: resuelve la palabra clave mediante una tabla estándar de ciento cuarenta y ocho nombres—incluidas las grafías británica y estadounidense grey o gray y la adición de Level 4 rebeccapurple—en tres canales de ocho bits.
Esos canales se empaquetan en la forma hexadecimal familiar #RRGGBB que herramientas de diseño, tokens de diseño y HTML de correo siguen usando a diario. Para tomato la tabla produce rojo doscientos cincuenta y cinco, verde noventa y nueve, azul setenta y uno, que se empaqueta como #ff6347; para navy los canales son cero, cero, ciento veintiocho y el hex es #000080.
Este convertidor realiza exactamente esa búsqueda en tabla: recorta comillas opcionales y espacios alrededor, pasa el identificador a minúsculas, rechaza cualquier cosa que parezca un código hex o una notación funcional de color, y emite el hex empaquetado y los tres enteros. Los ejercicios de aula y las entregas de diseño a menudo parten de un nombre en una presentación de marca; disponer de una referencia determinista elimina ambigüedad sobre mayúsculas, variantes ortográficas y si una palabra de marketing es realmente una palabra clave CSS.
Consejos prácticos, límites y búsquedas relacionadas
Prefiera enviar la palabra clave CSS exacta que su hoja de estilo o sistema de diseño ya usa, incluido el estilo camel de mayúsculas mixtas si así aparece en un ticket; la respuesta siempre normaliza a un name en minúsculas y un hex de seis dígitos en minúsculas para que los diffs posteriores se mantengan estables.
No pase códigos hex como #ff6347 ni notaciones funcionales como rgb(255, 99, 71)—este aterrizaje se limita intencionadamente a palabras clave con nombre, y esos formatos se rechazan para que lo note en lugar de fallar en silencio una búsqueda en tabla. Transparent y currentcolor no se mapean a hex opaco aquí; si necesita alfa o colores de sistema, use otra herramienta.
Esta página se dirige a quienes buscan un convertidor de nombre de color CSS a hex, código hex de tomato, color con nombre a #RRGGBB o rebeccapurple hex en línea; no es un divisor hex-a-RGB, ni un convertidor multi-espacio completo para HSL LAB y CMYK, ni un extractor de paleta desde imágenes. Prefiera esta capacidad cuando ya tiene una palabra clave CSS y solo necesita el token hex o los enteros de canal; si su fuente ya es hex, use un convertidor de hex a RGB en su lugar.
Qué puede hacer con ella
Entrega de tokens de diseño desde colores de marca con nombre
Los diseñadores listan colores de marca como nombres CSS en una guía de estilo; los ingenieros pegan cada nombre y reciben valores exactos #rrggbb y rgb() para tokens y tickets.
Campos de color en contenido y CMS
Los editores escriben tomato o navy en un campo CMS; el backend resuelve la palabra clave a hex antes de escribir variables CSS o plantillas de correo.
Preguntas frecuentes
¿Qué nombres de color se admiten?
Los 148 colores con nombre ampliados de CSS Color Level 4, incluidos rebeccapurple y ambas grafías gray/grey donde el estándar las define. Se ignoran mayúsculas y minúsculas.
¿Puedo pasar un código hex como #ff6347?
No. Esta herramienta convierte solo nombres a hex. Para hex a RGB, use un convertidor de hex a RGB en su lugar.
¿Son aqua y cyan lo mismo?
Sí. En la tabla CSS ambos nombres se mapean al mismo triplete (0, 255, 255) y al mismo hex #00ffff.
¿Cuál es el código hex del color tomato?
Tomato es #ff6347, que equivale a rojo 255, verde 99 y azul 71. Todos los navegadores modernos pintan el nombre tomato exactamente con ese color.
¿Importan las mayúsculas en el nombre del color?
No. Los nombres de color no distinguen mayúsculas, así que Tomato, tomato y DarkSlateGray funcionan igual. La respuesta siempre llega con el nombre y el código hex en minúsculas.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
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)Ejemplo de solicitud
{
"name": "tomato"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.name_hex",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_name_chars | 64 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Nombres no reconocidos, códigos hex sueltos, notaciones funcionales rgb() o hsl() y frases con espacios fallan con un error invalid_input claro en lugar de inventar un color. La ruta es una búsqueda de tabla determinista pura—sin red, sin semillas aleatorias ni dependencia del reloj—de modo que el ejecutor gratuito del navegador y la API prepago devuelven el mismo JSON cada vez que se invoca.
Cómo invocar la API y qué devuelve
Ejemplos válidos incluyen tomato, Tomato, rebeccapurple, DarkSlateGray y lightskyblue; se recortan espacios alrededor, se eliminan comillas opcionales y las letras pueden ir en mayúsculas o minúsculas porque los nombres de color CSS no distinguen mayúsculas. Envíe un cuerpo JSON con un campo de cadena obligatorio llamado name—los alias color, value, text, input y color_name son aceptados por el mismo solucionador. En caso de éxito la respuesta devuelve name como clave canónica en minúsculas, name_raw como la cadena original recortada, hex como cadena #rrggbb normalizada en minúsculas, hex6 sin la almohadilla, campos enteros r, g y b junto con alias red, green y blue, un array rgb de tres números, una cadena css de la forma rgb(r, g, b), un mensaje breve y un array steps que muestra la clave normalizada y cada línea de canal a hex para depuración o enseñanza. La validación fallida—campo ausente, cadena vacía, tipos no cadena, códigos hex con o sin almohadilla, formas rgb() o hsl(), espacios dentro de una frase multi-palabra, caracteres fuera de A–Z, longitud por encima del límite publicado o cualquier cadena no presente en la tabla de colores con nombre—devuelve invalid_input y nunca se cobra. El precio es un $0.002 fijo por petición exitosa con unidad item y precio unitario marginal cero.
Consejos prácticos, límites y búsquedas relacionadas
Las tareas fallidas que devuelven invalid_input no consumen saldo prepago, lo que mantiene baratos los scripts exploratorios y la validación de formularios mientras los aprendices pegan valores imperfectos del portapapeles.
Casos de integración
Pruebas unitarias de fixtures de tema y paleta
Fije tripletes hex y RGB de referencia a partir de palabras clave CSS para que las pruebas de regresión visual y de ratio de contraste aserten canales estables.
Preguntas técnicas
¿Qué ocurre si el nombre no es un color CSS?
La API devuelve invalid_input con un mensaje de que el nombre no se reconoce. No se aplica cargo por validación fallida.
¿Es gratuito el convertidor de nombre de color CSS a hex?
Sí en el ejecutor del navegador. Vía la API, las conversiones exitosas se facturan a un $0.002 fijo por petición; los resultados invalid_input no se cobran.