Guida ai colori CSS ad alta definizione

CSS Color 4 mette a disposizione sul web strumenti e funzionalità per i colori ad ampia gamma di colori: altro colori, funzioni di manipolazione e gradienti migliori.

Adam Argyle

Per più di 25 anni, sRGB (standard rosso verde blu) è stato l'unico colore gamut per sfumature e colori CSS, con spazio colore offerte al suo interno, come rgb(), hsl() ed esadecimale. È il colore più comune funzionalità di gamut tra i display; un denominatore comune. Siamo cresciuti abituati a specificare i colori al suo interno.

. https://almanac.httparchive.org/en/2022/css#colors

Man mano che i display diventano più in grado di mostrare un'ampia gamma di colori, il CSS ha bisogno di un per specificare i colori in questi intervalli più ampi. I formati di colore correnti non hanno linguaggio per ampi intervalli di colori.

Se il CSS non viene mai aggiornato, rimane bloccato negli intervalli di colori degli anni '90, forzato mai corrispondere all'ampia gamma offerta da immagini e video. Intrappolato, mostra solo Il 30% dei colori che l'occhio umano può vedere. Ringrazia il Color Level 4 di CSS per averci aiutato a fuggire. scritto principalmente da Lea Verou e Chris Liley.

Chrome supporta le gamut dei Colori CSS 4 e spazi colore. Ora il CSS supporta il formato HD (alta definizione) display, specificando i colori delle gamut HD e offrendo al contempo spazi colore con specializzazioni.

Viene mostrata una serie di immagini che passano dal colore largo a quello stretto gamma, che illustra la vividezza dei colori e i suoi effetti.
Fai una prova

Questa guida si compone di tre parti. Continua a leggere per ricordare i colori. Poi, leggi dove sarà il colore e come gestire il colore in futuro eseguendo la migrazione al colore HD.

Panoramica

Nei browser supportati è disponibile il 50% di colori in più tra cui scegliere. Se pensavi 16 milioni di colori sembravano avere tanti colori, aspetta di vedere quanti colori possono essere mostrati questi nuovi spazi. Inoltre, pensa a tutti i gradienti che banda perché non c'era abbastanza di bit di bit, viene risolto anche questo problema.

Oltre a un numero maggiore di colori, probabilmente quelli più nitidi di cui è in grado il display, i nuovi spazi colore offrono strumenti e metodi unici per la gestione sistemi di colore. Ad esempio, prima d'ora avevamo HSL e la sua "leggerità" canale, che era i migliori degli sviluppatori web. Ora in CSS, abbiamo la "levità percettiva" di LCH.

. Visualizza l'anteprima su Codepen

Inoltre, i gradienti e la combinazione presentano alcuni miglioramenti: supporto dello spazio colore, opzioni di interpolazione e meno bande.

L'immagine seguente mostra alcuni degli upgrade combinati.

. I due mix di colori principali sono in sRGB e sRGB. Le due combinazioni di colori inferiori sono nel display p3. Display p3 ha più i colori vivaci e le combinazioni risaltano in bianco e nero al centro, dove sRGB sembra un po' desaturato e i mix nella parte centrale non sono risultati in bianco e nero.
https://codepen.io/web-dot-dev/pen/poZgXQb

Il problema dei colori e del web è che CSS non è pronto per l'alta definizione. mentre gli oggetti che la maggior parte delle persone ha in tasca, in braccio o fissati a parete. sono un'ampia gamma di colori ad alta definizione e pronti per l'uso. La funzionalità dei colori dei display è cresciuta più rapidamente di CSS, ora CSS è qui per recuperare.

Non c'è solo "più colori". Al termine di questi documenti, potrai specificare più colori, migliorare le sfumature e scegliere spazi colore e gamut di colori per ogni attività.

Che cos'è una gamma di colori?

Una gamma rappresenta le dimensioni di un elemento. La frase "milioni di colori" è un commenta la gamma di un display o i colori che deve scegliere. da cui proviene. Nell'immagine seguente vengono confrontate tre gamut e maggiori sono le dimensioni più colori offre.

Una gamma di colori può anche avere un nome. come una palla da basket o un baseball tazza di caffè vente rispetto a una grande; un nome per la taglia può aiutare le persone comunicare. Imparare questi nomi di gamma di colori aiuta a comunicare e rapidamente comprendere una gamma di colori.

Questo articolo esamina le gamut di colori precedenti. Puoi scoprire di più sette nuove gamut in Accedi a più colori e nuovi spazi.

Gamma visiva umana

Le gamut di colori vengono spesso confrontate con la gamut visiva umana; nella totalità colore che crediamo sia visibile all'occhio umano. La HVS è spesso rappresentata con un diagramma della cromaticità, come questo:

. Fonte: Wikipedia

La forma più esterna è quella che possiamo vedere come esseri umani, mentre il triangolo interno è Intervallo di funzioni rgb(), noto anche come spazio colore sRGB.

Come hai visto i triangoli in alto, confrontando le dimensioni della gamma di gamma, troverai anche i triangoli di seguito. Questo è il modo in cui il settore comunica le gamut di colori e a confrontarle.

Che cos'è uno spazio colore?

Gli spazi colore sono disposizioni di una gamma che stabilisce una forma e un metodo che accede ai colori. Molte sono forme 3D semplici, come cubi o cilindri. Questo colore della disposizione determina quali colori sono l'uno accanto all'altro e il modo in cui accedono e l'interpolazione dei colori è sufficiente.

RGB è come uno spazio colore rettangolare, in cui si accede ai colori specificando le coordinate su 3 assi. HSL è uno spazio colore cilindrico, dove si accede ai colori con un angolo di tonalità e le coordinate su due assi

. https://en.wikipedia.org/wiki/HSL_and_HSV

La specifica del livello 4 introduce 12 nuovi spazi colore per cercare i colori. Si aggiungono ai 4 colori spazi precedentemente disponibili:

• Esadecimale
• RGB
• HSL
• HWB

Riepilogo della gamma di colori e dello spazio colore

Uno spazio colore è una mappatura di colori in cui la gamma di colori è una gamma di colori. Consideriamo una gamma di colori come un totale di particelle e uno spazio colore come una bottiglia è progettato per contenere quella serie di particelle.

Ecco un'immagine interattiva di Alexey Ardov che dimostra spazi colore. In questa demo, inquadra, trascina e aumenta lo zoom. Modificare lo spazio colore per vedere altri spazi.

• Utilizza le gamut di colori per parlare di una gamma di colori, ad esempio gamma bassa o stretta gamma alta o gamma ampia.
• Usa gli spazi colore per parlare delle disposizioni dei colori; la sintassi utilizzata per specificare un colori, manipolare il colore e interpolare nel colore.

di Gemini Advanced.

Sopra è mostrata la gamma di particelle sRGB che si inserisce nello spazio colore del cubo RGB Origine immagine

Una recensione degli spazi colore classici {#classic-color-spaces}

Il Colore CSS 4 delinea una serie di nuove e strumenti per CSS e colore. Innanzitutto, un riepilogo di dove si trovava il colore prima queste nuove funzionalità.

Dagli anni 2000, è stato possibile utilizzare quanto segue per qualsiasi 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 utilizzato, CSS potrebbe utilizzare hsl() colori. Poi, nel 2017, esadecimale con alfa. Infine, solo Di recente, hwb() ha iniziato a ricevere nei browser.

Tutti questi spazi colore classici fanno riferimento a colori all'interno della stessa gamma, sRGB.

HEX

Supporto dei browser

• 1
• 12
• 1
• 1

Origine

Lo spazio colore esadecimale specifica R, G, B e A con numeri esadecimali. Le seguenti esempi di codice mostrano tutti i modi in cui questa sintassi è in grado di specificare opacità.

.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

Supporto dei browser

• 1
• 12
• 1
• 1

Origine

Lo spazio colore RGB offre accesso diretto ai canali rosso, verde e blu. Consente di specificare un importo compreso tra 0 e 255 o come percentuale da 0 a 100. Questa sintassi esisteva prima che una certa normalizzazione della sintassi fosse specifiche, quindi vedrai sintassi a virgola e senza virgola. In movimento in avanti, le virgole non sono più obbligatorie.

.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

Supporto dei browser

• 1
• 12
• 1
• 3,1

Origine

Uno dei primi spazi colore a orientarsi verso il linguaggio umano. comunicazione, HSL (saturazione tonalità e leggerezza) offre tutti i colori della gamma sRGB senza richiedere al cervello di sapere come il rosso, il verde e il blu interagire. Come l'RGB, anche in origine aveva delle virgole nella sintassi, ma in avanti, le virgole non sono più obbligatorie.

.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

Supporto dei browser

• Guida introduttiva
• Guida introduttiva
• 96
• 15

Origine

Un altro spazio colore gamut sRGB orientato a come le persone descrivono il colore è HWB (tonalità, bianco, nero). Gli autori possono scegliere una 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 strumenti, sulle nuove sintassi e sugli spazi colore. poi scopri come eseguire la migrazione al colore HD.

Gli spazi colore non RGB sul web sono ancora agli inizi, ma vedremo un aumento dell'utilizzo da parte di designer e sviluppatori nel tempo. Sapere quale spazio colore su cui creare un sistema di progettazione, ad esempio, è uno strumento efficace per una barra degli strumenti per i creator. Ogni spazio colore offre caratteristiche uniche e il motivo per cui è stato selezionato aggiunti alla specifica CSS ed è possibile iniziare in piccolo con questi dell'oggetto o eliminare definitivamente una versione archiviata, in base alle necessità.

Risorse

Leggi altri articoli sul livello di colore 5.

• Sintassi dei colori relativi dei CSS
• Mix di colori CSS

Inoltre, puoi trovare altre letture sul web:

• CSS Color Module Level 4 di W3C

• CSS Color Module Level 5 di W3C

• Colori LCH in CSS: cosa, perché e come?

• È meglio di Lab? Riduzione della gamma: CIE Lab e OKLab

• Verso colori più intensi sul web

• Okhsv e Okhsl: due nuovi spazi colore per la scelta dei colori

• Verso colori più intensi in Chromium (PDF)

• LCH è il miglior spazio colore.

• Progettazione di sistemi di colore accessibili

• Color Space (Spazi colore) di Hannah Weller

• Colore Wide Gamut in CSS con Display-P3

• Spazio colore CIE 1931

• Formati di colore in CSS

• Spazi colore di Bartosz Ciechanowski

E strumenti:

• afc163.github.io/color3d/
• Visualizzazione gamma
• generatore di gradienti vivi