CSS Color 4 porta sul web strumenti e funzionalità a un'ampia gamma di colori: più colori, funzioni di manipolazione e gradienti migliori.
Per più di 25 anni, sRGB
(standard rosso verde blu) è stato l'unico
gamma di colori per i gradienti e i colori CSS, con offerte di spazi colore
come rgb(), hsl() ed esadecimale. È la capacità di gamma di colori più
comune tra i display; un denominatore comune. Siamo abituati a
specificare i colori al suo interno.
Man mano che i display riescono a mostrare un'ampia gamma di colori, il CSS ha bisogno di un modo per specificare i colori compresi in questi intervalli più ampi. Gli attuali formati di colore non prevedono alcuna lingua per ampi intervalli di colori.
Se il CSS non si aggiornava mai, rimarrebbe per sempre bloccato nelle gamme di colori degli anni '90, non obbligato mai a corrispondere all'ampia gamma di offerte presenti nelle immagini e nei video. Intrappolato, mostra solo il 30% dei colori che l'occhio umano può vedere. Ringrazia il CSS Color Level 4 per averci aiutato a fuggire, scritto principalmente da Lea Verou e Chris Liley.
Chrome supporta le gamut e gli spazi colore CSS Color 4. Il CSS ora supporta i display HD (alta definizione), specificando i colori delle gamut HD e offrendo al contempo spazi colore con specializzazioni.
Fai una prova
Questa guida è composta da tre parti. Continua a leggere per ricordare dove c'è stato il colore. Quindi, scopri dove andrà il colore e come gestire il colore in futuro eseguendo la migrazione al colore HD.
Panoramica
Nei browser supportati, la scelta di colori è del 50% in più. Se pensavi che sembrassero 16 milioni di colori, aspetta di vedere quanti colori possono essere mostrati in alcuni di questi nuovi spazi. Inoltre, pensa a tutti quei gradienti che basavano su una profondità in bit non sufficiente, si risolve anche questo problema.
Oltre alla maggiore quantità di colori, probabilmente i colori più vividi di cui è capace il display, i nuovi spazi colore offrono strumenti e metodi unici per gestire e creare sistemi di colore. Ad esempio, prima c'era HSL e il suo canale sulla "leggerezza", che erano i migliori sviluppatori web. Ora in CSS abbiamo la "leggerezza percettiva" di LCH.
Inoltre, i gradienti e le combinazioni ricevono alcuni miglioramenti: supporto dello spazio colore, opzioni di interpolazione delle tonalità e meno banding.
L'immagine seguente mostra alcuni upgrade della combinazione.
https://codepen.io/web-dot-dev/pen/poZgXQb
Il problema dei colori e del web è che i CSS non sono pronti per l'alta definizione, mentre i display che la maggior parte delle persone ha in tasca, sui giri o montati sulle pareti sono disponibili con un'ampia gamma di colori e con colori ad alta definizione. La capacità dei colori della visualizzazione è cresciuta più velocemente di CSS, ora che CSS
C'è molto di più che "più colori". Alla fine di questi documenti, potrai specificare altri colori, migliorare i gradienti e scegliere gli spazi colore e la gamma cromatici migliori per ogni attività.
Che cos'è una gamma di colori?
Una gamma rappresenta la dimensione di un elemento. La frase "milioni di colori" è un commento sulla gamma di un display o sulla gamma di colori tra cui scegliere. Nell'immagine seguente, vengono confrontate tre gamut e maggiore è la dimensione, più colori offre.
Una gamma di colori può anche avere un nome. Come un pallone da basket contro una palla da baseball o una tazza di caffè vintage contro un grande; un nome per la taglia può aiutare le persone a comunicare. Imparare i nomi di questa gamma di colori aiuta a comunicare e comprendere rapidamente una gamma di colori.
Questo articolo esamina le precedenti gamut di colori. Puoi scoprire di più sulle sette nuove gamut in Accedi a più colori e nuovi spazi.
Gamma visiva umana
Le gamut cromatiche vengono spesso confrontate con la gamma visiva umana; la totalità dei colori che riteniamo possa essere vista dall'occhio umano. L'HVS è spesso raffigurato con un diagramma di cromaticità, come questo:
La forma più esterna è quella che possiamo vedere come esseri umani, mentre il triangolo interno è l'intervallo di funzioni rgb(), noto anche come spazio colore sRGB.
Come hai visto qui sopra, confrontando le dimensioni della gamma, troverai i triangoli qui sotto. Questo è il modo in cui il settore comunica sulle gamut di colori e confrontarle.
Cos'è uno spazio colore?
Gli spazi colore sono disposizioni di una gamma che stabiliscono una forma e un metodo di accesso ai colori. Molti sono semplici forme 3D, come cubi o cilindri. Questa disposizione dei colori determina quali colori sono vicini e il funzionamento di accesso e interpolazione dei colori.
RGB è come uno spazio colore rettangolare, in cui i colori sono accessibili specificando le coordinate su tre assi. HSL è uno spazio colore cilindrico, in cui i colori sono accessibili con un angolo di tonalità e coordinate su 2 assi
La specifica di livello 4 introduce 12 nuovi spazi colore per la ricerca dei colori. Si aggiungono ai 4 spazi colore precedentemente disponibili:
Riepilogo della gamma di colori e dello spazio colore
Uno spazio colore è una mappatura di colori in cui una gamma di colori corrisponde a una gamma di colori. Considera una gamma cromatica come un totale di particelle e uno spazio colore come una bottiglia fatta per contenere questo intervallo di particelle.
Ecco un'immagine interattiva di Alexey Ardov che mostra gli spazi cromatici. In questa demo, punta, trascina ed esegui lo zoom. Modifica lo spazio colore per vedere gli altri spazi.
- Utilizza Gamma di colori per parlare di una gamma di colori, ad esempio gamma bassa o gamma ridotta rispetto a gamma alta o ampia.
- Usa gli spazi colore per parlare della disposizione dei colori, della sintassi utilizzata per specificare un colore, manipolare il colore e interpolare tramite i colori.
Una recensione degli spazi colore classici {#classic-color-spaces}
CSS Color 4 illustra una serie di nuove funzionalità e strumenti per CSS e colori. Innanzitutto, un riepilogo di dove si trovava il colore prima di queste nuove funzionalità.
Dagli anni 2000 puoi utilizzare quanto segue per tutte le proprietà CSS che accettano un colore come valore: esadecimale (numeri esadecimali), rgb(), rgba(), per nome come hotpink o con parole chiave come currentColor.
Intorno al 2010, a seconda del browser, il CSS potrebbe utilizzare hsl() colori. Poi, nel 2017, è apparso hex con alfa. Ultimamente, solo di recente, hwb() ha iniziato a ricevere assistenza nei browser.
Tutti questi spazi colore classici fanno riferimento a colori all'interno della stessa gamma di colori, sRGB.
Esadecimale
Lo spazio colore esadecimale specifica R, G, B e A con numeri esadecimali. I seguenti esempi di codice mostrano tutti i modi in cui questa sintassi può specificare il rosso, il verde e il blu opacità più.
.valid-css-hex-colors {
/* classic */
--3-digits: #49b;
--6-digits: #4499bb;
/* hex with opacity */
--4-digits-opaque: #f9bf;
--8-digits-opaque: #ff99bbff;
--4-digits-with-opacity: #49b8;
--8-digits-with-opacity: #4499bb88;
}
RGB
Lo spazio colore RGB offre l'accesso diretto ai canali rosso, verde e blu. Consente di specificare un importo compreso tra 0 e 255 o una percentuale compresa tra 0 e 100. Questa sintassi era presente prima che alcune normalizzazione della sintassi fossero incluse nelle specifiche, per cui le sintassi senza virgole e virgole sono presenti. In futuro, le virgole non saranno più necessarie.
.valid-css-rgb-colors {
--classic: rgb(64, 149, 191);
--modern: rgb(64 149 191);
--percents: rgb(25% 58% 75%);
--classic-with-opacity-percent: rgba(64, 149, 191, 50%);
--classic-with-opacity-decimal: rgba(64, 149, 191, .5);
--modern-with-opacity-percent: rgb(64 149 191 / 50%);
--modern-with-opacity-decimal: rgb(64 149 191 / .5);
--percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
--percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);
--empty-channels: rgb(none none none);
}
HSL
Uno dei primi spazi colore a orientarsi verso il linguaggio e la comunicazione umani, HSL (saturazione e chiarezza della tonalità) offre tutti i colori nella gamma sRGB, senza richiedere al tuo cervello di sapere come interagiscono il rosso, il verde e il blu. Come RGB, anche la sintassi inizialmente era composta da virgole, ma più avanti le virgole non sono più necessarie.
.valid-css-hsl-colors {
--classic: hsl(200deg, 50%, 50%);
--modern: hsl(200 50% 50%);
--classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
--classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);
--modern-with-opacity-percent: hsl(200 50% 50% / 50%);
--modern-with-opacity-decimal: hsl(200 50% 50% / .5);
/* hueless and no saturation */
--empty-channels-white: hsl(none none 100%);
--empty-channels-black: hsl(none none 0%);
}
HWB
Un altro spazio cromatico sRGB orientato alla descrizione del colore da parte delle persone è HWB (tonalità, bianco, nero). Gli autori possono scegliere la tonalità e mescolare il bianco o il nero per trovare il colore desiderato.
.valid-css-hwb-colors {
--modern: hwb(200deg 25% 25%);
--modern2: hwb(200 25% 25%);
--modern-with-opacity-percent: hwb(200 25% 25% / 50%);
--modern-with-opacity-decimal: hwb(200 25% 25% / .5);
/* hueless and no saturation */
--empty-channels-white: hwb(none 100% none);
--empty-channels-black: hwb(none none 100%);
}
Passaggi successivi
Scopri di più sui nuovi spazi colore, le sintassi e gli strumenti, poi scopri come eseguire la migrazione al colore HD.
Gli spazi colore non sRGB sul web sono ancora agli inizi, ma nel tempo noteremo un aumento dell'utilizzo da parte di designer e sviluppatori. Ad esempio, sapere quale spazio colore utilizzare per creare un sistema di progettazione è un ottimo strumento per essere presenti nella barra degli strumenti dei creator. Ogni spazio colore offre funzionalità uniche e un motivo per cui è stato aggiunto alla specifica CSS. Puoi iniziare a piccoli passi con queste e aggiungerle in base alle esigenze.
Risorse
Leggi ulteriori informazioni sugli articoli sul livello di colore 5.
Puoi trovare ulteriori letture sul web:
- CSS Color Module Level 4 di W3C
CSS Color Module Level 5 di W3C
Okhsv e Okhsl: due nuovi spazi colore per la selezione del colore
E strumenti: