Gli strumenti colore di ToolDeck ti permettono di convertire tra formati di colore, verificare i rapporti di contrasto per l'accessibilità, generare palette, costruire gradienti CSS e cercare nomi di colori o classi Tailwind direttamente nel browser. Il Convertitore di Colori gestisce HEX, RGB, HSL e HSV in entrambe le direzioni. Il Verificatore di Contrasto testa la conformità WCAG 2.1 AA e AAA. Il Generatore di Palette crea schemi complementari, analoghi, triadici e tetradici da qualsiasi colore base. Il Generatore di Gradienti CSS produce codice per gradienti lineari e radiali pronti da copiare. Il Cercatore di Nomi Colore abbina qualsiasi valore al nome CSS più vicino, e il Cercatore di Colori Tailwind mappa colori arbitrari alle classi di utilità Tailwind. Tutti gli strumenti vengono eseguiti lato client senza inviare dati ad alcun server.
Cosa Sono gli Strumenti Colore?
Gli strumenti colore sono utilità che aiutano sviluppatori e designer a lavorare con i valori cromatici digitali. Ogni colore su schermo è memorizzato come numeri: tre canali per RGB (rosso, verde, blu), una tripletta esadecimale per la sintassi CSS abbreviata, oppure tonalità angolare più saturazione e luminosità per HSL. Passare manualmente tra queste rappresentazioni è lento e soggetto a errori, specialmente quando occorre considerare anche la trasparenza alpha o modelli più recenti come OKLCH.
Al di là della conversione di formato, il lavoro con i colori comprende test di accessibilità, creazione di palette e composizione di gradienti. WCAG 2.1 definisce rapporti di contrasto minimi (4,5:1 per il testo normale ad AA, 7:1 per AAA) difficili da verificare a occhio. Generare schemi di colore armoniosi richiede calcoli angolari precisi sulla ruota dei colori HSL. I gradienti CSS richiedono una sintassi corretta per direzione, stop di colore e valori di fallback. Fare tutto questo manualmente su un design system con decine di token diventa rapidamente tedioso.
Gli strumenti colore automatizzano questi compiti. Accettano un colore in un formato, eseguono i calcoli e restituiscono il risultato necessario, che si tratti di un valore convertito, di un esito positivo/negativo sull'accessibilità, di una serie di campioni armoniosi o di uno snippet CSS. Quando lo strumento gira nel browser, si evita anche di caricare token di design sensibili su servizi di terze parti.
Perché Usare gli Strumenti Colore di ToolDeck?
Gli strumenti colore di ToolDeck vengono eseguiti interamente nel tuo browser. Nessun valore colore lascia il tuo dispositivo, non è richiesto alcun account e ogni strumento si carica istantaneamente senza installare estensioni o software desktop.
🎨Converti i formati in un solo passaggio
Incolla un codice HEX e ottieni simultaneamente i valori RGB, HSL e HSV. Nessuna necessità di concatenare più convertitori o ricordare le formule di conversione.
🔒Mantieni privati i token di design
Tutta l'elaborazione avviene lato client. I colori del tuo brand, le decisioni di palette non ancora rilasciate e i valori del design system interno rimangono sul tuo dispositivo.
♿Testa l'accessibilità all'istante
Verifica qualsiasi coppia primo piano/sfondo rispetto alle soglie WCAG 2.1 AA e AAA per testo normale e grande. Ottieni il rapporto di contrasto esatto, non solo un'etichetta passato/non passato.
⚡Copia output pronto per la produzione
Ogni strumento produce valori che puoi incollare direttamente in CSS, nella configurazione Tailwind o nei campi di input degli strumenti di design. Nessuna riformattazione necessaria.
Casi d'Uso degli Strumenti Colore
Ecco sei scenari comuni in cui gli strumenti colore di ToolDeck fanno risparmiare tempo.
Manutenzione del Design System
Quando aggiorni un design system, spesso ricevi colori in HEX dal designer ma hai bisogno di HSL per le proprietà personalizzate CSS. Il
Convertitore di Colori traduce tra i formati in modo da poter popolare i file di token senza calcoli manuali.
Audit di Accessibilità
Durante un audit di conformità WCAG, ogni combinazione testo/sfondo deve soddisfare i rapporti di contrasto minimi. Il
Verificatore di Contrasto Colore mostra il rapporto esatto e lo stato AA/AAA per testo normale e di grandi dimensioni.
Esplorazione della Palette del Brand
Partendo da un singolo colore brand, hai bisogno di varianti accent e neutrali. Il
Generatore di Palette Colore calcola armonie complementari, analoghe, triadiche e tetradiche così puoi valutare le opzioni prima di scegliere una palette.
Stile di Sfondo CSS
Creare uno sfondo hero o una card con un gradiente richiede una sintassi CSS corretta per angoli, stop di colore e prefissi vendor. Il
Generatore di Gradienti CSS ti permette di costruire il gradiente visivamente e copiare il codice.
Migrazione a Tailwind
Quando migri un progetto a Tailwind CSS, devi mappare i valori HEX o RGB esistenti alla classe di utilità Tailwind più vicina. Il
Cercatore di Colori Tailwind trova la corrispondenza più prossima e mostra il delta così puoi decidere se l'approssimazione è accettabile.
Code Review e Documentazione
Durante una code review, un valore HEX grezzo come #708090 non dice nulla a colpo d'occhio. Il
Cercatore di Nomi Colore lo identifica come SlateGray, rendendo le review e la documentazione più leggibili.
Riferimento sui Modelli di Colore CSS
CSS supporta più modelli di colore. La tabella sottostante riassume i sei formati più comuni, la loro sintassi e i casi d'uso tipici. Tutti questi sono supportati dal Convertitore di Colori di ToolDeck.
| Modello | Sintassi CSS | Canali | Intervallo Valori | Uso Tipico |
|---|
| HEX | #rrggbb | Rosso, Verde, Blu | 00–ff per canale | Il più comune in CSS, handoff di design, linee guida del brand |
| RGB | rgb(r, g, b) | Rosso, Verde, Blu | 0–255 per canale | Canvas API JavaScript, stili calcolati, elaborazione immagini |
| HSL | hsl(h, s%, l%) | Tonalità, Saturazione, Luminosità | 0–360 / 0–100% / 0–100% | Token di design, generazione di temi, varianti di tono programmatiche |
| HSV | N/A (non in CSS) | Tonalità, Saturazione, Valore | 0–360 / 0–100% / 0–100% | Selettori di colore (Photoshop, Figma), calibrazione colore hardware |
| OKLCH | oklch(L C H) | Luminosità, Croma, Tonalità | 0–1 / 0–0,4 / 0–360 | Palette percettivamente uniformi (spec CSS Color Level 4) |
| Named | es. slategray | Mappato a RGB internamente | 148 nomi predefiniti | Prototipazione, codice leggibile, dimostrazioni rapide |
CSS Color Level 4 (W3C) definisce anche le funzioni lab(), lch() e color(). HEX e RGB rimangono i formati più ampiamente supportati tra browser e strumenti di design.
Come Scegliere lo Strumento Colore Giusto
Ogni strumento colore risolve un problema diverso. Usa la guida sottostante per trovare quello adatto al tuo compito.
- 1
Se hai bisogno di convertire un colore tra i formati HEX, RGB, HSL o HSV → Convertitore di Colori - 2
Se hai bisogno di verificare che una coppia testo/sfondo soddisfi gli standard di accessibilità WCAG → Verificatore di Contrasto Colore - 3
Se hai bisogno di generare un insieme di colori armoniosi da un singolo colore base → Generatore di Palette Colore - 4
Se hai bisogno di costruire un gradiente CSS lineare o radiale e ottenere il codice → Generatore di Gradienti CSS - 5
Se hai bisogno di trovare il nome CSS leggibile più vicino a un dato valore di colore → Cercatore di Nomi Colore - 6
Se hai bisogno di mappare un colore arbitrario alla classe di utilità Tailwind CSS più vicina → Cercatore di Colori Tailwind
Tutti e sei gli strumenti accettano input in più formati. Se non sei sicuro del formato del tuo colore, inizia con il Convertitore di Colori, che rileva automaticamente la notazione HEX, RGB, HSL e HSV.
Domande Frequenti
Qual è la differenza tra i formati di colore HEX e RGB?
HEX e RGB rappresentano lo stesso spazio cromatico. Un codice HEX come #ff6600 è una codifica esadecimale dei tre canali RGB: ff = 255 (rosso), 66 = 102 (verde), 00 = 0 (blu). L'unica differenza è la notazione. HEX è più compatto nei fogli di stile CSS, mentre RGB è più facile da manipolare programmaticamente perché ogni canale è già un intero decimale.
Quando dovrei usare HSL invece di HEX o RGB?
HSL separa la tonalità (il colore stesso) dalla saturazione e dalla luminosità. Questo facilita la creazione di varianti di tono: mantieni la tonalità fissa, abbassa la luminosità per una tinta più scura, alzala per una più chiara. I design system che generano temi chiari/scuri da un singolo colore base spesso memorizzano i token in HSL per questo motivo. Le proprietà personalizzate CSS si combinano bene con HSL perché puoi sovrascrivere i singoli canali.
Quale rapporto di contrasto richiede WCAG 2.1 per il testo?
WCAG 2.1 Livello AA richiede un rapporto di contrasto minimo di 4,5:1 per il testo normale (sotto 18pt o 14pt grassetto) e 3:1 per il testo grande (18pt+ o 14pt+ grassetto). Il Livello AAA porta queste soglie a 7:1 e 4,5:1 rispettivamente. Questi rapporti vengono calcolati dalla luminanza relativa dei colori di primo piano e sfondo usando la formula definita nel Criterio di Successo 1.4.3 di WCAG 2.1.
Quanti colori con nome supporta CSS?
CSS definisce 148 colori con nome, ereditati dalle specifiche SVG 1.1 e CSS3. Vanno da nomi comuni come red, blue e white a nomi specifici come MediumSlateBlue, PapayaWhip e LavenderBlush. I colori con nome si mappano a valori RGB fissi. La specifica CSS Color Level 4 mantiene gli stessi 148 nomi senza aggiungerne di nuovi. I browser riconoscono anche la parola chiave transparent (equivalente a rgba(0,0,0,0)).
Posso usare i colori OKLCH in CSS oggi?
Sì. La funzione oklch() è supportata in Chrome 111+, Firefox 113+ e Safari 15.4+. OKLCH fa parte della specifica CSS Color Level 4 pubblicata da W3C. Il suo principale vantaggio rispetto a HSL è l'uniformità percettiva: due colori con lo stesso valore di luminosità in OKLCH appaiono effettivamente ugualmente luminosi all'occhio umano, cosa che non vale per HSL. Questo rende OKLCH una scelta migliore per generare palette accessibili con luminosità percepita uniforme.
Qual è la differenza tra HSL e HSV?
HSL e HSV usano entrambi una rappresentazione cilindrica con la tonalità come angolo, ma definiscono la luminosità in modo diverso. In HSL, una luminosità del 50% è il colore puro; 0% è nero, 100% è bianco. In HSV, un valore del 100% è il colore puro; 0% è nero. HSV non ha un modo integrato per raggiungere il bianco senza ridurre anche la saturazione. I designer e i selettori di colore (Photoshop, Figma) usano tipicamente HSV, mentre CSS usa nativamente HSL.
Come trovo la classe Tailwind per un colore HEX arbitrario?
Tailwind CSS include una palette fissa di circa 220 classi colore (22 tonalità per 10 sfumature ciascuna, più nero, bianco e trasparente). Per trovare la classe più vicina a un dato valore HEX, si calcola la distanza euclidea in uno spazio cromatico percettivo (come CIELAB o OKLCH) tra il tuo colore e ogni campione Tailwind. Il Cercatore di Colori Tailwind su ToolDeck fa questo automaticamente e mostra la corrispondenza più vicina insieme alla differenza cromatica, così puoi valutare se l'approssimazione è accettabile.
È sicuro incollare colori brand riservati in uno strumento online?
Dipende dallo strumento. Qualsiasi strumento che invia il tuo input a un server espone quei valori nel traffico di rete e nei log del server. Gli strumenti colore di ToolDeck vengono eseguiti interamente nel tuo browser usando JavaScript lato client. Nessuna richiesta HTTP porta i tuoi dati di colore ad alcun backend. Puoi verificarlo aprendo la scheda Rete del browser mentre usi lo strumento. Per massima cautela, puoi anche usare gli strumenti offline dopo il caricamento iniziale della pagina.