Questo codice definisce una serie di variabili CSS per la gestione dei colori utilizzando il modello HSL (Hue, Saturation, Lightness). Le variabili sono impostate all’interno del selettore :root
, rendendole globali e disponibili per tutto il documento.
Ogni colore primario, secondario, di accento e di base viene configurato separatamente attraverso variabili per il valore del tono (Hue), della saturazione (Saturation) e della luminosità (Lightness), offrendo grande flessibilità. Inoltre, sono previste diverse varianti per ciascun colore, come versioni più chiare o più scure, nonché opzioni con trasparenze (utilizzando hsla
per aggiungere l’alpha). È possibile selezionare e utilizzare questi colori in altri stili CSS richiamando le variabili tramite var(--nomeVariabile)
.
Questa struttura di colori facilita la modifica e la gestione della palette cromatica di un sito o di un’applicazione, permettendo un controllo centralizzato e coerente sui colori utilizzati nel design del sito web.
// controllo colore HSL e variabili. Per selezionare il colore scrivere var(--quiNomeVariabile) //
:root {
--primary-h: 187;
--primary-s: 83%;
--primary-l: 41%;
--secondary-h: 187;
--secondary-s: 83%;
--secondary-l: 14%;
--accent-h: 188;
--accent-s: 100%;
--accent-l: 66%;
--base-h: 0;
--base-s: 0%;
--base-l: 50%;
--white-h: 0;
--white-s: 0%;
--white-l: 100%;
--black-h: 0;
--black-s: 1%;
--black-l: 5%;
--focus-h: 46;
--focus-s: 98%;
--focus-l: 60%;
// variabili //
--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
--primary-ultra-light: hsl(var(--primary-h), var(--primary-s), calc((var(--primary-l) * 0) + 95%));
--primary-light: hsl(var(--primary-h), var(--primary-s), calc((var(--primary-l) * 0) + 85%));
--primary-dark: hsl(var(--primary-h), var(--primary-s), calc((var(--primary-l) * 0) + 25%));
--primary-ultra-dark: hsl(var(--primary-h), var(--primary-s), calc((var(--primary-l) * 0) + 10%));
--primary-trans-80: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .8);
--primary-trans-60: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .6);
--primary-trans-40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .4);
--primary-trans-20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .2);
--primary-comp: hsl(calc(var(--primary-h) + 180), var(--primary-s), var(--primary-l));
--secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
--secondary-ultra-light: hsl(var(--secondary-h), var(--secondary-s), calc((var(--secondary-l) * 0) + 95%));
--secondary-light: hsl(var(--secondary-h), var(--secondary-s), calc((var(--secondary-l) * 0) + 85%));
--secondary-dark: hsl(var(--secondary-h), var(--secondary-s), calc((var(--secondary-l) * 0) + 25%));
--secondary-ultra-dark: hsl(var(--secondary-h), var(--secondary-s), calc((var(--secondary-l) * 0) + 10%));
--secondary-trans-80: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .8);
--secondary-trans-60: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .6);
--secondary-trans-40: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .4);
--secondary-trans-20: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .2);
--secondary-comp: hsl(calc(var(--secondary-h) + 180), var(--secondary-s), var(--secondary-l));
--accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--accent-ultra-light: hsl(var(--accent-h), var(--accent-s), calc((var(--accent-l) * 0) + 95%));
--accent-light: hsl(var(--accent-h), var(--accent-s), calc((var(--accent-l) * 0) + 85%));
--accent-dark: hsl(var(--accent-h), var(--accent-s), calc((var(--accent-l) * 0) + 25%));
--accent-ultra-dark: hsl(var(--accent-h), var(--accent-s), calc((var(--accent-l) * 0) + 10%));
--accent-trans-80: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .8);
--accent-trans-60: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .6);
--accent-trans-40: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .4);
--accent-trans-20: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .2);
--accent-comp: hsl(calc(var(--accent-h) + 180), var(--accent-s), var(--accent-l));
--base: hsl(var(--base-h), var(--base-s), var(--base-l));
--base-ultra-light: hsl(var(--base-h), var(--base-s), calc((var(--base-l) * 0) + 95%));
--base-light: hsl(var(--base-h), var(--base-s), calc((var(--base-l) * 0) + 85%));
--base-dark: hsl(var(--base-h), var(--base-s), calc((var(--base-l) * 0) + 25%));
--base-ultra-dark: hsl(var(--base-h), var(--base-s), calc((var(--base-l) * 0) + 10%));
--base-trans-80: hsla(var(--base-h), var(--base-s), var(--base-l), .8);
--base-trans-60: hsla(var(--base-h), var(--base-s), var(--base-l), .6);
--base-trans-40: hsla(var(--base-h), var(--base-s), var(--base-l), .4);
--base-trans-20: hsla(var(--base-h), var(--base-s), var(--base-l), .2);
--base-comp: hsl(calc(var(--base-h) + 180), var(--base-s), var(--base-l));
--focus: hsl(var(--focus-h), var(--focus-s), var(--focus-l));
--focus-ultra-light: hsl(var(--focus-h), var(--focus-s), calc((var(--focus-l) * 0) + 95%));
--focus-light: hsl(var(--focus-h), var(--focus-s), calc((var(--focus-l) * 0) + 85%));
--focus-dark: hsl(var(--focus-h), var(--focus-s), calc((var(--focus-l) * 0) + 25%));
--focus-ultra-dark: hsl(var(--focus-h), var(--focus-s), calc((var(--focus-l) * 0) + 10%));
--focus-trans-80: hsla(var(--focus-h), var(--focus-s), var(--focus-l), .8);
--focus-trans-60: hsla(var(--focus-h), var(--focus-s), var(--focus-l), .6);
--focus-trans-40: hsla(var(--focus-h), var(--focus-s), var(--focus-l), .4);
--focus-trans-20: hsla(var(--focus-h), var(--focus-s), var(--focus-l), .2);
--focus-comp: hsl(calc(var(--focus-h) + 180), var(--focus-s), var(--focus-l));
--white: hsl(var(--white-h), var(--white-s), var(--white-l));
--white-trans-80: hsla(var(--white-h), var(--white-s), var(--white-l), .8);
--white-trans-60: hsla(var(--white-h), var(--white-s), var(--white-l), .6);
--white-trans-40: hsla(var(--white-h), var(--white-s), var(--white-l), .4);
--white-trans-20: hsla(var(--white-h), var(--white-s), var(--white-l), .2);
--black: hsl(var(--black-h), var(--black-s), var(--black-l));
--black-trans-80: hsla(var(--black-h), var(--black-s), var(--black-l), .8);
--black-trans-60: hsla(var(--black-h), var(--black-s), var(--black-l), .6);
--black-trans-40: hsla(var(--black-h), var(--black-s), var(--black-l), .4);
--black-trans-20: hsla(var(--black-h), var(--black-s), var(--black-l), .2);
}
// end colori //