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.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare alias per tipi generici e tuple in C#
Utilizzare l'espressione if inline in una pipeline di Azure DevOps
Usare il colore CSS per migliorare lo stile della pagina
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Utilizzare il trigger SQL con le Azure Function
Aggiornare a .NET 9 su Azure App Service
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Simulare Azure Cosmos DB in locale con Docker
Collegare applicazioni server e client con .NET Aspire
Recuperare automaticamente un utente e aggiungerlo ad un gruppo di Azure DevOps
Combinare Container Queries e Media Queries
Utilizzare Container Queries nominali