Cor clara ou escura
O branco #ffffff tem brilho 255, acima do limiar de 128, então é considerado claro e pede texto preto (#000000). Use para escolher a cor do rótulo em botões, selos e chips. 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
- Cor
- #ffffff
- Hex de entrada
- #ffffff
- RGB de entrada
- 255, 255, 255
- Resistência (Ω)
- 255
- G
- 255
Escolher texto de rótulo preto ou branco sobre um botão colorido é um problema clássico de acessibilidade e de marca: o branco puro sobre amarelo pálido falha no contraste, e o preto puro sobre azul-marinho pode parecer errado quando o preenchimento é quase preto. Este classificador de cor clara ou escura recebe uma cor hex opaca, calcula um brilho percebido determinístico com os coeficientes ITU-R BT.601 que ponderam o verde mais que o vermelho e o azul, compara esse brilho a um limiar configurável (padrão cento e vinte e oito na escala de zero a duzentos e cinquenta e cinco) e devolve se a amostra é clara ou escura mais uma cor de texto sobreposto recomendada. Designers que ligam tokens de tema, desenvolvedores que escolhem a cor de ícones em badges dinâmicos e testes automatizados que fixam decisões claro versus escuro precisam da mesma aritmética todas as vezes.
Por que brilho percebido, e não a média bruta dos canais
Uma regra ingênua de cinza médio que media vermelho, verde e azul trata azul puro e amarelo puro como igualmente brilhantes, o que não corresponde a como a visão humana e a maioria das bibliotecas de interface decidem claro versus escuro.
O brilho percebido desta página segue os coeficientes de luma no estilo BT.601 usados há muito em vídeo e ferramentas web: o brilho é igual a zero ponto dois nove nove vezes vermelho mais zero ponto cinco oito sete vezes verde mais zero ponto um um quatro vezes azul, com cada canal um inteiro de zero a duzentos e cinquenta e cinco. O verde domina a soma porque o olho é mais sensível ali; o azul contribui menos. Depois de calcular o brilho, a ferramenta o compara a um limiar.
O limiar padrão é cento e vinte e oito, o ponto médio da escala de oito bits, alinhado a muitos helpers isLight de código aberto que tratam brilho maior ou igual a esse corte como claro. Você pode passar um limiar personalizado quando o sistema de design quiser classificar mais cores como escuras (eleve o limiar) ou mais como claras (baixe-o). A classificação é inclusiva no lado claro: brilho maior ou igual ao limiar resulta em claro, e qualquer valor estritamente abaixo resulta em escuro.
Essa recomendação é um padrão prático para badges e chips; produtos em produção que devam atender razões de contraste WCAG ainda devem medir o par final com um verificador de contraste, porque preto sobre cinza médio pode passar na classificação por brilho e ainda falhar AA em texto pequeno. Esta página responde de propósito à intenção de busca cor clara ou escura e classificador hex claro escuro, e não ao cálculo de uma razão de contraste completa entre duas cores.
Dicas práticas, limites e buscas relacionadas
Ao escrever testes unitários, cubra pelo menos um fundo quase branco que deva ser claro, um preenchimento quase preto que deva ser escuro, uma cor de marca de tom médio saturado perto do limiar padrão, uma forma curta de três dígitos, um limiar personalizado que inverta uma cor limítrofe e um hex inválido deliberado para que regressões de validação não passem.
Lembre-se de que este classificador responde claro versus escuro para uma única amostra; não calcula contraste WCAG entre primeiro plano e fundo, não devolve luminância relativa em escala sRGB linearizada de zero a um como pontuação principal (informa o brilho de canal BT.601) e não ajusta por alfa nem por tamanho de texto. Não passe formas com alfa como #RRGGBBAA — esta página classifica apenas hex opaco.
Nomes CSS e strings rgb() devem ser resolvidos primeiro para hex e depois passados aqui, para que a superfície de validação continue sendo uma única string de cor bem especificada. Esta página atende quem busca cor clara ou escura, verificador hex claro escuro, brilho percebido para texto sobreposto ou classificar hex claro escuro grátis online; não é um gerador completo de paletas, nem um misturador de escurecer ou clarear, nem um conversor multiespaço.
Prefira esta capacidade quando já tiver um token hex e só precisar de um rótulo determinístico claro ou escuro mais uma recomendação padrão de sobreposição preta ou branca; se o pipeline precisar de razões de contraste ou flags AA entre duas cores, use um verificador de contraste dedicado depois de escolher candidatos.
Casos de uso
Rótulos dinâmicos de badges e chips
Escolha texto de rótulo preto ou branco sobre cores de badge escolhidas pelo usuário para que as UIs do produto permaneçam legíveis sem ajustar à mão cada hex de marca.
Automação de tokens de tema
Classifique tokens de superfície do design system como claros ou escuros para que conjuntos de ícones e bordas finas mudem automaticamente no CI.
Perguntas frequentes
Que cor de texto sobreposto ele recomenda?
Texto escuro (#000000) em fundos claros e texto claro (#ffffff) em fundos escuros. Sempre verifique o contraste WCAG para texto pequeno em produção.
Quais formatos de cor são aceitos?
Hex #RGB ou #RRGGBB com # opcional, sem distinção de maiúsculas. Hex com alfa, nomes CSS e strings rgb() não são aceitos nesta página.
Posso alterar o limiar de brilho?
Sim. Passe threshold como número finito de 0 a 255. Valores mais altos classificam mais cores como escuras; mais baixos, como claras. O padrão é 128.
O classificador de cor clara ou escura é grátis?
A ferramenta do navegador é gratuita e roda localmente.
Por que o amarelo sai claro e o azul escuro se os dois são cores puras?
O brilho percebido dá mais peso ao verde e menos ao azul: 0.299 vezes o vermelho, mais 0.587 vezes o verde, mais 0.114 vezes o azul. O amarelo tem o verde no máximo e pontua alto; o azul puro contribui muito pouco.
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/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)Exemplo de requisição
{
"color": "#3b82f6"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.is_light_or_dark",
"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
Cole tokens de marca como #3b82f6, #f8fafc ou a forma curta de três dígitos como #abc; cadeias hex inválidas falham com invalid_input em vez de inventar um rótulo. O caminho é análise determinística pura — sem rede, sem sementes aleatórias, sem relógio de parede — para que o executor gratuito do navegador e a API pré-paga devolvam o mesmo JSON em cada chamada.
Por que brilho percebido, e não a média bruta dos canais
A resposta sempre ecoa o brilho numérico, o limiar usado, os booleanos is_light e is_dark, uma string de classificação e uma cor de texto sobreposto recomendada: escuro com hex #000000 em fundos claros ou claro com hex #ffffff em fundos escuros.
Contrato de entrada, formato da resposta e erros
Exemplos válidos incluem #3b82f6, 3b82f6, #abc e ABC. Espaços em volta são removidos, letras podem ser maiúsculas ou minúsculas e o cerquilha inicial é opcional. Somente corpos hexadecimais de três ou seis dígitos são aceitos; hex com alfa de oito dígitos, nomes CSS como rebeccapurple, strings de função rgb() e campos numéricos de canal separados estão fora do escopo e são rejeitados para que você note, em vez de descartar o alfa em silêncio. O threshold opcional é um número finito de zero a duzentos e cinquenta e cinco inclusive; omita-o para usar cento e vinte e oito. Envie um corpo JSON com uma string color obrigatória. O campo color aceita os alias hex, value, text, input e code. Em sucesso a resposta devolve input_hex e input_rgb da fonte resolvida, canais inteiros r g b com alias red green blue, source como hex3 ou hex6, brightness na escala de zero a duzentos e cinquenta e cinco com precisão de exibição fixa, brightness_0_1 como brilho dividido por duzentos e cinquenta e cinco, threshold, classification como light ou dark, booleanos is_light e is_dark, recommended_text como dark ou light, recommended_text_hex como #000000 ou #ffffff, formula reafirmando a soma ponderada BT.601, method igual a perceived_brightness_bt601, message como resumo curto em inglês e steps como linhas de substituição ordenadas para ensinar ou depurar. Validação falha — color ausente, string vazia, comprimento hex errado, caracteres não hex, prefixo de programação 0x ou limiar fora da faixa — devolve invalid_input e nunca é cobrada. O preço é um US$ 0,002 fixo por pedido bem-sucedido com unidade item. Prefira enviar o token exato que a ferramenta de design exportou; a resposta sempre normaliza a fonte para um input_hex de seis dígitos em minúsculas para que diffs a jusante permaneçam estáveis.
Dicas práticas, limites e buscas relacionadas
Tarefas com falha que devolvem invalid_input não consomem saldo pré-pago, o que mantém baratos scripts exploratórios e validação de formulários enquanto se colam valores imperfeitos da área de transferência. Fixe classification, brightness e recommended_text_hex em testes automatizados para que uma mudança futura de limiares padrão ou de arredondamento não passe em silêncio, e documente que method é perceived_brightness_bt601 quando armazenar resultados ao lado de outros sistemas de luminância.
Casos de integração
Testes unitários de decisões de sobreposição
Congele classificações claro/escuro conhecidas a partir de fixtures hex para que motores de tema detectem regressões quando a matemática de brilho mudar.
Perguntas técnicas
Como o classificador decide se a cor é clara ou escura?
Calcula o brilho percebido BT.601 = 0.299×R + 0.587×G + 0.114×B em canais de 8 bits e compara a um limiar (padrão 128). brightness ≥ threshold → light; caso contrário dark.