Color más claro de una lista
Entre #000000, #808080 y #ffffff, el más claro es #ffffff en la posición 2 (contando desde 0), con luminancia 1. Ordene sus colores de marca, fondo y acento como los percibe el ojo, no a ojo de buen cubero. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Colores
- #000000, #808080, #ffffff
- Cantidad
- 3
- Índice
- 2
- Color
- #ffffff
- Hex
- #ffffff
Los sistemas de diseño, los generadores de temas y las revisiones de accesibilidad suelen partir de unos pocos códigos hex candidatos y necesitan una sola respuesta a una pregunta simple: ¿qué muestra es la más clara? Calcular a ojo los tonos medios es poco fiable, y los promedios RGB en bruto ignoran que el ojo humano pondera el verde mucho más que el azul. Esta capacidad recibe una lista de colores hex CSS, calcula la luminancia relativa WCAG 2.x de cada entrada tras la linearización sRGB adecuada y devuelve el color más claro junto con su índice basado en cero en la lista original. Los empates se resuelven de forma determinista conservando la primera aparición, de modo que las canalizaciones automáticas no alternan entre dos blancos iguales según el runtime.
Cómo la luminancia relativa elige la muestra más clara
La luminancia relativa es la medida WCAG de cuán brillante aparece un color en condiciones de visión estándar.
A diferencia de la luminosidad HSL, que trata el rojo, el verde y el azul de forma simétrica tras la conversión, la luminancia relativa parte de canales sRGB de ocho bits, convierte cada canal a una fracción unitaria, lineariza los valores codificados en gamma con la función de transferencia sRGB por tramos y los combina con coeficientes fijos: cero coma dos uno dos seis para el rojo, cero coma siete uno cinco dos para el verde y cero coma cero siete dos dos para el azul.
Esos pesos coinciden con el observador estándar, de modo que el verde puro se clasifica mucho más claro que el azul puro aunque ambos canales estén en doscientos cincuenta y cinco. Cuando dos entradas comparten exactamente el mismo valor de luminancia, el algoritmo conserva el índice más bajo para que el resultado sea estable entre idiomas y runtimes.
Los códigos hex cortos de tres dígitos se expanden a seis antes del análisis; la almohadilla inicial es opcional; las formas alfa de cuatro u ocho dígitos se rechazan porque el contrato es solo RGB opaco. No hay semilla aleatoria, marca de tiempo de reloj ni llamada de red en la ruta, así que la misma lista siempre produce el mismo ganador, índice y matriz de luminancias redondeadas.
Dónde encontrar el color más claro aporta valor real
Los diseñadores de producto que ordenan tokens de marca, superficie y acento necesitan un modo rápido de marcar el candidato de fondo más claro antes de comprobar el contraste con el texto del cuerpo. Las canalizaciones de tokens de diseño generan tintes a partir de varios hex base y deben elegir el paso más claro para superficies blanco papel sin abrir un editor de imagen completo.
Los revisores de accesibilidad comparan colores candidatos de iconos sobre cromado oscuro y quieren la opción más clara para etiquetas secundarias, y luego pasan ese par a un comprobador de contraste. Los equipos de marketing montan paletas de campaña a partir de extracciones de logotipo y necesitan una clasificación reproducible cuando varios casi blancos se ven idénticos en un proyector.
Si más adelante necesita oscurecer un solo hex, calcular ratios de contraste, convertir a HSL o construir esquemas complementarios, trátelos como intenciones de búsqueda y landings distintas en lugar de sobrecargar esta página de color más claro de la lista.
Qué puede hacer con ella
Elija el token de superficie más claro
Ordene candidatos hex de marca y tema por luminancia relativa WCAG y conserve la muestra más clara como token de fondo blanco papel o de tarjeta.
Triaje de paleta para accesibilidad
De una lista corta de colores de icono o etiqueta, seleccione la opción más clara para cromado oscuro antes de ejecutar una comprobación de contraste completa.
Preguntas frecuentes
¿Cómo se elige el color más claro?
Gana el L máximo; los empates exactos conservan el índice más bajo.
¿Qué formatos hex se aceptan?
Hex CSS de tres y seis dígitos, con o sin almohadilla inicial, sin distinguir mayúsculas.
¿Cuántos colores puedo enviar?
Entre 1 y 64 inclusive. Una matriz vacía o más de 64 entradas falla la validación y no se factura.
¿Qué ocurre cuando dos colores tienen la misma luminancia?
Se devuelve la primera aparición (índice basado en cero más bajo) para que los resultados sigan siendo deterministas entre runtimes.
¿Cuánto cuesta el buscador del color más claro?
La herramienta del navegador es gratuita y se ejecuta en local.
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/lightest-in-list \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"colors":["#000000","#808080","#ffffff"]}'const res = await fetch("https://api.kit.forhosting.com/color/lightest-in-list", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"colors": [
"#000000",
"#808080",
"#ffffff"
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/lightest-in-list",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"colors": [
"#000000",
"#808080",
"#ffffff"
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/lightest-in-list", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"colors":["#000000","#808080","#ffffff"]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"colors":["#000000","#808080","#ffffff"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/lightest-in-list", 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
{
"colors": [
"#000000",
"#808080",
"#ffffff"
]
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.lightest_in_list",
"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
Cadenas hex inválidas, listas vacías y matrices demasiado grandes fallan con invalid_input en lugar de inventar un ganador.
Cómo la luminancia relativa elige la muestra más clara
Este endpoint aplica esa fórmula a cada color de su lista y selecciona la luminancia máxima.
Contrato de entrada, forma de la respuesta y reglas de validación
Ejemplo: negro, gris medio y blanco devuelve blanco en el índice dos con luminancia uno. Ejemplo: rojo puro, verde puro y azul puro devuelve verde en el índice uno porque el coeficiente del verde domina. Use el formulario gratuito del navegador al revisar una paleta a mano y llame al mismo contrato desde scripts cuando necesite clasificación masiva de escaleras de tokens o candidatos de tema. Envíe por POST un objeto JSON con el campo obligatorio colors: una matriz de una a sesenta y cuatro cadenas de color hex. Se aceptan los alias list, swatches y palette para el mismo campo. Cada entrada puede ser hash-RGB o hash-RRGGBB, con o sin la almohadilla inicial, en cualquier mayúscula o minúscula. colors ausente, un valor que no sea matriz, una matriz vacía, más de sesenta y cuatro entradas, caracteres no hex, longitudes incorrectas y formas alfa fallan con invalid_input indicando el campo o índice problemático; la validación fallida no se factura. En caso de éxito la respuesta incluye count como longitud de la lista, index como posición basada en cero del color más claro, color y hex como el código normalizado en minúsculas de seis dígitos con almohadilla, canales enteros r g b, una cadena rgb imprimible, relative_luminance del ganador como número de punto flotante limpio entre cero y uno, luminances como la luminancia limpia de cada entrada en orden, y una cadena formula corta que documenta el pipeline WCAG. El precio de las llamadas API correctas es la base publicada de $0.002 por elemento.
Dónde encontrar el color más claro aporta valor real
Como esta capacidad es un motor parse puro, cada llamada correcta cuesta el precio base publicado $0.002 sin tokens de modelo ni red saliente, y la validación fallida no consume el saldo prepago.
Casos de integración
Golden de CI para escaleras de tema
Afirme en integración continua que el paso más claro de una escalera de tintes generada permanece en el índice y hex esperados tras cambios de paleta.