Tinte e Sfumature: Costruire Scale di Colore per i Design System

Genera palette di colori sistematiche — da 50 a 900 — che alimentano design system coerenti e accessibili.

6 min di lettura Colore · CSS · Design 6 sezioni + FAQ

Ogni design system maturo — Tailwind, Material Design, Chakra UI — usa una scala colori sistematica piuttosto che una manciata di colori scelti a mano. Queste scale permettono a designer e sviluppatori di scegliere il livello di luminosità giusto per ogni contesto.

Una tinta aggiunge bianco a un colore base, rendendolo più chiaro. Una sfumatura aggiunge nero, rendendolo più scuro. L'approccio matematico usa il modello HSL per regolare la luminosità preservando tonalità e saturazione del colore originale.

Cosa sono tinte e sfumature

Nella teoria del colore, una tinta è un colore mescolato con bianco, producendo una versione più chiara. Una sfumatura è un colore mescolato con nero, producendo una versione più scura. Nel design digitale, i generatori di tinte e sfumature producono tipicamente una gamma di valori di luminosità dal quasi-bianco al quasi-nero, tutti condividendo la stessa tonalità.

Tool gratuito Generatore Tinte e Ombre Genera una scala colori completa 50–900 da qualsiasi colore base

Modello HSL per la manipolazione

HSL (Tonalità, Saturazione, Luminosità) è il modello preferito per generare tinte e sfumature perché la luminosità è un asse indipendente. Per creare una tinta, aumenta L mantenendo H e S costanti. Per creare una sfumatura, diminuisci L. I passi lineari semplici non producono risultati percettivamente uniformi.

Costruire una scala a 9 step (100-900)

La scala standard dei design system va da 50 (quasi bianco) attraverso 100, 200, 300, 400, 500 (colore base), 600, 700, 800, 900 (quasi nero). Il colore base si ancora al 500. I passi 100-400 sono tinte con luminosità crescente. I passi 600-900 sono sfumature con luminosità decrescente.

Tool gratuito Generatore di Palette Colori Genera palette armoniche da qualsiasi colore base

Considerazioni sull'accessibilità

Quando costruisci una scala colori per un design system, devi verificare i rapporti di contrasto WCAG a ogni livello che intendi usare per il testo. Il passo 700 su sfondo bianco raggiunge tipicamente 4.5:1 (conformità AA). Il passo 900 raggiunge 7:1+ (AAA). Non usare mai il passo 300 o più chiaro per il testo corpo su sfondo bianco.

Palette Tailwind e Material Design

Tailwind CSS usa una scala 50-900 per tutti i suoi colori integrati. Material Design 3 usa un approccio diverso: genera uno schema colore completo da un singolo "seed color" usando lo spazio colore HCT (Tonalità, Chroma, Tone). Entrambi i sistemi condividono il principio che il colore deve essere sistematico, non arbitrario.

Proprietà personalizzate CSS

Esporta la tua scala colori come proprietà personalizzate CSS. Definiscile a livello :root. Denominale semanticamente: --color-blue-500, --color-blue-600. Referenziale negli stili dei componenti. Usando proprietà personalizzate HSL con variabili H, S, L separate abiliti la manipolazione dinamica in CSS.

Tool gratuito Controllo Contrasto Colori Controlla i rapporti di contrasto WCAG tra due colori

Domande frequenti

Qual è la differenza tra una tinta e una sfumatura? +
Una tinta è un colore mescolato con bianco (più chiaro). Una sfumatura è un colore mescolato con nero (più scuro). Nelle scale di colore digitali, entrambe si generano regolando la luminosità in HSL.
Perché usare HSL invece di RGB per generare tinte/sfumature? +
RGB non ha un asse di luminosità dedicato. HSL ha un parametro Luminosità che controlla direttamente la brillantezza senza influenzare la tonalità, rendendolo ideale per generare scale di colore.
Quanti passi dovrebbe avere una scala colori di un design system? +
Lo standard industriale è 9-11 passi (50, 100-900). Questo dà abbastanza granularità per testo, sfondi, bordi e stati interattivi.
Cos'è il colore base in una scala colori? +
Il colore base è tipicamente posizionato al passo 500 in una scala 100-900. È il colore come originariamente definito — né schiarito né scurito.
Come garantisco l'accessibilità nella mia scala colori? +
Controlla i rapporti di contrasto WCAG tra i passi della tua scala e gli sfondi su cui verranno usati. Verifica che i colori testo (tipicamente passo 700+) soddisfino almeno 4.5:1.
Posso usare OKLCH invece di HSL per le scale di colore? +
Sì, e OKLCH produce passi percettivamente più uniformi. OKLCH è ora supportato in CSS.
Come genera Tailwind CSS la sua palette colori? +
I colori integrati di Tailwind sono creati a mano dal team Tailwind, non generati algoritmicamente. Per i colori Tailwind personalizzati, puoi usare un generatore tinte/sfumature per creare una scala 50-900.