Strumento gratuito · Open source · Nessuna registrazione

Il colore giusto
cambia tutto.

Coolori è lo strumento italiano per progettare palette accessibili, testare contrasti WCAG e esportare design token — in tempo reale, su layout realistici.

Progettato per i team che usano

StripeLinearVercelFigmaFramerNotion

Contrasto WCAG in tempo reale

Ogni colore viene verificato rispetto ai requisiti di contrasto WCAG 2.2. Badge AAA, AA o errore — lo vedi subito sul campione.

AAA ✓✓AA ✓4.5:1 ratio

OKLCH nativo

Lavora in spazi colore percettivamente uniformi. Regola luminosità, croma e tonalità in modo indipendente e prevedibile.

Esporta in qualsiasi formato

Variabili CSS, config Tailwind, SCSS, token JSON — esporta nel formato che ti serve con un click.

Modalità chiara e scura

Progetta palette indipendenti per light e dark mode. Passa da una all'altra con un toggle e testa entrambe in tempo reale.

Light ☀Dark 🌙

3 passi

Come funziona

Scegli i colori

Seleziona i cinque ruoli semantici — testo, sfondo, primario, secondario, accento — dalla toolbar in basso. Usa il picker OKLCH o genera casualmente.

Visualizza il risultato

Guarda la palette applicata istantaneamente su tre template realistici. Alterna tra modalità chiara e scura con un click.

Esporta e usa

Copia le variabili CSS, la config Tailwind, SCSS o JSON. Scarica uno ZIP o condividi il link della palette con il team.

Perché OKLCH

Non tutti gli spazi colore sono uguali

Caratteristica	HEX / RGB	HSL	LCH	OKLCH ✦
Uniformità percettiva	✗	✗	≈	✓
Luminosità prevedibile	✗	✗	✓	✓
Gamut P3 / Display-P3	✗	✗	✓	✓
Sfumature coerenti	✗	✗	≈	✓
Supporto CSS nativo	✓	✓	✓	✓

OKLCH garantisce che variazioni uguali di luminosità producano risultati percettivi uguali — rendendo le scale tint/shade perfettamente prevedibili su qualsiasi tonalità.

Accessibilità

Cosa significano AA e AAA?

AAA

7:1+

Massima leggibilità. Consigliato per testo corpo e contenuti lunghi.

4.5:1+

Requisito minimo WCAG 2.2 per testo normale. Obbligatorio per conformità.

AA Large

3:1+

Per testo ≥ 18pt o 14pt grassetto. Accettabile solo per titoli grandi.

Domande frequenti

Coolori è davvero gratuito?

Sì, completamente. Coolori è un tool open source creato per la community italiana del design e dello sviluppo web. Nessun abbonamento, nessuna registrazione.

Cos'è OKLCH e perché è migliore di HSL?

HSL non è percettivamente uniforme — un giallo al 50% di luminosità appare molto più brillante di un blu al 50%. OKLCH allinea l'asse di luminosità alla percezione umana: quando imposti L al 60%, ogni tonalità avrà la stessa luminosità percepita.

Quali formati di esportazione sono supportati?

Variabili CSS custom properties, Tailwind CSS config, SCSS variables, JSON design tokens. Puoi scaricare uno ZIP o copiare il codice direttamente.

Come vengono gestiti light e dark mode?

Ogni ruolo colore ha un valore indipendente per la modalità chiara e scura. Puoi configurare entrambi separatamente e esportare con le strategie @media, data-attribute o la funzione CSS light-dark().

Funziona con i colori P3 e wide-gamut?

Sì. OKLCH supporta nativamente gamut più ampi di sRGB, incluso Display-P3. Se il tuo monitor lo supporta, vedrai colori impossibili in HEX.

Prova subito — è gratis, per sempre

Cambia i colori nella barra in basso, visualizza il risultato sui tre template e esporta il tuo tema in pochi secondi.

Cambia layout di anteprima

Guarda come la tua palette si adatta a contesti diversi. I colori che scegli dalla toolbar verranno applicati a ciascun template.

Il colore giustocambia tutto.