Codice SCSS per variabili e colori automatici

14 Ottobre 2024

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 //
/ 5
Grazie per aver votato!