come uso la teoria del colore su questo sito (con i token esatti)
dev · Oct 6, 2026 · 4 min read
la maggior parte dei post di "teoria del colore" è un cerchio cromatico e una promessa. questo è diverso: questo sito porta nel proprio build un controllo di contrasto, e il post parla delle decisioni vere, coi token in bella vista.
una sola tinta, che fa tutto il lavoro
tutto il sistema di accenti di questo sito è un'unica tinta oklch (verde, hue 150). da quella tinta derivio:
- il primary (pulsanti, link, stati attivi) — un verde di luminosità media che tiene 4,5:1 sotto il testo bianco
- il primary container (evidenziazioni morbide, badge) — stessa tinta, molto più chiaro, con testo scuro
- ogni stato hover, focus e selezione — di nuovo la stessa tinta, con luminosità o croma diverso
la disciplina è il punto: una tinta sola non può stonare con se stessa. i siti che sembrano "progettati" di solito usano meno colori di quanto pensi — li usano solo con più intenzione. nel momento in cui entra una seconda tinta d'accento, ogni accoppiata va ricontrollata a mano, e non viene mai fatta.
i neutri sono colori anche loro
sfondo, superfici e testo di questo sito non sono grigi — sono la stessa tinta verde con il croma quasi a zero. è il trucco più antico della stampa editoriale: tingi i neutri con il tuo accento e ogni superficie concorda in silenzio con ogni altra. il grigio puro accanto a un accento colorato sembra senza vita, anche se quasi nessuno sa dire perché.
la regola 60/30/10, applicata onestamente
la conosci: 60% dominante, 30% secondario, 10% accento. quello che nessuno dice è che la proporzione riguarda l'attenzione visiva, non l'area in pixel. la mia divisione vera: le superfici possiedono i pixel, la tipografia possiede il peso, e il verde è razionato sulle cose che voglio cliccate. quando tutto è in accento, niente lo è — il verde che compare è già di per sé informazione ("questo è interattivo").
la build fallisce se i colori sono sbagliati
ecco la parte che non ho mai visto fare a un altro sito: la build esegue un controllo di contrasto su 50 casi di token — ogni etichetta, badge e testo attenuato in entrambi i temi, con l'opacità composita esattamente come fa il browser — e fallisce se una coppia scende sotto WCAG AA (4,5:1 per il testo normale, 3:1 per il grande).
conta perché l'opacità è il posto dove la teoria del colore muore nella pratica: opacity-60 su testo scuro sopra una superficie chiara non lo rende "sottile", lo rende illeggibile a milioni di lettori, e nessuna design review becca tutto. una gate sì. la mia stamattina ha controllato 50 casi prima che questo post partisse.
cosa portarti a casa
- scegli una tinta d'accento e deriva tutto da lì (Material 3 la chiama palette tonali)
- tingi i neutri con quella tinta invece di usare il grigio
- spendi l'accento solo sull'interattivo
- metti il contrasto nella CI, non in un pdf: una build che fallisce è l'unica teoria del colore che sopravvive alle scadenze