Strumento Gratuito Online

Strumenti CSS e Colore Gratis

Scegli i colori, crea gradienti, controlla il contrasto e genera CSS per ombra e raggio — tutto in un unico posto. Niente viene caricato, tutto si aggiorna in diretta mentre scrivi.

Clicca sul colore per sceglierne uno

HEX

RGB

HSL

Scrivi in uno qualsiasi dei campi — HEX, RGB o HSL — e gli altri due si aggiornano automaticamente, insieme al colore.

Cosa puoi fare con questi strumenti CSS e colore

Convertitore Colori — scrivi un colore in HEX, RGB o HSL e gli altri due si aggiornano subito. Comodo quando il design ti dà uno e il tuo codice ne vuole un altro.
Gradiente — scegli i colori, seleziona Lineare o Radiale, imposta l'angolo e clicca su Copia CSS.
Controllo Contrasto — scegli un colore per il testo e uno per lo sfondo per vedere se possono leggerlo anche le persone con vista debole (WCAG AA e AAA).
Ombra e Raggio — regola spostamento, sfocatura e diffusione per costruire un box-shadow e arrotonda gli angoli con border-radius. Copia il CSS quando ti piace.

Le parole del colore spiegate

HEX — un colore scritto come # seguito da sei lettere o numeri, ad esempio #2563EB.
RGB — lo stesso colore come tre numeri: rosso, verde e blu.
HSL — tonalità, saturazione e luminosità. È più facile da regolare a mano, ad esempio per schiarire un colore.
Contrasto WCAG — una regola su quanto testo e sfondo devono differire perché il testo resti leggibile. AA è il livello a cui puntano la maggior parte dei siti, AAA è più severo.

Da sapere prima di iniziare

I colori sono completamente opachi: niente trasparenza (alfa) né codici hex a 8 cifre.
I valori HSL sono arrotondati a numeri interi, quindi riconvertendo un canale di colore può differire di 1.
Superare o no il contrasto usa i colori esatti; il rapporto mostrato è arrotondato a due decimali, quindi 4,496 appare come 4.50:1 ma non raggiunge 4,5.
I gradienti accettano fino a 6 colori, distribuiti in modo uniforme, come angolo lineare o radiale circolare.