Cor mais clara da lista
Entre #000000, #808080 e #ffffff, a mais clara é #ffffff na posição 2 (contando a partir de 0), com luminância 1. Ordene as cores de marca, fundo e destaque como o olho as percebe, sem chute. 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
- Cores
- #000000, #808080, #ffffff
- Quantidade
- 3
- Índice
- 2
- Cor
- #ffffff
- Hex
- #ffffff
Sistemas de design, geradores de temas e revisões de acessibilidade costumam partir de alguns códigos hex candidatos e precisam de uma única resposta a uma pergunta simples: qual amostra é a mais clara? Avaliar tons médios a olho é pouco confiável, e médias RGB brutas ignoram que o olho humano pondera o verde bem mais que o azul. Esta capacidade recebe uma lista de cores hex CSS, calcula a luminância relativa WCAG 2.x de cada entrada após a linearização sRGB adequada e devolve a cor mais clara junto com o índice baseado em zero na lista original. Empates são resolvidos de forma determinística mantendo a primeira ocorrência, para que pipelines automáticos não alternem entre dois brancos iguais conforme o runtime.
Como a luminância relativa escolhe a amostra mais clara
A luminância relativa é a medida WCAG de quão brilhante uma cor parece em condições padrão de visualização.
Diferente da luminosidade HSL, que trata vermelho, verde e azul de forma simétrica após a conversão, a luminância relativa parte de canais sRGB de oito bits, converte cada canal em fração unitária, lineariza os valores codificados em gama com a função de transferência sRGB por partes e os combina com coeficientes fixos: zero ponto dois um dois seis para o vermelho, zero ponto sete um cinco dois para o verde e zero ponto zero sete dois dois para o azul.
Esses pesos batem com o observador padrão, então o verde puro fica bem mais claro que o azul puro mesmo com ambos os canais em duzentos e cinquenta e cinco. Quando duas entradas compartilham exatamente o mesmo valor de luminância, o algoritmo mantém o índice mais baixo para o resultado ficar estável entre idiomas e runtimes. Códigos hex curtos de três dígitos expandem para seis antes do parse; a cerquilha inicial é opcional; formas alfa de quatro ou oito dígitos são rejeitadas porque o contrato é apenas RGB opaco.
Não há semente aleatória, carimbo de relógio nem chamada de rede no caminho, então a mesma lista sempre produz o mesmo vencedor, índice e array de luminâncias arredondadas.
Onde achar a cor mais clara vale o esforço
Designers de produto que ordenam tokens de marca, superfície e destaque precisam de um jeito rápido de marcar o candidato de fundo mais claro antes de checar o contraste com o texto do corpo. Pipelines de tokens de design geram tintas a partir de vários hex base e devem escolher o degrau mais claro para superfícies branco-papel sem abrir um editor de imagem completo.
Revisores de acessibilidade comparam cores candidatas de ícones sobre chrome escuro e querem a opção mais clara para rótulos secundários, e então passam o par a um verificador de contraste. Equipes de marketing montam paletas de campanha a partir de extrações de logo e precisam de ranking reproduzível quando vários quase brancos parecem idênticos no projetor.
Se depois você precisar escurecer um único hex, calcular razões de contraste, converter para HSL ou montar esquemas complementares, trate isso como intenções de busca e landings separadas em vez de sobrecarregar esta página da cor mais clara da lista.
Casos de uso
Escolha o token de superfície mais claro
Ordene candidatos hex de marca e tema pela luminância relativa WCAG e mantenha a amostra mais clara como token de fundo branco-papel ou de cartão.
Triagem de paleta para acessibilidade
De uma lista curta de cores de ícone ou rótulo, selecione a opção mais clara para chrome escuro antes de rodar uma checagem de contraste completa.
Perguntas frequentes
Como a cor mais clara é escolhida?
O L máximo vence; empates exatos mantêm o menor índice.
Quais formatos hex são aceitos?
Hex CSS de três e seis dígitos, com ou sem cerquilha inicial, sem distinção de maiúsculas.
Quantas cores posso enviar?
Entre 1 e 64 inclusive. Um array vazio ou mais de 64 entradas falha a validação e não é cobrado.
O que acontece quando duas cores têm a mesma luminância?
A primeira ocorrência (menor índice baseado em zero) é devolvida para os resultados permanecerem determinísticos entre runtimes.
Quanto custa o localizador da cor mais clara?
A ferramenta do navegador é gratuita e roda localmente.
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/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)Exemplo de requisição
{
"colors": [
"#000000",
"#808080",
"#ffffff"
]
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.lightest_in_list",
"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.
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
Strings hex inválidas, listas vazias e arrays grandes demais falham com invalid_input em vez de inventar um vencedor.
Como a luminância relativa escolhe a amostra mais clara
Este endpoint aplica essa fórmula a cada cor da sua lista e seleciona a luminância máxima.
Contrato de entrada, formato da resposta e regras de validação
Exemplo: preto, cinza médio e branco devolve branco no índice dois com luminância um. Exemplo: vermelho puro, verde puro e azul puro devolve verde no índice um porque o coeficiente do verde domina. Use o formulário gratuito do navegador ao revisar uma paleta à mão e chame o mesmo contrato a partir de scripts quando precisar de ranking em massa de escadas de tokens ou candidatos de tema. Envie por POST um objeto JSON com o campo obrigatório colors: um array de uma a sessenta e quatro strings de cor hex. Os aliases list, swatches e palette são aceitos para o mesmo campo. Cada entrada pode ser hash-RGB ou hash-RRGGBB, com ou sem a cerquilha inicial, em qualquer capitalização. colors ausente, valor que não é array, array vazio, mais de sessenta e quatro entradas, caracteres não hex, comprimentos errados e formas alfa falham com invalid_input nomeando o campo ou índice ofensor; validação falha não é cobrada. Em sucesso a resposta inclui count como comprimento da lista, index como posição baseada em zero da cor mais clara, color e hex como o código normalizado em minúsculas de seis dígitos com cerquilha, canais inteiros r g b, uma string rgb imprimível, relative_luminance do vencedor como número de ponto flutuante limpo entre zero e um, luminances como a luminância limpa de cada entrada na ordem, e uma string formula curta que documenta o pipeline WCAG. O preço das chamadas API bem-sucedidas é a base publicada de US$ 0,002 por item.
Onde achar a cor mais clara vale o esforço
Como esta capacidade é um motor parse puro, cada chamada bem-sucedida custa o preço base publicado US$ 0,002 sem tokens de modelo nem rede de saída, e validação falha não consome o saldo pré-pago.
Casos de integração
Golden de CI para escadas de tema
Afirme na integração contínua que o degrau mais claro de uma escada de tintas gerada permanece no índice e hex esperados após mudanças de paleta.