Il modello di colore HWB (acronimo di Hue-Whiteness-Blackness) rappresenta un metodo per specificare i colori sRGB. Questo modello descrive i colori partendo da una tonalità di base (hue o più comunemente conosciuta come ruota dei colori), a cui si aggiunge una quantità di bianco (whiteness) e di nero (blackness) per schiarire o scurire il colore di partenza.

Nonostante la semplicità dell'idea, hwb() può risultare complessa da elaborare mentalmente. Ad esempio, come si definiscono bianco e nero per arrivare ad uno specifico colore? Come si gestisce il bilanciamento tra bianco e nero per una sfumatura di colore? Cosa succede se un colore include il 100% di nero e il 100% di bianco?

A tutte queste domande possiamo dare una sola risposta: pratica e abitudine. In linea di massima sappiamo per certo che quantità prossime, o superiori, al 50% per entrambi i colori contemporaneamente producono scale di grigi. Eccone quindi un esempio di utilizzo

:root {
  --hwb-swatch-1: hwb(400 75% 0%);
  --hwb-swatch-2: hwb(400 50% 25%);
  --hwb-swatch-3: hwb(400 25% 50%);
  --hwb-swatch-4: hwb(400 0% 75%);
  --hwb-swatch-5: hwb(400 0% 90%);
}

.shadow-1 {
  background: var(--hwb-swatch-1);
}

.shadow-2 {
  background: var(--hwb-swatch-2);
}

.shadow-3 {
  background: var(--hwb-swatch-3);
}

.shadow-4 {
  background: var(--hwb-swatch-4);
}

.shadow-5 {
  background: var(--hwb-swatch-5);
}

L'utilità, e la dinamicità, di questa tecnica la si ritrova attraverso le funzioni del SCSS, che permettono di creare una serie di classi per colori e relative sfumature, partendo da una lista di colori Hue.