Příklad – Skládání barev pomocí proměnných

Základní barva a její varianty jsou zde poskládány pomocí proměnných z jednotlivých složek a hodnot z nich odvozených jednoduchými výpočty. Nejprve definujeme složky základní barvy v modelu HSL:

:root {
    --barva-h: 169;
    --barva-s: 67%;
    --barva-l: 22%;
}

Tento blok má přiřazenu třídu barevny, která nastaví pro pozadí základní barvu složenou z hodnot proměnných:

--nase-barva: hsl(
    var(--barva-h),
    var(--barva-s),
    var(--barva-l));

Tento blok má přiřazenu třídu tmavsi, která nastaví pro pozadí tmavší variantu základní barvy, ve které byla složka pro světlost zmenšena o 10 %:

--nase-barva-tmavsi: hsl(
    var(--barva-h),
    var(--barva-s),
    calc(var(--barva-l) - 10%));

Tento blok má přiřazenu třídu svetly, která nastaví pro pozadí světlou variantu základní barvy, ve které byla složka pro světlost zvětšena o 50 % a sytost snížena o 40 %:

--nase-barva-svetlejsi: hsl(
    var(--barva-h),
    calc(var(--barva-s) - 40%),
    calc(var(--barva-l) + 50%));

Bez snížení sytosti by světlá varianta byla příliš „jásavá“ a poutala na sebe nepatřičně velkou pozornost. V tomto bloku byla pouze světlost původní barvy zvětšena o 50 %, sytost zůstala beze změny.

zpět: CSS proměnné