¿Color claro u oscuro? Brillo percibido para texto, gratis
El blanco #ffffff tiene un brillo de 255, por encima del umbral de 128, así que se considera claro y le corresponde texto negro (#000000). Úselo para elegir el color de las etiquetas en botones, insignias y chips. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Color
- #ffffff
- Hex de entrada
- #ffffff
- RGB de entrada
- 255, 255, 255
- Resistencia (Ω)
- 255
- G
- 255
Elegir texto de etiqueta negro o blanco sobre un botón de color es un problema clásico de accesibilidad y de marca: el blanco puro sobre un amarillo pálido falla el contraste, y el negro puro sobre azul marino puede verse mal cuando el relleno es casi negro. Este clasificador de color claro u oscuro toma un color hex opaco, calcula un brillo percibido determinista con los coeficientes ITU-R BT.601 que ponderan el verde más que el rojo y el azul, compara ese brillo con un umbral configurable (por defecto ciento veintiocho en la escala de cero a doscientos cincuenta y cinco) y devuelve si la muestra es clara u oscura más un color de texto superpuesto recomendado. Diseñadores que conectan tokens de tema, desarrolladores que eligen el color de iconos en insignias dinámicas y pruebas automatizadas que fijan decisiones claro frente a oscuro necesitan la misma aritmética cada vez.
Por qué brillo percibido y no el promedio simple de canales
Una regla ingenua de gris medio que promedia rojo, verde y azul trata el azul puro y el amarillo puro como igual de brillantes, lo cual no coincide con cómo la visión humana y la mayoría de bibliotecas de interfaz deciden claro frente a oscuro.
El brillo percibido de esta página sigue los coeficientes de luma al estilo BT.601 usados desde hace tiempo en vídeo y herramientas web: el brillo es igual a cero coma dos nueve nueve por rojo más cero coma cinco ocho siete por verde más cero coma uno uno cuatro por azul, con cada canal un entero de cero a doscientos cincuenta y cinco. El verde domina la suma porque el ojo es más sensible ahí; el azul aporta lo menos.
Tras calcular el brillo, la herramienta lo compara con un umbral. El umbral por defecto es ciento veintiocho, el punto medio de la escala de ocho bits, y coincide con muchos ayudantes isLight de código abierto que tratan el brillo mayor o igual a ese corte como claro. Puede pasar un umbral personalizado cuando su sistema de diseño quiera clasificar más colores como oscuros (suba el umbral) o más como claros (bájelo).
La clasificación es inclusiva del lado claro: brillo mayor o igual al umbral da claro, y todo lo estrictamente inferior da oscuro. Esa recomendación es un valor práctico por defecto para insignias y chips; los productos en producción que deban cumplir ratios de contraste WCAG deben medir aún el par final con un comprobador de contraste, porque el negro sobre gris medio puede pasar la clasificación por brillo y aún fallar AA en texto pequeño.
Esta página responde a propósito la intención de búsqueda color claro u oscuro y clasificador hex claro oscuro, no el cálculo de un ratio de contraste completo entre dos colores.
Consejos prácticos, límites y búsquedas relacionadas
Recuerde que este clasificador responde claro frente a oscuro para una sola muestra; no calcula el contraste WCAG entre primer plano y fondo, no devuelve luminancia relativa en escala sRGB linealizada de cero a uno como puntuación principal (informa el brillo de canal BT.601) y no ajusta por alfa ni por tamaño de texto. No pase formas con alfa como #RRGGBBAA: esta página clasifica solo hex opaco.
Los nombres CSS y las cadenas rgb() deben resolverse primero a hex y luego pasarse aquí, de modo que la superficie de validación siga siendo una sola cadena de color bien especificada. Esta página se dirige a quien busca color claro u oscuro, comprobador hex claro oscuro, brillo percibido para texto superpuesto o clasificar hex claro oscuro gratis en línea; no es un generador completo de paletas, ni un mezclador de oscurecer o aclarar, ni un convertidor multipespacio.
Prefiera esta capacidad cuando ya tenga un token hex y solo necesite una etiqueta determinista claro u oscuro más una recomendación por defecto de superposición negra o blanca; si su canal necesita ratios de contraste o banderas AA entre dos colores, use un comprobador de contraste dedicado después de elegir candidatos.
Qué puede hacer con ella
Etiquetas dinámicas de insignias y chips
Elija texto de etiqueta negro o blanco sobre colores de insignia elegidos por el usuario para que las interfaces de producto sigan legibles sin ajustar a mano cada hex de marca.
Automatización de tokens de tema
Clasifique tokens de superficie del sistema de diseño como claros u oscuros para que iconos y bordes finos cambien automáticamente en CI.
Preguntas frecuentes
¿Qué color de texto superpuesto recomienda?
Texto oscuro (#000000) sobre fondos claros y texto claro (#ffffff) sobre fondos oscuros. Verifique siempre el contraste WCAG para texto pequeño en producción.
¿Qué formatos de color se aceptan?
Hex #RGB o #RRGGBB con # opcional, sin distinción de mayúsculas. Hex con alfa, nombres CSS y cadenas rgb() no se aceptan en esta página.
¿Puedo cambiar el umbral de brillo?
Sí. Pase threshold como número finito de 0 a 255. Valores más altos clasifican más colores como oscuros; más bajos, como claros. El valor por defecto es 128.
¿Es gratis el clasificador de color claro u oscuro?
La herramienta del navegador es gratuita y se ejecuta en local.
¿Por qué el amarillo sale claro y el azul oscuro si ambos son colores puros?
El brillo percibido da más peso al verde y menos al azul: 0.299 por el rojo, más 0.587 por el verde, más 0.114 por el azul. El amarillo lleva el verde al máximo y puntúa alto; el azul puro aporta muy poco.
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/is-light-or-dark \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3b82f6"}'const res = await fetch("https://api.kit.forhosting.com/color/is-light-or-dark", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3b82f6"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/is-light-or-dark",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3b82f6"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/is-light-or-dark", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3b82f6"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3b82f6"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/is-light-or-dark", 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": "#3b82f6"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.is_light_or_dark",
"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.
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
Pegue tokens de marca como #3b82f6, #f8fafc o la forma corta de tres dígitos como #abc; las cadenas hex no válidas fallan con invalid_input en lugar de inventar una etiqueta. La ruta es análisis determinista puro: sin red, sin semillas aleatorias, sin reloj de pared, de modo que el ejecutor gratuito del navegador y la API de prepago devuelven el mismo JSON en cada llamada.
Por qué brillo percibido y no el promedio simple de canales
La respuesta siempre repite el brillo numérico, el umbral usado, los booleanos is_light e is_dark, una cadena de clasificación y un color de texto superpuesto recomendado: oscuro con hex #000000 sobre fondos claros o claro con hex #ffffff sobre fondos oscuros.
Contrato de entrada, forma de la respuesta y errores
Ejemplos válidos: #3b82f6, 3b82f6, #abc y ABC. Se recortan espacios alrededor, las letras pueden ser mayúsculas o minúsculas y la almohadilla inicial es opcional. Solo se aceptan cuerpos hexadecimales de tres o seis dígitos; el hex con alfa de ocho dígitos, nombres CSS como rebeccapurple, cadenas de función rgb() y campos numéricos de canal por separado quedan fuera de alcance y se rechazan para que lo note en lugar de descartar el alfa en silencio. El threshold opcional es un número finito de cero a doscientos cincuenta y cinco inclusive; omítalo para usar ciento veintiocho. Envíe un cuerpo JSON con una cadena color obligatoria. El campo color acepta los alias hex, value, text, input y code. En éxito la respuesta devuelve input_hex e input_rgb de la fuente resuelta, canales enteros r g b con alias red green blue, source como hex3 o hex6, brightness en la escala de cero a doscientos cincuenta y cinco con precisión de presentación fija, brightness_0_1 como brillo dividido entre doscientos cincuenta y cinco, threshold, classification como light o dark, booleanos is_light e is_dark, recommended_text como dark o light, recommended_text_hex como #000000 o #ffffff, formula que reafirma la suma ponderada BT.601, method igual a perceived_brightness_bt601, message como resumen breve en inglés y steps como líneas de sustitución ordenadas para enseñar o depurar. La validación fallida —color ausente, cadena vacía, longitud hex incorrecta, caracteres no hex, prefijo de programación 0x o umbral fuera de rango— devuelve invalid_input y nunca se cobra. El precio es un $0.002 fijo por petición con éxito con unidad item. Prefiera enviar el token exacto que exportó su herramienta de diseño; la respuesta siempre normaliza la fuente a un input_hex de seis dígitos en minúsculas para que los diffs posteriores se mantengan estables.
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 se pegan valores imperfectos del portapapeles. Fije classification, brightness y recommended_text_hex en pruebas automatizadas para que un cambio futuro de umbrales por defecto o de redondeo no pase en silencio, y documente que method es perceived_brightness_bt601 cuando almacene resultados junto a otros sistemas de luminancia.
Casos de integración
Pruebas unitarias de decisiones de superposición
Congelar clasificaciones claro/oscuro conocidas desde fixtures hex para que los motores de tema detecten regresiones cuando cambie la matemática de brillo.
Preguntas técnicas
¿Cómo decide el clasificador si el color es claro u oscuro?
Calcula el brillo percibido BT.601 = 0.299×R + 0.587×G + 0.114×B en canales de 8 bits y lo compara con un umbral (por defecto 128). brightness ≥ threshold → light; en caso contrario dark.