Colore HEX in classe Tailwind
Digita o scegli il colore del tuo brand. Lo strumento lo confronta con i 242 colori della palette standard di Tailwind e mostra i più simili, con la classe pronta da copiare.
Come si usaQual è il colore Tailwind più vicino
Disponibile in: 
Colore HEX in classe Tailwind: a cosa serve
Se usi Tailwind CSS e ricevi il colore del brand in HEX, vuoi sapere quale colore della palette standard gli si avvicina di più, per non riempire il codice di valori tra parentesi quadre.
Lo strumento confronta il tuo colore con i 242 colori della palette di Tailwind 3 (da slate a rose, toni da 50 a 950, più bianco e nero) usando la distanza nello spazio OKLab, che segue la percezione dell’occhio. Mostra i cinque più simili, con la classe pronta, e ti avvisa quando nessuno è abbastanza simile.
Come si usa
- Incolla il colore in HEX o rgb(), oppure scegline uno dal selettore.
- Scegli il prefisso della classe (bg, text, border…).
- Copia la classe del colore più vicino o il valore esatto.
Quando usarlo
- Adattare il colore del brand a un progetto Tailwind.
- Convertire un layout di Figma in classi.
- Decidere se vale la pena registrare un nuovo colore nel tema.
Domande frequenti
Come viene scelto il colore più vicino?
In base alla distanza di colore nello spazio OKLab, che segue la percezione dell’occhio umano meglio del confronto tra i numeri RGB. Più la distanza è piccola, più i colori si somigliano.
E se nessuno è simile?
Usa il valore esatto con le parentesi quadre, come bg-[#1f6feb], oppure registra il colore del brand nel tema (theme.extend.colors in tailwind.config o @theme in Tailwind 4) con un nome, come brand.
La palette è quella di Tailwind 3 o 4?
Il confronto usa i valori HEX della palette standard di Tailwind 3. Tailwind 4 ha definito gli stessi colori in OKLCH, con toni leggermente più vivaci, ma i nomi (blue-600, red-500…) sono gli stessi.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.