CSS Color 4 brengt kleurhulpmiddelen en -mogelijkheden met een breed kleurengamma naar het web: meer kleuren, manipulatiefuncties en betere verlopen.
Al meer dan 25 jaar is sRGB (standaard rood groen blauw) het enige kleurengamma voor CSS-gradiënten en kleuren, met daarin kleurruimte-aanbiedingen zoals rgb() , hsl() en hex. Het is de meest voorkomende mogelijkheid voor kleurengamma onder beeldschermen; een gemeenschappelijke noemer. We zijn er erg aan gewend geraakt om kleuren binnen dit kleurengamma op te geven .
Naarmate beeldschermen beter in staat zijn een breed scala aan kleuren weer te geven, heeft CSS een manier nodig om kleuren binnen dit bredere bereik te specificeren. De huidige kleurformaten hebben geen taal voor brede kleurbereiken.
Als CSS nooit zou worden bijgewerkt, zou het voor altijd in de kleurenreeksen van de jaren 90 blijven hangen, waardoor het nooit zou overeenkomen met het brede gamma-aanbod dat te vinden is in afbeeldingen en video. Gevangen , toont slechts 30% van de kleuren die het menselijk oog kan zien . Bedank CSS Color Level 4 voor je hulp om uit deze val te ontsnappen; voornamelijk geschreven door Lea Verou en Chris Liley .
Chrome 111 biedt ondersteuning voor CSS Color 4- gamma's en kleurruimten, en sluit zich aan bij Safari, die sinds 2016 ondersteuning biedt voor display-p3 . CSS kan nu HD-schermen (high definition) ondersteunen, waarbij kleuren uit HD-gamma's worden gespecificeerd en tegelijkertijd kleurruimten met specialisaties worden aangeboden. In deze gids wordt uitgelegd hoe u kunt profiteren van deze nieuwe wereld van kleur.
Probeer het zelf
In ondersteunende browsers zijn er 50% meer kleuren om uit te kiezen! Je dacht dat 16 miljoen kleuren veel klonken, wacht maar tot je ziet hoeveel kleuren sommige van deze nieuwe ruimtes kunnen weergeven. Denk ook eens aan al die gradiënten die strepen kregen omdat er niet genoeg bitdiepte was, dat is ook opgelost.
Naast meer kleuren, misschien wel de meest levendige kleuren die het beeldscherm kan weergeven , bieden nieuwe kleurruimten unieke hulpmiddelen en methoden voor het beheren en creëren van kleursystemen. Vroeger hadden we bijvoorbeeld HSL en zijn kanaal 'lichtheid', wat de beste webontwikkelaars waren. Nu hebben we in CSS de "perceptuele lichtheid " van LCH.
Bovendien krijgen gradiënten en menging enkele upgrades: ondersteuning voor kleurruimte, opties voor tintinterpolatie en minder strepen. De volgende afbeelding toont enkele mengupgrades. De bovenste twee kleurenmixen zijn in sRGB. De onderste twee kleurenmixen staan op display p3. Display p3 heeft levendigere kleuren en de mixen resulteren in volledig zwart en wit in het midden. Waar sRGB er een beetje onverzadigd uitziet en de mixen in het midden geen volledige zwart-witresultaten zijn.
https://codepen.io/web-dot-dev/pen/poZgXQb
In deze handleiding wordt besproken waar kleur is geweest, waar deze naartoe gaat en hoe CSS webontwikkelaars in staat zal stellen en ondersteunen om kleur te beheren.
Overzicht
Het probleem met kleur en internet is dat CSS niet geschikt is voor hoge definitie, terwijl de beeldschermen die de meeste mensen in hun broekzak, op schoot of aan de muur hebben gemonteerd een breed kleurengamma hebben en klaar zijn voor hoge definitie. De kleurmogelijkheden van beeldschermen groeiden sneller dan die van CSS, en nu is CSS hier om de achterstand in te halen.
Er is ook veel meer dan alleen ‘meer kleuren’. Aan het einde van dit artikel kunt u voor elke taak meer kleuren opgeven, verlopen verbeteren en de beste kleurruimten en kleurengamma's kiezen.
Wat is een kleurengamma?
Een gamma vertegenwoordigt de grootte van iets. De uitdrukking "miljoenen kleuren" is een opmerking over het kleurengamma van een beeldscherm, of het kleurenbereik waaruit het kan kiezen. In de volgende afbeelding worden drie kleurengamma's vergeleken, en hoe groter het formaat, hoe meer kleuren het biedt.
Een kleurengamma kan ook een naam hebben. Zoals een basketbal versus een honkbal of een vente-koffiekopje versus een grande; een naam voor de maat kan mensen helpen communiceren. Door deze kleurengammanamen te leren, kunt u communiceren en snel een reeks kleuren begrijpen.
In dit artikel maak je kennis met zeven nieuwe gamma's, allemaal met een groter bereik dan sRGB, en worden de verschillende functies beschreven om je te helpen kiezen welke je wilt gebruiken:
Menselijk visueel spectrum
Kleurengamma's worden vaak vergeleken met het menselijke visuele gamma; het geheel van kleur waarvan we denken dat het menselijk oog het kan zien. HVS wordt vaak afgebeeld met een kleurkwaliteitsdiagram , zoals dit:
De buitenste vorm is wat we als mens kunnen zien, en de binnenste driehoek is het rgb() -functiebereik, oftewel de sRGB-kleurruimte.
Zoals u hierboven driehoeken zag bij het vergelijken van gammagroottes, zo zult u hieronder driehoeken vinden. Dit is de manier waarop de industrie over kleurengamma's communiceert en deze vergelijkt.
Wat is een kleurruimte?
Kleurruimten zijn arrangementen van een gamma, waarbij een vorm wordt vastgelegd en een methode om toegang te krijgen tot kleuren. Velen zijn eenvoudige 3D-vormen zoals kubussen of cilinders. Deze kleurindeling bepaalt welke kleuren naast elkaar liggen en hoe het benaderen en interpoleren van kleuren zal werken.
RGB is als een rechthoekige kleurruimte, waarbij kleuren toegankelijk zijn door coördinaten op 3 assen op te geven. HSL is een cilindrische kleurruimte , waar kleuren toegankelijk zijn met een tinthoek en coördinaten op 2 assen
De niveau 4 -specificatie introduceert 12 nieuwe kleurruimten voor het opzoeken van kleuren uit de 7 nieuwe kleurengamma's die eerder zijn gedeeld:
- sRGB lineair
- LCH
- okLCH
- LABORATORIUM
- okLAB
- Weergave p3
- Rec2020
- a98RGB
- ProPhoto RGB
- XYZ
- XYZ d50
- XYZ d65
Deze zijn een aanvulling op de 4 kleurruimten die eerder beschikbaar waren:
Samenvatting van het kleurengamma en de kleurruimte
Een kleurruimte is een afbeelding van kleuren waarbij een kleurengamma een reeks kleuren is. Beschouw een kleurengamma als een totaal aan deeltjes en een kleurruimte als een fles die gemaakt is om dat bereik aan deeltjes vast te houden.
Hier is een interactieve visual van Alexey Ardov die kleurruimten demonstreert. Wijs, sleep en zoom rond in deze demo. Verander de kleurruimte om een visualisatie van andere ruimtes te zien.
- Gebruik kleurengamma's om over een reeks kleuren te praten, zoals een laag bereik of een smal kleurengamma versus een hoog bereik of een breed kleurengamma.
- Gebruik kleurruimten om te praten over kleurarrangementen, syntaxis die wordt gebruikt om een kleur te specificeren, kleur te manipuleren en door kleur te interpoleren.
Hoe u toegang krijgt tot meer kleuren, nieuwe spaties en foutopsporingsresultaten
CSS Color 4 schetst een aantal nieuwe functies en hulpmiddelen voor CSS en kleur. Eerst een samenvatting van waar kleur was vóór deze nieuwe functies. Vervolgens een overzicht van de nieuwe kleurruimten, syntaxis en tools.
De volgende Codepen toont alle nieuwe en oude kleursyntaxis samen:
Een overzicht van de klassieke kleurruimten
Sinds de jaren 2000 kun je het volgende gebruiken voor alle CSS-eigenschappen die een kleur als waarde accepteren: hexadecimaal (hexadecimale getallen), rgb() , rgba() , op naam zoals hotpink , of met trefwoorden zoals currentColor . Rond 2010 kon CSS, afhankelijk van uw browser, hsl() -kleuren gebruiken. Toen verscheen in 2017 hex met alpha . Als laatste, pas onlangs, begon hwb() ondersteuning te krijgen in browsers.
Al deze klassieke kleurruimten verwijzen naar kleur binnen hetzelfde gamma, sRGB.
HEX
De hexadecimale kleurruimte specificeert R, G, B en A met hexadecimale getallen. De volgende codevoorbeelden laten alle manieren zien waarop deze syntaxis rood, groen en blauw plus dekking kan specificeren.
.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
De RGB-kleurruimte biedt directe toegang tot de rode, groene en blauwe kanalen. Hiermee kun je een bedrag opgeven tussen 0 en 255, of als een percentage van 0 tot 100. Deze syntaxis bestond al voordat er enige syntaxisnormalisatie in de specificaties zat, dus je zult komma- en niet-kommasyntaxis in het wild tegenkomen. In de toekomst zijn komma's niet langer vereist.
.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
HSL (hue saturation and lightness), een van de eerste kleurruimten die zich richt op menselijke taal en communicatie, biedt alle kleuren in het sRGB-gamma, zonder dat je hersenen hoeven te weten hoe rood, groen en blauw met elkaar omgaan. Net als RGB had het oorspronkelijk ook komma's in de syntaxis, maar in de toekomst zijn komma's niet langer vereist.
.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
Een andere sRGB-kleurruimte die is gericht op hoe mensen kleur beschrijven, is HWB (tint, witheid, zwartheid). Auteurs kunnen een tint kiezen en wit of zwart mengen om de gewenste kleur te vinden.
.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%);
}
Maak kennis met de nieuwe webkleurruimten
De volgende kleurruimten bieden toegang tot grotere kleurengamma's dan sRGB. De kleurruimte van display-p3 biedt bijna twee keer zoveel kleuren als RGB, terwijl Rec2020 bijna twee keer zoveel kleuren biedt als display-p3. Dat zijn veel kleuren!
De color() functie
De nieuwe functie color() kan worden gebruikt voor elke kleurruimte die kleuren specificeert met R-, G- en B-kanalen. color() neemt eerst een kleurruimteparameter, vervolgens een reeks kanaalwaarden voor RGB en optioneel wat alfa.
Je zult merken dat veel van de nieuwe kleurruimten deze functie gebruiken, omdat het hebben van gespecialiseerde functies zoals rgb , srgb , hsl , hwb , enz. uitgroeide tot een lange lijst, waardoor het gemakkelijker werd om de kleurruimte een parameter te laten zijn.
Pluspunten
- Een genormaliseerde ruimte voor toegang tot kleurruimten die RGB-kanalen gebruiken.
- Kan worden opgeschaald naar elke op RGB gebaseerde kleurruimte met een breed gamma.
Nadelen
- Werkt niet met HSL, HWB, LCH, okLCH of okLAB
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
sRGB via kleur()
Deze kleurruimte biedt dezelfde functies als rgb() . Het biedt bovendien decimalen tussen 0 en 1, die precies zoals 0% tot 100% worden gebruikt.
Pluspunten
- Bijna alle beeldschermen ondersteunen het bereik van deze kleurruimte.
- Ondersteuning van ontwerptools.
Nadelen
- Niet perceptueel lineair (zoals
lch()is) - Geen breed kleurengamma.
- Hellingen lopen vaak door een dode zone .
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
Lineaire sRGB via kleur()
Dit lineaire alternatief voor RGB biedt een voorspelbare kanaalintensiteit.
Pluspunten
- Directe toegang tot RGB-kanalen, handig voor zaken als game-engines of lichtshows.
Nadelen
- Niet perceptueel lineair.
- Zwart en wit zijn aan de randen verpakt.
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
Verlopen worden later in detail besproken, maar al snel wordt het betekenisvol om een srgb en linear-srgb zwart-wit verloop te zien om hun verschillen te illustreren:
LCH
De eerste ruimte van dit bericht waarin syntaxis wordt geïntroduceerd voor toegang tot kleuren buiten het RGB-gamma! Het is ook de eerste die het zeer eenvoudig maakt om kleuren buiten het kleurengamma voor een beeldscherm te creëren. Dit komt omdat alle CIE-ruimtekleuren (lch, oklch, lab, oklab) het volledige menselijke zichtbare kleurenspectrum kunnen vertegenwoordigen .
Deze kleurruimte is gemodelleerd naar het menselijk zicht en biedt syntaxis om al deze kleuren en meer te specificeren. De LCH-kanalen zijn lichtheid, chroma en tint. Tint is een hoek, zoals bij HSL en HWB. Lichtheid is een waarde tussen 0 en 100, maar niet zoals de lichtheid van de HSL: het is een bijzondere, “perceptueel lineaire”, mensgerichte lichtheid. Chroma is vergelijkbaar met verzadiging; kan variëren van 0 tot 230, maar is technisch gezien ook grenzeloos.
Pluspunten
- Voorspelbare kleurmanipulatie dankzij meestal perceptueel lineaire weergave (zie oklch ).
- Maakt gebruik van bekende kanalen.
- Heeft vaak levendige kleurverlopen.
Nadelen
- Gemakkelijk om buiten het bereik te treden.
- In zeldzame gevallen kan het nodig zijn dat het verloop in het midden wordt aangepast om kleurverandering te voorkomen.
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
LABORATORIUM
Nog een kleurruimte gemaakt om toegang te krijgen tot het CIE-gamma, opnieuw met een perceptueel lineaire lichtheidsdimensie (L). De A en B in LAB vertegenwoordigen de unieke assen van het menselijk kleurenzicht: rood-groen en blauw-geel. Wanneer A een positieve waarde krijgt, voegt het rood toe, en groen als het lager is dan 0. Wanneer B een positief getal krijgt, voegt het geel toe, terwijl negatieve waarden richting blauw wijzen.
Pluspunten
- Perceptueel consistente gradiënten.
- Hoge dynamische afstand.
Nadelen
- Potentieel voor tintverschuiving.
- Moeilijk om de auteur te overhandigen of een kleur te raden bij het lezen van waarden.
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
OKLCH
Deze kleurruimte is corrigerend voor LCH. En net als LCH blijft (L) perceptueel lineaire lichtheid vertegenwoordigen, C voor chroma en de H voor tint.
Deze ruimte voelt vertrouwd als je met de HSL of LCH hebt gewerkt. Kies een hoek op het kleurenwiel voor H, kies een hoeveelheid licht of donker door L aan te passen, maar dan hebben we chroma in plaats van verzadiging. Ze zijn redelijk identiek, behalve dat aanpassingen aan lichtheid en chroma meestal in paren plaatsvinden, anders kan het gemakkelijk zijn om te vragen om kleuren met een hoge chroma die buiten het doelgamma vallen.
Pluspunten
- Geen verrassingen bij het werken met blauwe en paarse tinten.
- Perceptueel lineaire lichtheid.
- Maakt gebruik van bekende kanalen.
- Hoge dynamische afstand.
- Heeft een moderne kleurenkiezer - van Evil Martians.
Nadelen
- Gemakkelijk om buiten het bereik te treden.
- Nieuw en relatief onontgonnen.
- Weinig kleurkiezers.
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
OKLAB
Deze ruimte is corrigerend voor LAB. Er wordt beweerd dat het een ruimte is die ook is geoptimaliseerd voor beeldverwerkingskwaliteit, wat voor ons in CSS de kwaliteit van gradiënten en kleurfunctiemanipulatie betekent.
Pluspunten
- Standaardruimte voor animaties en interpolaties.
- Perceptueel lineaire lichtheid.
- Geen tintverschuiving zoals LAB.
- Perceptueel consistente gradiënten.
Nadelen
- Nieuw en relatief onontgonnen.
- Weinig kleurkiezers.
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
Weergave P3
Het P3-gamma en de kleurruimte van het display zijn populair geworden sinds Apple ze sinds 2015 op hun iMac ondersteunde. Apple ondersteunt sinds 2016 ook display-p3 op webpagina's via CSS , vijf jaar eerder dan welke andere browser dan ook. Als het afkomstig is van sRGB, is dit een geweldige kleurruimte om mee te werken terwijl je stijlen naar een hoger dynamisch bereik verplaatst.
Pluspunten
- Geweldige ondersteuning, beschouwd als de basislijn voor HDR-schermen.
- 50% meer kleuren dan sRGB.
- DevTools biedt een geweldige kleurenkiezer.
Nadelen
- Zal uiteindelijk worden overtroffen door Rec2020- en CIE-ruimtes.
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
Rec2020 maakt deel uit van de beweging naar UHDTV (ultra-high-definition televisie) en biedt een breed scala aan kleuren voor gebruik in 4K- en 8K-media. Rec2020 is een ander RGB-gebaseerd gamma, groter dan display-p3, maar lang niet zo gebruikelijk bij consumenten als Display P3.
Pluspunten
- UltraHD-kleuren.
Nadelen
- (Nog) niet zo gebruikelijk bij consumenten.
- Niet vaak aangetroffen in handhelds of tablets.
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
A98RGB
A98 RGB is een afkorting van Adobe 1998 RGB en is door Adobe gemaakt om de meeste kleuren weer te geven die haalbaar zijn met CMYK-printers. Het biedt meer kleuren dan sRGB, met name in de cyaan- en groene tinten.
Pluspunten
- Groter dan de sRGB- en Display P3-kleurruimten.
Nadelen
- Geen gemeenschappelijke ruimte waarin digitale ontwerpers werken.
- Niet veel mensen porteren paletten van CMYK.
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
ProPhoto RGB
Deze brede kleurruimte, gemaakt door Kodak, biedt op unieke wijze een ultrabreed scala aan primaire kleuren en minimale tintverschuivingen bij het veranderen van de lichtheid. Het claimt ook 100% van de oppervlaktekleuren in de echte wereld te dekken, zoals gedocumenteerd door Michael Pointer in 1980.
Pluspunten
- Minimale tintverschuivingen bij het veranderen van de lichtheid.
- Levendige primaire kleuren.
Nadelen
- Ongeveer 13% van de aangeboden kleuren zijn denkbeeldig , wat betekent dat ze niet binnen het menselijke zichtbare spectrum vallen.
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ, XYZ-d50, XYZ-d65
De CIE XYZ-kleurruimte omvat alle kleuren die zichtbaar zijn voor een persoon met een gemiddeld gezichtsvermogen. Daarom wordt het gebruikt als standaardreferentie voor andere kleurruimten. Y is luminantie, X en Z zijn mogelijke chroma's binnen de gegeven Y-luminantie.
Het verschil tussen d50 en d65 is het witpunt, waarbij d50 de d50 witpunten gebruikt en d65 het d65 witpunt gebruikt.
Pluspunten
- Lineaire lichttoegang heeft handige gebruiksscenario's.
- Ideaal voor fysieke kleurmenging.
Nadelen
- Niet perceptueel lineair zoals lch, oklch, lab en oklab.
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
Aangepaste kleurruimten
De CSS Color 5-specificatie bevat ook een pad waarmee de browser een aangepaste kleurruimte kan leren. Dit is een ICC-profiel dat de browser vertelt hoe kleuren moeten worden opgelost.
@color-profile --foo {
src: url(path/to/custom.icc);
}
Eenmaal geladen, krijgt u toegang tot kleuren vanuit dit aangepaste profiel met de functie color() en specificeert u de kanaalwaarden ervoor.
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
Kleurinterpolatie
Overgang van de ene kleur naar de andere vind je terug in animatie, verlopen en kleurmenging. Deze overgang wordt doorgaans gespecificeerd als een beginkleur en een eindkleur, waarbij van de browser wordt verwacht dat hij daartussen interpoleert. Interpoleren betekent in dit geval het genereren van een reeks tussenkleuren om een vloeiende overgang te creëren in plaats van een onmiddellijke overgang.
Bij een verloop bestaat de interpolatie uit een reeks kleuren langs een vorm. Bij animatie is het een reeks kleuren in de loop van de tijd.
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
Bij een verloop worden de tussenkleuren in één keer weergegeven:
Wat is er nieuw in kleurinterpolatie
Met de toevoeging van nieuwe gamma's en kleurruimten zijn er nieuwe extra opties voor interpolatie. Het overzetten van een kleur in hsl van blauw naar wit resulteert in iets heel anders dan sRGB.
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
Kunt u de Codepen-demo niet zien?
Wat gebeurt er dan als je overgaat van een kleur in de ene ruimte naar een kleur in een compleet andere ruimte:
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
Kunt u de Codepen-demo niet zien?
Gelukkig voor jou bevat de Color 4 -specificatie instructies voor de browsers over hoe om te gaan met deze cross-color space-interpolaties. In het bovenstaande geval voor .gradient zullen browsers de onderscheidende kleurruimten opmerken en de standaardkleurruimte oklab gebruiken. Je denkt misschien dat de browser lch als kleurruimte zou gebruiken, aangezien dat de eerste kleur is, maar dat is niet zo en daarom laat ik een tweede vergelijkingsverloop .lch zien. Het .lch verloop is een verloop vanuit de lch-kleurruimte.
Minder strepen dankzij 16-bits kleur
Vóór dit kleurwerk werden alle kleuren opgeslagen in één 32-bits geheel getal om alle vier de kanalen weer te geven; rood, groen, blauw en alpha. Dit is 8 bits per kanaal en 2^ 24 mogelijke kleuren (alfa buiten beschouwing gelaten). 2 ^ 24 = 16.777.216, "miljoenen kleuren."
Na dit kleurwerk, vier 16-bits drijvende-kommawaarden , heeft elk kanaal zijn eigen float in plaats van op één hoop te worden gegooid. Dit is in totaal 64 bits aan gegevens, wat resulteert in veel meer dan miljoenen kleuren.
Dit werk is vereist om HD-kleur te ondersteunen. Dit vergroot de hoeveelheid kleurinformatie die kan worden opgeslagen, wat als mooi neveneffect heeft dat er meer kleuren zijn die de browser in een verloop kan gebruiken.
Verloopbanden ontstaan wanneer er niet genoeg kleuren zijn om een vloeiend verloop te creëren en er "stroken" kleur zichtbaar worden. Banding wordt sterk verminderd door de upgrade naar kleuren met een hogere resolutie.
Interpolatie controleren
De kortste afstand tussen twee punten is altijd een rechte lijn. Met kleurinterpolatie nemen browsers standaard de korte route. Beschouw een scenario waarin er twee punten in een HSL-kleurencilinder zitten. Een verloop krijgt zijn kleurstappen door langs de lijn tussen de twee punten te reizen.
linear-gradient(to right, #94e99c, #e06242)
Bovenaanzicht van een HSL-cilinder met een lijn tussen de kleurstops
De bovenstaande gradiëntlijn loopt recht van de groenachtige kleur naar de roodachtige kleur en loopt door het midden van de kleurruimte. Hoewel het bovenstaande geweldig is om te helpen bij het eerste begrip, is dit niet precies wat er gebeurt. Hier is het verloop in de volgende Codepen, en het is duidelijk niet wit in het midden, zoals de nepdemonstratie liet zien.
Het middengedeelte van het verloop heeft echter zijn levendigheid verloren. Dit komt omdat de meest levendige kleuren zich aan de rand van de vorm van de kleurruimte bevinden, en niet in het midden waar de interpolatie dichtbij kwam. Dit wordt gewoonlijk de ' dode zone ' genoemd. Er zijn een paar manieren om dit op te lossen of te omzeilen.
Specificeer meer gradiëntstops om de dode zone te vermijden
Een techniek om tegenwoordig de dode zone te vermijden, is het toevoegen van extra kleurstops in het verloop die de interpolatie opzettelijk begeleiden om binnen de levendige bereiken van een kleurruimte te blijven. Het is letterlijk een omweg, omdat de extra stops ervoor zorgen dat het rond de dode zone werkt.
Er is een verlooptool gemaakt door Erik Kennedy die extra kleurstops voor je berekent, om je te helpen de dode zone te vermijden, zelfs in kleurruimten die de neiging hebben er naartoe te neigen. Door het te gebruiken, waarbij dezelfde kleuren uit het eerste voorbeeld worden doorgegeven, maar de kleurinterpolatie wordt gewijzigd naar HSL, ontstaat dit:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
Bovenaanzicht van een HSL-cilinder met een gebogen lijn met 9 kleurstops
Met geleide stoppunten is de interpolatie niet langer een rechte lijn, maar lijkt deze rond de dode zone te buigen, waardoor de verzadiging behouden blijft, wat resulteert in een veel levendiger verloop.
Hoewel de tool uitstekend werk levert, wat als je vergelijkbare of grotere controle rechtstreeks vanuit CSS zou kunnen hebben?
Het aansturen van de kleurinterpolatie
In Kleur 4 is de mogelijkheid toegevoegd om de tintinterpolatiestrategie te controleren, wat een nieuwe manier is om (:wink:) de dode zone te omzeilen. Denk aan een tinthoek en overweeg een gradiënt van 2 stops die alleen de hoek verandert, waarbij de tint bijvoorbeeld van 140deg naar 240deg verschuift.
Kortere versus langere tintinterpolatie
De gradiënt neemt standaard de shorter route die mogelijk is, tenzij u opgeeft dat deze de longer route moet nemen. Tint-interpolatieopties sturen de hoekrotatie, zoals iemand vertellen dat hij naar links moet draaien in plaats van naar rechts (heh, Zoolander):
In het bovenstaande visuele voorbeeld van tintinterpolatieafstanden worden het korte pad en het lange pad gesimuleerd om het verschil te illustreren. De korte afstand heeft minder tinten ertussen omdat deze over de kleinst mogelijke afstand is afgelegd, terwijl de lange afstand over meer tinten zal hebben afgelegd.
Toenemende versus afnemende tintinterpolatie
Er zijn nog twee tintinterpolatiestrategieën in Kleur 4 , maar deze zijn exclusief voor cilindrische kleurruimten. Door bij de twee kleuren uit de vorige voorbeelden te blijven, laat de visual nu zien hoe verhogen en verlagen werkt.
De bovenstaande Codepen gebruikte ColorJS om het verwachte resultaat aan te tonen. De CSS die u zou schrijven om hetzelfde effect te bereiken zonder een Javascript-bibliotheek zou zijn:
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
Om de tintinterpolatie af te ronden, is hier een leuke speeltuin waar je de tint tussen 2 kleurstops kunt veranderen en de effecten van een tintinterpolatiekeuze kunt zien, evenals hoe kleurruimten de gradiëntresultaten veranderen. De effecten kunnen heel verschillend zijn; beschouw dit als vier nieuwe trucs die zojuist in uw kleurentoolbelt zijn terechtgekomen.
Verlopen in verschillende kleurruimten
Elke kleurruimte zal, gezien zijn unieke vorm en kleurstelling, resulteren in een ander verloop. Kijk eens naar de onderstaande voorbeelden, vooral naar 'blauw naar wit'. Kijk hoe elke kleurruimte daar anders mee omgaat. Merk op hoeveel er in het midden paars worden, dat wordt tijdens interpolatie een "tintverschuiving" genoemd.
Kunt u de Codepen-demo niet zien?
Getoonde afbeelding is slechts 1 van de vele voorbeelden uit de Codepen. Het is de moeite waard om Canary of Safari Tech Preview te proberen om deze met eigen ogen te zien.
Sommige gradiënten in deze ruimtes zullen levendiger zijn dan andere of minder door dode zones reizen. Ruimten zoals lab bundelen kleuren samen op een manier die is geoptimaliseerd voor verzadiging, in tegenstelling tot ruimtes die zijn geoptimaliseerd voor mensen om kleur in te schrijven, zoals hwb() .
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
De bovenstaande demo toont, hoewel subtiel in de resultaten, een consistentere interpolatie met lab. De syntaxis van lab is echter niet eenvoudig te lezen, er zijn negatieve getallen die erg onbekend zijn als ze van rgb of hsl komen. Goed nieuws: we kunnen hwb gebruiken voor een bekende syntaxis, maar vragen om het verloop volledig te interpoleren binnen een andere kleurruimte, zoals oklab.
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
Kunt u de Codepen-demo niet zien?
In dit voorbeeld worden dezelfde kleuren gebruikt in hwb, maar wordt de kleurruimte gespecificeerd voor interpolatie naar hwb of oklab. hwb is een geweldige kleurruimte voor hoge vibratie maar mogelijke dode zones of heldere plekken (zie de cyaan hotspot in het bovenste voorbeeld). oklab is geweldig voor perceptueel lineaire gradiënten die verzadigd blijven. Deze functie is erg leuk omdat je een paar verschillende kleurruimten kunt uitproberen om te zien welk verloop je het leukst vindt.
Hier is een Codepen die experimenteert met verlopen en kleurruimten, en strategieën combineert en matcht om de mogelijkheden te verkennen. Zelfs een overgang van zwart naar wit is in elke kleurruimte anders!
Kunt u de Codepen-demo niet zien?
Gamma-klemming
Er bestaan scenario's waarin een kleur om iets buiten een kleurengamma vraagt. Denk aan de volgende kleur:
rgb(300 255 255)
Het maximum voor een kleurkanaal in de rgb kleurruimte is 255 , maar hier werd voor rood 300 opgegeven. Wat gebeurt er? Gamma-klemming.
Klemmen is wanneer extra informatie eenvoudigweg wordt verwijderd. 300 wordt intern 255 voor de kleurenengine. De kleur is nu in de ruimte geklemd.
Een kleurruimte kiezen
Veel mensen voelen zich, nadat ze over deze kleurruimten en hun effecten hebben geleerd, overweldigd en willen weten welke 'kleurruimte' ze moeten kiezen. Vanuit mijn studie en ervaring zie ik niet één kleurruimte als de enige kleurruimte voor al mijn taken. Elk heeft momenten waarop ze het gewenste resultaat opleveren.
Als er één beste ruimte zou zijn, zouden er niet zoveel nieuwe ruimtes worden geïntroduceerd.
Ik kan echter wel zeggen dat de CIE-ruimtes – lab , oklab , lch en oklch – mijn startplaatsen zijn. Als de uitkomst ervan niet is wat ik zoek, ga ik andere ruimtes testen. Voor het mengen van kleuren en het maken van verlopen ga ik akkoord met de standaardspecificatiekeuze van oklab . Voor kleursystemen en algemene UI-kleuren hou ik van oklch .
Hier zijn een paar artikelen waarin mensen hun bijgewerkte kleurstrategieën hebben gedeeld, gezien deze nieuwe kleurruimten en functies. Andrey Sitnik is bijvoorbeeld all-in gegaan op oklch , misschien overtuigen ze jou om hetzelfde te doen:
- OKLCH in CSS: waarom we zijn overgestapt van RGB en HSL door Andrey Sitnik
- Kleurformaten door Josh W. Comeau
- Oké, OKLCH door Chris Coyier
Migreren naar HD CSS-kleur
Er zijn twee hoofdstrategieën voor het bijwerken van de kleur van uw webproject om weergaven met een breed kleurengamma te ondersteunen:
Sierlijke degradatie
Gebruik de nieuwe kleurruimten en laat de browser en het besturingssysteem bepalen welke kleur moet worden weergegeven op basis van de weergavemogelijkheden.Progressieve verbetering
Gebruik@supportsen@mediaom de mogelijkheden van de browser van de gebruiker te beoordelen en, als aan de voorwaarden wordt voldaan, brede kleurengamma's te bieden.
Als een browser display-p3 kleur niet begrijpt:
color: red;
color: color(display-p3 1 0 0);
Als een browser display-p3 kleur wel begrijpt:
color: red;
color: color(display-p3 1 0 0);
Er zijn voor- en nadelen aan elk. Hier is een korte lijst met voor- en nadelen:
Sierlijke degradatie
- Pluspunten
- De eenvoudigste route.
- De browser zal het gamma in kaart brengen of vasthouden aan sRGB als er geen breed gamma wordt weergegeven. Daarom ligt de verantwoordelijkheid bij de browser.
- Nadelen
- De browser kan het gamma beperken of toewijzen aan een kleur waar u niet van houdt.
- De browser begrijpt het kleurverzoek mogelijk niet en faalt volledig. Dit kan echter worden verzacht door de kleur twee keer op te geven, waardoor de cascade kan terugvallen op de vorige kleur die deze wel begrijpt.
Progressieve verbetering
- Pluspunten
- Meer controle met beheerde kleurgetrouwheid.
- Een additieve strategie die geen invloed heeft op de huidige kleuren.
- Nadelen
- U moet twee afzonderlijke kleursyntaxis beheren.
- U moet twee afzonderlijke kleurengamma's beheren.
Controleren op ondersteuning voor gamma en kleurruimte
Met de browser kunt u controleren op ondersteuning voor brede gammamogelijkheden en ondersteuning voor kleursyntaxis van CSS en JavaScript. Het exacte kleurengamma dat de gebruiker heeft, wordt niet beschikbaar gesteld; er wordt een algemeen antwoord gegeven, zodat de privacy van de gebruiker behouden blijft. De exacte kleurruimte-ondersteuning wordt echter beschikbaar gesteld, omdat deze niet specifiek is voor de mogelijkheden van de hardware van de gebruiker, zoals het gamma dat wel is.
Ondersteuningsvragen voor kleurengamma
De volgende codevoorbeelden controleren het kleurenbereik van de bezoekende gebruiker op zijn display.
Controleren vanaf CSS
Het minst specifieke ondersteuningsonderzoek is de media dynamic-range :
@media (dynamic-range: high) {
/* safe to use HD colors */
}
Geschat, of meer, ondersteuning kan worden gevraagd bij de media-query color-gamut :
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Er zijn nog twee vragen over media voor het controleren van ondersteuning:
Controleren vanaf JavaScript
Voor JavaScript kan de functie window.matchMedia() worden opgeroepen en een media -query voor evaluatie doorstaan.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
Het bovenstaande patroon kan worden gekopieerd voor de rest van de media -vragen.
Kleurruimte -ondersteuningsvragen
De volgende codevoorbeelden controleren de browser van de bezoekende gebruiker en de selectie van kleurruimtes om mee te werken.
Controleren vanaf CSS
Individuele kleurruimteondersteuning kan worden gecontroleerd met behulp van een @supports -query:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
Controleren vanaf JavaScript
Voor JavaScript kan de functie CSS.supports() worden opgeroepen en een eigenschap en waardepaar doorgegeven om te zien of de browser begrijpt.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
De hardware- en parsing -cheques samenstellen
In afwachting van elke browser om deze nieuwe kleurenfuncties te implementeren, is het een goed idee om te controleren op zowel hardwaremogelijkheden als kleurparseermogelijkheden. Dit is vaak wat ik gebruik bij het geleidelijk verbeteren van kleuren tot hoge definitie:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Debugging -kleur met Chrome Devtools
Chrome Devtools is bijgewerkt en uitgerust met nieuwe tools om ontwikkelaars te helpen bij het maken, converteren en debuggen van HD -kleur.
Bijgewerkte kleurenkiezer
De kleurenkiezer ondersteunt nu alle nieuwe kleurruimtes. Auteurs toestaan om te communiceren met kanaalwaarden, net zoals ze zouden hebben gedaan.
Gamma grenzen
Er is ook een gamma-grenslijn toegevoegd, waarbij een lijn wordt getrokken tussen SRGB- en display-P3-gamuts. Het is duidelijk dat het gamma de geselecteerde kleur binnen is.
Dit helpt auteurs visueel onderscheid te maken tussen HD-kleuren en niet-HD-kleuren. Het is vooral handig bij het werken met de functie color() en de nieuwe kleurruimtes omdat ze in staat zijn om zowel niet-HD- als HD-kleuren te produceren. Als je wilt controleren in welk gamma je kleur bevindt, vult de kleurenkiezer op en zie je!
Kleuren omzetten
Devtools is al vele jaren kleuren tussen ondersteunde formaten zoals HSL, HWB, RGB en Hex kunnen omzetten. shift + click op een vierkante kleurstaal in het deelvenster Styles om deze conversie uit te voeren. De nieuwe kleurenhulpmiddelen fietsen niet alleen door conversies, ze leveren een pop -up op waar auteurs de conversie kunnen zien en kiezen die ze willen.
Bij het converteren is het belangrijk om te weten of de conversie is geknipt om in de ruimte te passen. DevTools heeft nu een waarschuwingspictogram voor de geconverteerde kleur die u voor dit knippen waarschuwt.
Ontdek meer CSS -foutopsporingsfunctie in Devtools in hun recente aankondiging .
Conclusie
Niet-SRGB-kleurruimtes op internet zijn in hun vroege dagen, maar ik geloof dat we in de loop van de tijd een toename van het gebruik van ontwerpers en ontwikkelaars zullen zien. Weten op welke kleurruimte een ontwerpsysteem is om bijvoorbeeld te bouwen, is een sterk hulpmiddel om in een makerswerkers te zijn. Elke kleurruimte biedt unieke functies en een reden waarom deze is toegevoegd aan de CSS -specificatie, en het is OK om hiermee klein te beginnen en toe te voegen als dat nodig is.
Geniet van spelen met dit nieuwe kleurenspeelgoed! Meer levendigheid, consistente manipulaties en interpolaties en leveren over het algemeen een meer kleurrijke ervaring op voor uw gebruikers.
Aanvullend lezen
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-andhow/
- https://www.w3.org/graphics/color/workshop/slides/lilley/lilley.html
- https://darker.ink/writings/towards-richer-colors-on-the-web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/graphics/color/workshop/slides/eria.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualisatie
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/tr/css-color-4/
- https://www.w3.org/tr/css-color-5/
- https://en.wikipedia.org/wiki/cie_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/