Come convertire HEX in RGB e controllare il contrasto del testo online gratis

Hai scelto un colore per il tuo sito, e ora il design dice HEX ma il tuo codice vuole RGB. Oppure hai fatto un bel pulsante e non sei sicuro che qualcuno riesca a leggerne il testo. Gli Strumenti CSS e Colore di GetPlugzz fanno entrambe le cose, e altre due: creano gradienti e generano CSS di box-shadow e border-radius. Tutto è su una sola pagina, si aggiorna in diretta mentre scrivi e gira nel tuo browser, quindi non c'è un account e non viene caricato niente.

I quattro strumenti, in un minuto

Apri gli Strumenti CSS e Colore e scegli una scheda:

• Convertitore Colori. Scrivi un colore come HEX, RGB o HSL, e gli altri due si aggiornano subito. Puoi anche cliccare sul campione per scegliere un colore.
• Gradiente. Scegli i colori (puoi aggiungerne altri), decidi tra lineare o radiale, imposta l'angolo e premi Copia CSS.
• Controllo Contrasto. Scegli un colore del testo e uno dello sfondo e guarda se chi ha la vista debole riesce a leggerlo, con un risultato per WCAG AA e AAA.
• Ombra e Raggio. Fai scorrere spostamento, sfocatura e diffusione per costruire un box-shadow, e arrotonda gli angoli con border-radius. Copia il CSS quando ti convince.

HEX, RGB e HSL: un colore, tre modi per dirlo

Pensa a uno stesso colore di vernice scritto su tre etichette diverse. La vernice è la stessa, cambia solo come è scritta la ricetta:

• L'HEX è il codice breve: un # seguito da sei lettere o numeri, come #2563EB.
• L'RGB è la ricetta: tre numeri che dicono quanto rosso, verde e blu mescolare.
• L'HSL sono le manopole: tonalità, saturazione e luminosità. È il più facile da regolare a mano. Vuoi lo stesso colore un po' più chiaro? Giri solo una manopola.

I design di solito ti danno uno di questi e il tuo codice ne ha bisogno di un altro, ed è proprio lì che un convertitore ti fa risparmiare qualche minuto.

Come convertire HEX in RGB

1. Apri il Convertitore Colori. È la prima scheda.
2. Scrivi o incolla il codice HEX nel campo HEX.
3. Leggi il risultato. I valori RGB e HSL si compilano da soli, insieme al campione.

Funziona anche al contrario. Scrivi in uno qualsiasi dei tre campi e gli altri due seguono.

Il tuo testo si legge davvero? (il problema del sussurro)

Il testo grigio chiaro su sfondo bianco sul tuo schermo sembra elegante. Per chi ha la vista debole, o con il telefono sotto il sole, è un sussurro in una stanza rumorosa. Il Controllo Contrasto misura quanto differiscono il colore del testo e quello dello sfondo e ti dice se passa.

Usa le WCAG, le Web Content Accessibility Guidelines, che fissano un contrasto minimo perché il testo resti leggibile a chi ha problemi di vista. Ci sono due livelli: AA è quello a cui puntano la maggior parte dei siti, e AAA è più rigoroso. Ecco cosa ti serve:

• Testo normale: almeno 4,5:1 per AA e 7:1 per AAA.
• Testo grande: 3:1 basta per AA. Grande significa 18pt o più, oppure 14pt o più in grassetto.

Lo strumento mostra il rapporto e un risultato per testo normale e grande a entrambi i livelli, così non devi fare nessun calcolo.

Gradienti e ombre senza scrivere il CSS a mano

Per un gradiente, scegli i colori, decidi tra lineare o radiale, imposta l'angolo e premi Copia CSS. Tutto il lavoro è qui.

Per un'ombra, pensa a una lampada sopra una scatola. Lo spostamento cambia dove cade l'ombra, una sfocatura maggiore la rende più morbida e la diffusione la rende più grande. Puoi impostare colore e opacità dell'ombra, oppure renderla interna. Poi arrotonda gli angoli con border-radius, tutti insieme, e copia il CSS quando ti convince.

Quando ti serve davvero

• Un design ti dà un codice HEX e il tuo codice vuole RGB o HSL.
• Un pulsante o un titolo di cui vuoi controllare la leggibilità del testo.
• Uno sfondo di pagina o di card che ha bisogno di un bel gradiente.
• Una card che deve staccarsi dalla pagina con un'ombra morbida e angoli arrotondati.
• Un controllo di accessibilità per un cliente, un progetto scolastico o il tuo sito.

Da sapere prima di iniziare

Domande frequenti