Color a grises
Obtenga el gris que conserva el brillo que percibe el ojo: #3498db pasa a #828282, un valor de gris de 130, porque el verde pesa más, el rojo menos y el azul lo mínimo. Además verá cada paso del cálculo. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Color de origen en hex
- #3498db
- Valor
- 130
- Hex de entrada
- #3498db
- Rgb de entrada
- 52, 152, 219
- Resistencia (Ω)
- 52
Un convertidor de color a escala de grises toma un color opaco—en código hex o en canales rojo, verde y azul—y lo proyecta a un gris neutro que conserva el brillo percibido en lugar de promediar los canales de forma ingenua. Pegue #e74c3c, rgb(52, 152, 219) o enteros r, g y b por separado; la herramienta aplica los pesos clásicos de luminosidad 0.299 rojo, 0.587 verde y 0.114 azul, redondea a un entero de gris de 0 a 255 y devuelve el triple hex gris, el valor numérico, una cadena CSS rgb() y la aritmética paso a paso.
Por qué el peso de luminosidad supera al promedio simple
La visión humana no es igual de sensible a la luz roja, verde y azul. El verde aporta más al brillo percibido, el rojo menos y el azul el menos de todos. Por eso un azul puro #0000ff se ve más oscuro que un verde puro #00ff00 aunque ambos tengan un solo canal al máximo de 255.
Un promedio ingenuo que suma los tres canales y divide entre tres subestima el brillo de un color rico en verde y sobreestima los tonos ricos en azul. La ponderación de luminosidad corrige ese desequilibrio con coeficientes fijos del modelo clásico de luma televisiva llamado a menudo BT.601: el gris Y es 0.299 por rojo más 0.587 por verde más 0.114 por azul, redondeado al entero más cercano en 0–255.
El resultado es un solo canal que, escrito como #YY donde cada par es el mismo byte hex, se sitúa en el eje neutro del espacio RGB manteniendo el brillo aproximado del matiz original. Esta página es a propósito una herramienta de un solo color, no un filtro de imagen: convierte un token de diseño, una variable CSS o una muestra de paleta cada vez y devuelve un hex gris y un valor auditables.
Ejercicios de clase y entrevistas de código suelen pedir esta transformación a mano; una referencia determinista elimina la ambigüedad sobre qué pesos se usaron, cómo se redondea y si el hex de tres dígitos se expandió antes de multiplicar.
Consejos prácticos, límites y búsquedas relacionadas
No pase formas con alfa como #RRGGBBAA o rgba con un alfa significativo que deba conservarse—esta página convierte solo RGB opaco, y las longitudes inesperadas se rechazan para que lo note en lugar de eliminar el alfa en silencio. Los colores CSS con nombre como rebeccapurple quedan fuera de alcance; resuélvalos primero a hex con una tabla de nombres y luego llame a este convertidor.
Esta página atiende a quien busca un convertidor de color a grises, una calculadora de luminosidad hex a gris o una herramienta RGB a valor gris gratuita en línea; no es un desaturador de imagen completo, ni un convertidor multi-espacio para HSL LAB o CMYK, ni un generador de paletas.
Prefiera esta capacidad cuando ya tenga un color y solo necesite su hex gris de luminosidad y su valor entero; si su pipeline debe emitir aún HSL o CMYK de impresión, use un convertidor de color multi-formato para esos espacios y esta herramienta para el paso monocromo.
Qué puede hacer con ella
Tokens de diseño monocromo desde hex de marca
Los diseñadores pegan códigos hex de marca y reciben hex grises por luminosidad para temas monocromos, maquetas de impresión y UI deshabilitada sin abrir un editor de imágenes.
Preparación de variables CSS y relleno de canvas
Convierta colores del usuario desde un selector en cadenas rgb() y hex neutras para vistas previas en grises, capas de marca de agua o variables CSS aptas para impresión.
Preguntas frecuentes
¿Qué fórmula usa el convertidor de color a grises?
El hex gris repite ese byte tres veces como #YY.
¿Qué formatos de color se aceptan?
Hex #RGB o #RRGGBB (# opcional), CSS rgb(r,g,b), listas r,g,b sueltas o campos enteros r, g y b de 0–255. No se aceptan alfa ni colores CSS con nombre.
¿Es gratuito el convertidor de color a grises?
La herramienta del navegador es gratuita y se ejecuta en local.
¿En qué gris se convierte #3498db?
Se convierte en #828282. La suma ponderada es 0,299 × 52 + 0,587 × 152 + 0,114 × 219 = 129,738, que se redondea a un valor de gris de 130, es decir, rgb(130, 130, 130).
¿Por qué no se promedian sin más el rojo, el verde y el azul?
Porque el ojo no percibe los tres con el mismo brillo. El verde aporta más al brillo y el azul menos, así que un promedio simple oscurece los colores verdosos y aclara los azulados; por eso #0000ff parece más oscuro que #00ff00.
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/grayscale \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3498db","hex":"valor-ejemplo"}'const res = await fetch("https://api.kit.forhosting.com/color/grayscale", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3498db",
"hex": "valor-ejemplo"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/grayscale",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3498db",
"hex": "valor-ejemplo"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/grayscale", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3498db","hex":"valor-ejemplo"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3498db","hex":"valor-ejemplo"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/grayscale", 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
{
"color": "#3498db",
"hex": "valor-ejemplo"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.grayscale",
"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_channel | 255 |
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
Los colores no válidos—entrada vacía, longitud hex incorrecta, caracteres no hex, canales fuera de 0–255 o un conjunto de campos incompleto—fallan con un error claro invalid_input en lugar de inventar una muestra. La ruta es parseo y aritmética deterministas—sin red, sin semillas aleatorias, sin reloj—así el ejecutor gratuito del navegador y la API prepago devuelven el mismo JSON cada vez que se invoca.
Cómo llamar a la API y qué devuelve
Se recortan espacios, las letras hex pueden ir en mayúsculas o minúsculas y el numeral es opcional. Envíe un cuerpo JSON con una cadena de color o tres campos de canal por separado. El campo color acepta alias hex, value, text, input y code; ejemplos válidos incluyen #3498db, 3498db, #abc, rgb(52, 152, 219) y la lista suelta 52, 152, 219. Como alternativa proporcione r, g y b (alias red, green, blue) como enteros de 0 a 255. En éxito la respuesta devuelve input_hex e input_rgb de la fuente resuelta, gray entero y alias gray_value y value, gray_hex y hex como código neutro de seis dígitos, gray_rgb como array de tres elementos, css como rgb(g, g, g), formula y weights documentando los coeficientes, luminosity como suma ponderada antes del redondeo con precisión de visualización fija, message como resumen breve y steps como array ordenado de líneas de sustitución para enseñanza o depuración. La validación fallida—color y canales ausentes, cadena vacía, longitud hex incorrecta, caracteres no hex, prefijo de programación 0x, canales fuera de rango o canales fraccionarios no enteros—devuelve invalid_input y no se cobra. El precio es un fijo $0.002 por petición exitosa con unidad item y precio unitario marginal cero.
Consejos prácticos, límites y búsquedas relacionadas
Prefiera enviar el token exacto que exportó su herramienta de diseño, incluido el numeral si lo tiene; funcionan hex con y sin numeral, y la respuesta siempre normaliza la fuente a un input_hex de seis dígitos en minúsculas para que los diffs posteriores sean estables. 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 se pegan valores imperfectos del portapapeles.
Casos de integración
Pruebas unitarias de ayudantes de desaturación
Genere valores grises de referencia desde fixtures hex y RGB para que motores de tema y comprobaciones de contraste de accesibilidad afirmen una matemática de luminosidad estable.
Preguntas técnicas
¿Qué se devuelve en caso de éxito?
El valor entero gray (también gray_value y value), gray_hex / hex, gray_rgb, una cadena css rgb(), el origen input_hex e input_rgb, formula, weights, luminosity, message y steps.
¿Qué ocurre con un valor de color no válido?
La API devuelve invalid_input con un mensaje que describe el problema (entrada vacía, hex incorrecto, canales fuera de rango, etc.). La validación fallida no se cobra.