Editor di Colori
Regola e perfeziona i colori con precisione. Modifica tonalità, saturazione e luminosità, genera scale di sfumature e verifica il contrasto per l'accessibilità del testo.
Informazioni su questo strumento
L'Editor di Colori è uno strumento completo per regolare e perfezionare qualsiasi colore con precisione. Inserisci un colore in formato HEX, RGB, HSL, o persino per nome, quindi utilizza i cursori per modificare Tonalità (il tono del colore), Saturazione (l'intensità del colore) e Luminosità (quanto il colore è chiaro o scuro). Le modifiche vengono applicate in tempo reale, così puoi visualizzare immediatamente il risultato e verificare la leggibilità rispetto a testo chiaro e scuro. Lo strumento converte automaticamente il colore nei formati più comuni utilizzati nel web design e nello sviluppo, inclusi HEX, RGB, HSL, HSV e OKLCH.
Funzionalità Principali
Per cosa puoi usare l'Editor di Colori
- Creare palette coerenti per design system, componenti e interfacce web
- Verificare che le combinazioni di colori superino le soglie di accessibilità WCAG e APCA prima della pubblicazione
- Adattare il colore di un brand per diversi contesti come modalità scura, stati hover ed elementi disabilitati
- Generare scale di sfumature in stile Tailwind da esportare come variabili CSS o design token
- Convertire i colori tra HEX, RGB, HSL e OKLCH lavorando su diversi strumenti di design e sviluppo
Come usare l'Editor di Colori
Inserisci il colore base
Digita qualsiasi valore HEX, RGB, HSL o nome di colore nel campo Colore Base. Lo strumento carica istantaneamente il colore e lo converte in tutti i formati disponibili
Regola con i cursori
Usa i controlli di Tonalità, Saturazione e Luminosità per modificare il colore in tempo reale. Tutti i formati e la scala di sfumature si aggiornano all'istante
Verifica il contrasto
La sezione accessibilità mostra il rapporto di contrasto rispetto a testo bianco e nero utilizzando i modelli WCAG 2.1 e APCA, indicando se la combinazione viene superata o meno
Copia i valori
Clicca su qualsiasi blocco di formato (RGB, HSL, HSV, OKLCH) per copiare direttamente il valore. Il valore HEX è mostrato nell'anteprima principale
Esporta la scala di sfumature
Nella sezione Scala di Tinte e Sfumature, scegli il formato di esportazione (CSS, SCSS, JSON, Tailwind) e il formato colore (HEX, RGB, HSL o OKLCH), quindi clicca su Copia per utilizzarlo nel tuo progetto
Domande Frequenti
WCAG 2.1 utilizza una semplice formula matematica per calcolare il contrasto tra i colori. APCA (Accessible Perceptual Contrast Algorithm) è un modello più moderno che tiene conto di come l'occhio umano percepisce la luminosità in diversi contesti di lettura. Per il testo normale, un valore APCA di 60 o superiore è considerato adeguato.
Seleziona il formato di esportazione Tailwind e il tuo formato colore preferito. Il codice generato può essere incollato direttamente in tailwind.config.js o in un file CSS come proprietà personalizzate. Se usi OKLCH, è nativamente compatibile con Tailwind 4.
OKLCH è uno spazio colore percettivamente uniforme: significa che la modifica della luminosità o della croma produce risultati visivamente prevedibili. È il formato adottato internamente da Tailwind 4 e dal CSS Color Level 4, il che lo rende ideale per generare scale di sfumature visivamente più coerenti rispetto a HSL.