Ordinare i colori per luminanza
Metta in ordine un gruppo di colori esadecimali dallo scuro al chiaro secondo la luminanza WCAG: il blu puro vale 0.0722 e finisce subito dopo il nero, mentre il rosso puro, con 0.2126, resta sotto il grigio medio. Ogni colore torna con la sua luminanza. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Colori
- #FFFFFF, #f00, 008000, #000000, #00f, #808080
- Quantità
- 6
- Ordine
- darkest_to_lightest
Trasformi un gruppo disordinato di colori hex in una scala prevedibile dal buio alla luce. Lo strumento convalida ogni valore, normalizza la notazione hex breve e completa, converte i canali sRGB in luce lineare e ordina secondo la luminanza relativa WCAG. Ogni risultato include colore normalizzato e luminanza, così Lei può esaminare differenze minime senza affidarsi alla sola vista. I valori a pari luminanza mantengono l’ordine iniziale, i duplicati restano presenti e lo stesso input genera sempre lo stesso output.
Crei una scala di luminosità da una palette disordinata
Le raccolte di colori spesso seguono la creazione dei token o la serializzazione del file, non la luminosità. Invii l’array colors e riceverà record ordinati per luminanza relativa crescente. Le forme a tre cifre vengono espanse, quelle a sei accettano il cancelletto facoltativo e l’output usa #rrggbb minuscolo.
La normalizzazione facilita snapshot, file di token, CSS e confronti. I duplicati restano perché possono rappresentare token distinti. I colori con luminanza esattamente uguale conservano l’ordine di input, evitando variazioni tra esecuzioni.
La risposta indica anche quantità, direzione e metodo. La usi per creare una palette sequenziale o analizzare campioni vicini. L’operazione modifica soltanto l’ordine: non genera tinte intermedie, non rinomina token e non garantisce passaggi percettivamente uniformi.
Comprenda come la luminanza relativa determina l’ordine
La luminanza relativa non è la semplice media dei byte rosso, verde e blu. I colori hex codificano canali sRGB mediante una curva non lineare; ogni canale viene scalato tra zero e uno e convertito in luce lineare. I valori entro la soglia sRGB sono divisi per 12.92, mentre gli altri usano la funzione di potenza standard.
Poi si applicano i coefficienti 0.2126, 0.7152 e 0.0722. Il verde pesa di più e il blu di meno; il risultato va da zero per il nero a uno per il bianco. L’ordinamento usa il valore completo non arrotondato.
Le sei cifre mostrate servono alla lettura e alla serializzazione stabile. Il modello compare nei calcoli WCAG, ma ordinare una palette non dimostra l’accessibilità: verifichi separatamente ogni coppia tra primo piano e sfondo.
Convalidi l’input e integri risultati deterministici
Il campo colors deve essere un array non vuoto con un massimo di 1000 elementi. Ogni elemento deve essere una stringa di esattamente tre o sei cifre esadecimali dopo un cancelletto facoltativo. Gli spazi esterni sono ignorati; alfa, nomi CSS, funzioni rgb(), lunghezze errate e tipi diversi vengono rifiutati.
L’errore segnala l’indice problematico senza eliminare o interpretare valori. Così una build non accetta una scala parziale apparentemente valida. L’implementazione svolge solo aritmetica locale e ordinamento in memoria, senza rete, orologio, casualità o conservazione.
Duplicati conservati e parità stabili consentono di ricollegare con certezza i risultati ai metadati originali.
Casi d'uso
Ordinare token di design
Converta colori ereditati o generati in una sequenza stabile prima di numerare la scala.
Preparare colori sequenziali per grafici
Disponga i campioni per luminanza relativa affinché la scala visiva proceda in modo coerente.
Verificare la progressione di una palette
Esamini luminanze e colori normalizzati per trovare inversioni, duplicati o intervalli troppo piccoli.
Domande frequenti
Quali formati di colore sono accettati?
Usi tre o sei cifre hex con cancelletto facoltativo, per esempio #abc, abc, #aabbcc o AABBCC.
Sono ammessi alfa o nomi CSS?
No. Hex con alfa, nomi, rgb(), hsl() e altre sintassi CSS vengono rifiutati per evitare ambiguità.
Cosa accade se due colori hanno la stessa luminanza?
Mantengono l’ordine relativo originale. Questa regola stabile conserva anche i duplicati.
L’ordine scuro-chiaro garantisce un contrasto accessibile?
No. L’ordine descrive colori singoli; l’accessibilità richiede la verifica di coppie precise tra primo piano e sfondo.
Perché il rosso puro risulta più scuro del grigio medio?
Perché la luminanza dà più peso al verde e meno al blu. Il rosso puro vale 0.2126 e il grigio medio #808080 vale 0.215861, quindi il grigio è appena più chiaro anche se il rosso sembra più intenso.
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/sort-by-luminance \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"colors":["#f8fafc","#0f172a","#22c55e","#64748b"]}'const res = await fetch("https://api.kit.forhosting.com/color/sort-by-luminance", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"colors": [
"#f8fafc",
"#0f172a",
"#22c55e",
"#64748b"
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/sort-by-luminance",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"colors": [
"#f8fafc",
"#0f172a",
"#22c55e",
"#64748b"
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/sort-by-luminance", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"colors":["#f8fafc","#0f172a","#22c55e","#64748b"]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"colors":["#f8fafc","#0f172a","#22c55e","#64748b"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/sort-by-luminance", 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
{
"colors": [
"#f8fafc",
"#0f172a",
"#22c55e",
"#64748b"
]
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.sort_by_luminance",
"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.
Limiti
max_items | 1000 |
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
Convalidi l’input e integri risultati deterministici
Lo stesso array produce lo stesso JSON nel browser, in CI e via API. Il browser è gratuito; ogni richiesta API costa $0.002.
Domande tecniche
Quanto costa una richiesta API?
Ogni richiesta API costa $0.002. Può anche eseguire gratuitamente nel browser lo stesso risolutore deterministico.