Colore chiaro o scuro
Il bianco #ffffff ha una luminosità di 255, sopra la soglia di 128, quindi è chiaro e richiede testo nero (#000000). Lo usi per scegliere il colore delle etichette su pulsanti, badge e chip. Gratis nel Suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Colore
- #ffffff
- Hex di input
- #ffffff
- RGB di input
- 255, 255, 255
- Resistenza (Ω)
- 255
- G
- 255
Scegliere testo di etichetta nero o bianco su un pulsante colorato è un problema classico di accessibilità e di brand: il bianco puro su un giallo pallido fallisce il contrasto, e il nero puro su blu navy può sembrare sbagliato quando il riempimento è quasi nero. Questo classificatore chiaro o scuro prende un colore hex opaco, calcola una luminosità percepita deterministica con i coefficienti ITU-R BT.601 che pesano il verde più del rosso e del blu, confronta quella luminosità con una soglia configurabile (predefinita centoventotto sulla scala da zero a duecentocinquantacinque) e restituisce se il campione è chiaro o scuro più un colore di testo sovrapposto consigliato. Designer che collegano token di tema, sviluppatori che scelgono il colore delle icone su badge dinamici e test automatici che fissano decisioni chiaro contro scuro hanno bisogno della stessa aritmetica ogni volta.
Perché la luminosità percepita e non la media grezza dei canali
Una regola ingenua di grigio medio che media rosso, verde e blu tratta il blu puro e il giallo puro come ugualmente luminosi, il che non corrisponde a come la visione umana e la maggior parte delle librerie UI decidono chiaro contro scuro.
La luminosità percepita di questa pagina segue i coefficienti di luma in stile BT.601 usati da tempo in video e strumenti web: la luminosità è uguale a zero virgola due nove nove per rosso più zero virgola cinque otto sette per verde più zero virgola uno uno quattro per blu, con ogni canale un intero da zero a duecentocinquantacinque. Il verde domina la somma perché l'occhio è più sensibile lì; il blu contribuisce di meno. Dopo il calcolo, lo strumento confronta la luminosità con una soglia.
La soglia predefinita è centoventotto, il punto medio della scala a otto bit, allineata a molti helper isLight open source che trattano luminosità maggiore o uguale a quel taglio come chiara. Lei può passare una soglia personalizzata quando il design system vuole classificare più colori come scuri (alzi la soglia) o più come chiari (la abbassi). La classificazione è inclusiva dal lato chiaro: luminosità maggiore o uguale alla soglia produce chiaro, e tutto ciò che è strettamente sotto produce scuro.
Quella raccomandazione è un default pratico per badge e chip; i prodotti in produzione che devono rispettare i rapporti di contrasto WCAG devono ancora misurare la coppia finale con un controllo di contrasto, perché il nero su grigio medio può superare la classificazione per luminosità e tuttavia fallire AA per il testo piccolo. Questa pagina risponde di proposito all'intento di ricerca colore chiaro o scuro e classificatore hex chiaro scuro, piuttosto che al calcolo di un rapporto di contrasto completo tra due colori.
Consigli pratici, limiti e ricerche correlate
Quando scrive test unitari, copra almeno uno sfondo quasi bianco che debba essere chiaro, un riempimento quasi nero che debba essere scuro, un colore di brand a tono medio saturo vicino alla soglia predefinita, una forma breve a tre cifre, una soglia personalizzata che inverta un colore al limite e un hex non valido deliberato così che le regressioni di validazione non passino.
Ricordi che questo classificatore risponde chiaro contro scuro per un solo campione; non calcola il contrasto WCAG tra primo piano e sfondo, non restituisce luminanza relativa su scala sRGB linearizzata da zero a uno come punteggio principale (riporta la luminosità di canale BT.601) e non adegua per alfa né per dimensione del testo. Non passi forme con alfa come #RRGGBBAA: questa pagina classifica solo hex opaco.
I nomi CSS e le stringhe rgb() vanno prima risolti in hex e poi passati qui, così la superficie di validazione resta una sola stringa di colore ben specificata. Questa pagina si rivolge a chi cerca colore chiaro o scuro, controllo hex chiaro scuro, luminosità percepita per testo sovrapposto o classificare hex chiaro scuro gratis online; non è un generatore completo di palette, né un mixer per scurire o schiarire, né un convertitore multi-spazio.
Preferisca questa capacità quando ha già un token hex e le serve solo un'etichetta deterministica chiaro o scuro più una raccomandazione predefinita di sovrapposizione nera o bianca; se la pipeline richiede rapporti di contrasto o flag AA tra due colori, usi un controllo di contrasto dedicato dopo aver scelto i candidati.
Casi d'uso
Etichette dinamiche di badge e chip
Scelga testo di etichetta nero o bianco su colori di badge scelti dall'utente così che le UI di prodotto restino leggibili senza regolare a mano ogni hex di brand.
Automazione dei token di tema
Classifichi i token di superficie del design system come chiari o scuri così che set di icone e bordi sottili cambino automaticamente in CI.
Domande frequenti
Quale colore di testo sovrapposto consiglia?
Testo scuro (#000000) su sfondi chiari e testo chiaro (#ffffff) su sfondi scuri. Verifichi sempre il contrasto WCAG per il testo piccolo in produzione.
Quali formati di colore sono accettati?
Hex #RGB o #RRGGBB con # opzionale, senza distinzione di maiuscole. Hex con alfa, nomi CSS e stringhe rgb() non sono accettati in questa pagina.
Posso modificare la soglia di luminosità?
Sì. Passi threshold come numero finito da 0 a 255. Valori più alti classificano più colori come scuri; più bassi, come chiari. Il valore predefinito è 128.
Il classificatore colore chiaro o scuro è gratis?
Lo strumento browser è gratuito e gira in locale.
Perché il giallo risulta chiaro e il blu scuro se sono entrambi colori puri?
La luminosità percepita dà più peso al verde e meno al blu: 0.299 per il rosso, più 0.587 per il verde, più 0.114 per il blu. Il giallo ha il verde al massimo e ottiene un valore alto; il blu puro contribuisce pochissimo.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo 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)Esempio di richiesta
{
"color": "#3b82f6"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.is_light_or_dark",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
Incolli token di brand come #3b82f6, #f8fafc o la forma breve a tre cifre come #abc; le stringhe hex non valide falliscono con invalid_input invece di inventare un'etichetta. Il percorso è parsing deterministico puro — nessuna rete, nessun seme casuale, nessun orologio di sistema — così l'esecutore gratuito del browser e l'API prepagata restituiscono lo stesso JSON a ogni chiamata.
Perché la luminosità percepita e non la media grezza dei canali
La risposta ripete sempre la luminosità numerica, la soglia usata, i booleani is_light e is_dark, una stringa di classificazione e un colore di testo sovrapposto consigliato: scuro con hex #000000 su sfondi chiari o chiaro con hex #ffffff su sfondi scuri.
Contratto di ingresso, forma della risposta ed errori
Esempi validi includono #3b82f6, 3b82f6, #abc e ABC. Gli spazi circostanti vengono rimossi, le lettere possono essere maiuscole o minuscole e il cancelletto iniziale è opzionale. Sono accettati solo corpi esadecimali a tre o sei cifre; l'hex con alfa a otto cifre, i nomi CSS come rebeccapurple, le stringhe di funzione rgb() e i campi numerici di canale separati sono fuori ambito e vengono rifiutati così che Lei se ne accorga invece di perdere l'alfa in silenzio. Il threshold opzionale è un numero finito da zero a duecentocinquantacinque inclusi; lo ometta per usare centoventotto. Invii un corpo JSON con una stringa color obbligatoria. Il campo color accetta gli alias hex, value, text, input e code. In caso di successo la risposta restituisce input_hex e input_rgb della sorgente risolta, canali interi r g b con alias red green blue, source come hex3 o hex6, brightness sulla scala da zero a duecentocinquantacinque con precisione di visualizzazione fissa, brightness_0_1 come luminosità divisa per duecentocinquantacinque, threshold, classification come light o dark, booleani is_light e is_dark, recommended_text come dark o light, recommended_text_hex come #000000 o #ffffff, formula che ribadisce la somma ponderata BT.601, method uguale a perceived_brightness_bt601, message come breve riepilogo in inglese e steps come linee di sostituzione ordinate per insegnare o fare debug. La validazione fallita — color assente, stringa vuota, lunghezza hex errata, caratteri non hex, prefisso di programmazione 0x o soglia fuori intervallo — restituisce invalid_input e non viene mai addebitata. Il prezzo è un $0.002 fisso per richiesta con esito positivo con unità item. Preferisca inviare il token esatto esportato dal tool di design; la risposta normalizza sempre la sorgente a un input_hex a sei cifre in minuscolo affinché i diff a valle restino stabili.
Consigli pratici, limiti e ricerche correlate
Le attività fallite che restituiscono invalid_input non consumano il saldo prepagato, il che mantiene economici gli script esplorativi e la validazione dei moduli mentre si incollano valori imperfetti dagli appunti. Fissi classification, brightness e recommended_text_hex nei test automatici così che un futuro cambio di soglie predefinite o di arrotondamento non passi in silenzio, e documenti che method è perceived_brightness_bt601 quando archivia risultati accanto ad altri sistemi di luminanza.
Casi di integrazione
Test unitari sulle decisioni di sovrapposizione
Congeli classificazioni chiaro/scuro note da fixture hex così che i motori di tema rilevino regressioni quando cambia la matematica della luminosità.
Domande tecniche
Come decide il classificatore se il colore è chiaro o scuro?
Calcola la luminosità percepita BT.601 = 0.299×R + 0.587×G + 0.114×B su canali a 8 bit, poi confronta con una soglia (predefinita 128). brightness ≥ threshold → light; altrimenti dark.