Colore Tailwind più vicino
Nearest Tailwind Colour
Trova la voce della tavolozza Tailwind più vicina a un colore qualsiasi e mostra la distanza percepita.
Trova la voce della tavolozza Tailwind più vicina a un colore già in mano, misurata come ΔE in OKLab anziché come distanza in RGB. Risponde anche alla domanda diversa, e spesso più utile, di quale famiglia sia il colore.
Il tuo colore
Come si misura
La distanza è il ΔE in OKLab, non la distanza euclidea in RGB. In RGB il blu notte e il blu puro distano 128, e due grigi medi distanti sedici risultano quattro volte più vicini — a fronte di una differenza molto più visibile. OKLab è stato costruito perché la distanza in linea retta si avvicini alla differenza percepita, che è esattamente la domanda di qui.
- ≤ 0,001 — Identico: questo è il colore di Tailwind.
- ≤ 0,02 — Sotto la differenza appena percepibile. Uno scambio sicuro.
- ≤ 0,05 — Affiancati si distinguono, presi da soli sono abbastanza vicini.
- ≤ 0,1 — Un cambio che si vede. Va bene per uno sfondo, non per un segno di marca.
- > 0,1 — Un colore diverso. Tailwind non ha niente di vicino: estendi piuttosto il tema.
Tavolozza letta dal Tailwind 4.3.3 installato, e confrontata con esso da un test a ogni esecuzione.
Corrispondenza più vicina
indigo-600
#4f39f6Affiancati si distinguono, presi da soli sono abbastanza vicini.
ΔE OKLab
0,0319
Valore Tailwind
oklch(51.1% 0.262 276.966)
Le successive
- indigo-700
#432dd7ΔE 0,0545 - blue-700
#1447e6ΔE 0,0580 - blue-600
#155dfcΔE 0,0698 - indigo-500
#6260ffΔE 0,0745 - violet-700
#7008e7ΔE 0,0810 - violet-600
#7f22feΔE 0,0925 - violet-800
#5d0ec0ΔE 0,1010
Famiglie più vicine
- indigopasso migliore 600ΔE 0,0319
- bluepasso migliore 700ΔE 0,0580
- violetpasso migliore 700ΔE 0,0810
- purplepasso migliore 700ΔE 0,1132
- skypasso migliore 700ΔE 0,1415
Una domanda diversa da «il colore più vicino», e spesso la più utile: a quale famiglia appartiene il tuo colore di marca, valutata sul suo passo migliore.
Se qui non c’è niente di abbastanza vicino, la risposta è estendere il tema invece di accontentarsi del più vicino: genera una scala intera da 50 a 950 dal tuo colore e incollala in @theme.
Come si usa
Inserire il colore
Di solito un esadecimale di marchio arrivato da qualcun altro. Il token più vicino, il suo esadecimale e il ΔE compaiono subito.
Saltare i neutri quando si cerca una tonalità
slate, gray, zinc, neutral e stone vincono qualunque ricerca vicina al grigio: è corretto ed è raramente la risposta che si cercava.
Leggere l’elenco delle famiglie
Ogni famiglia riceve il punteggio del suo passo migliore. «Il colore del marchio è un indigo» è più utile di «il campione più vicino è indigo-600».
Domande frequenti
Perché ΔE e non la distanza in RGB?
Perché la distanza in RGB non corrisponde a quello che si vede. Mette blu notte e blu puro a 128 di distanza e dichiara quattro volte più vicini due grigi medi distanti sedici, per una differenza che è molto più visibile. L’OKLab è stato costruito perché la distanza in linea retta approssimi la differenza percepita.
Che cos’è un buon ΔE?
Sotto 0,02 circa in OKLab è di fatto lo stesso colore; fino a 0,05 è una corrispondenza che nessuno contesterà; oltre 0,1 si sta scegliendo un colore diverso e conviene dirlo ad alta voce. Le soglie sono elencate nella pagina.
Perché una voce è segnata come fuori dall’sRGB?
Perché Tailwind ora definisce la propria tavolozza in OKLCH e alcune voci cadono fuori da ciò che l’sRGB sa mostrare. L’esadecimale è un’approssimazione riportata nel gamut; usare il valore `oklch()` conserva la saturazione in più su uno schermo P3.
Non c’è niente di abbastanza vicino. E adesso?
Conviene estendere il tema invece di accettare il più vicino. Si genera una scala completa 50–950 a partire dal proprio colore e la si incolla in `@theme`: un colore di marchio approssimato al campione di serie più vicino smette di essere il colore del marchio.
Può ricevere da
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Scala di tinte e ombre
Tint & Shade Scale
Genera da un colore solo una scala di luminosità da 50 a 950 con passi percettivamente regolari, pronta come insieme di token.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Scala di tinte e ombre
Tint & Shade Scale
Genera da un colore solo una scala di luminosità da 50 a 950 con passi percettivamente regolari, pronta come insieme di token.
Estrattore di token CSS
CSS Token Extractor
Tira fuori da un foglio di stile colori, spaziature, raggi e caratteri e propone un insieme di proprietà personalizzate.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.
Generatore di tavolozze
Palette Generator
Costruisce una tavolozza armonica a partire da un colore di base, con le regole del complementare, della triade e degli analoghi.