Ik was net aan het schrijven in mijn "Wat is er nieuw sinds CSS3?" artikel over recente en mogelijke toekomstige wijzigingen in CSS-kleuren. Het is bizar veel. Er zijn net zoveel of meer nieuwe en opkomende manieren om kleuren te definiëren dan wat we nu hebben. Ik dacht dat we snel een kijkje zouden gaan nemen.
Eerst een grote heads-up. Dit spul is zo ingewikkeld. Ik begrijp het amper. Maar hier zijn enkele aspecten:
- Voorafgaand aan al deze aanstaande veranderingen, hebben we Slechts had RGB als kleurmodel, en daar had alles mee te maken.
- We hadden verschillende "kleurruimten" die het anders behandelden (bijv
rgb()functie bracht dat RGB-kleurmodel in kaart als een kubus met lineaire coördinaten, dehsl()functie bracht dat RGB-kleurmodel in kaart als een cilinder), maar het was allemaal sRGB-gamma. - Met de komende veranderingen krijgen we nieuwe kleurmodellen en (!) krijgen we nieuwe functies die dat kleurmodel anders in kaart brengen. Dus ik denk dat het een soort dubbel-driedubbele klap is.
Ik kan je niet persoonlijk informeren over alle details - ik schrijf dit omdat ik wed dat er veel van jullie zijn zoals ik, Ik vraag me af waarom je hier überhaupt om geeft, en dit is mijn poging om te begrijpen waarom I moet er allemaal rekening mee houden.
Display-P3 is er een die een heleboel levendigere kleuren opent die eerder konden worden uitgedrukt.
body { background: color(display-p3 1 0.08 0); /* super red! */
}Het blijkt dat moderne monitoren veel meer kleuren kunnen weergeven, vooral extra levendige kleuren, maar we kunnen die kleuren gewoon niet definiëren met klassieke CSS-kleursyntaxis, zoals HEX, RGB en HSL. Super raar toch?! Maar als je Display-P3, krijgt u een breder scala aan toegang tot deze levendige kleuren.
De dev-winkel Panic greep hier al vroeg in en begon deze kleuren als een "geheim wapen" te gebruiken:
🌈 Samen met WebGL vormen p3-kleuren nu een groot deel van de geheime wapenstapel van de Panic-website. Shh, vertel het aan niemand, maar je zou deze pagina op een iMac Pro-scherm moeten zien! https://t.co/glrhPNuCdR
— Paniek (@paniek) 24 mei 2019
Jen Simmons behandelt ook het gebruik ervan, inclusief een fallback voor niet-ondersteunde browsers:
Geef P3-kleur weer. Ontwerpen in de browser. Geweldig.
Ik zal u laten zien hoe u kunt overschakelen naar P3, een kleur kunt vinden en vervolgens een reservekleur kunt vinden voor oudere browsers. Dit alles terwijl u in Safari Web Inspector werkt. (Zet geluid aan om mij te horen uitleggen!) pic.twitter.com/AaKhrn2s3e
— Jen Simmons (@jensimmons) 5 januari 2022
Resources
HWB is degene die meer "voor mensen" is, behalve dat dat een beetje discutabel is en nog steeds gebaseerd is op sRGB.
ik had geen idee hwb() was een ding - schreeuw naar Stefan Judis voor erover bloggen.
Ik zie HSL normaal gesproken als het CSS-kleurformaat dat "voor mensen" is (en goed voor programmatische besturing) omdat, nou ja, het manipuleren van 360° van tint en 0-100% van zowel verzadiging als lichtheid is een soort van voor de hand liggende zin.
Maar in hwb(), wij hebben Tint (hetzelfde als de HSL denk ik), dan Witheid en Zwartheid. Stefan:
Het toevoegen van wit en zwart aan een kleur beïnvloedt de verzadiging ervan. Stel dat je dezelfde hoeveelheid Wit en Zwart aan een kleur toevoegt, dan blijft de kleurtint hetzelfde, maar verliest de kleur verzadiging. Dit werkt tot 50% wit en 50% zwart (
hwb(0deg 50% 50%)), wat resulteert in een achromatische kleur.
Stefan uitte enige twijfel dat dit makkelijker te begrijpen is dan de HSL, en daar ben ik het mee eens. Ik moet er waarschijnlijk gewoon meer aan wennen, maar het lijkt meer te zijn abstract dan alleen de lichtheid of verzadiging te veranderen.
HWB is beperkt tot hetzelfde kleurengamma (sRGB) als alle oude kleurformaten. Er worden hier geen nieuwe kleuren ontgrendeld.
Resources
LAB is als rgb() van een veel breder gamma
div { background: lab(150% -400 400);
}Ik vond de uitleg van Eric Portis over LAB leuk toen ik ernaar vroeg:
LAB is als RGB omdat er drie lineaire componenten zijn. Lagere getallen betekenen minder van het ding, grotere getallen betekenen meer van het ding. Dus je zou LAB kunnen gebruiken om het helderste, groenste groen te specificeren dat ooit heldergroen was, en het zal superhelder en groen zijn voor iedereen, maar helderder en groener op monitoren met bredere gamma's.
Dus we krijgen alle extra kleur, wat geweldig is, maar sRGB had dit anders probleem (behalve dat het beperkt is in kleurexpressie), dat het dat niet is perceptueel uniform. Brian Kardel:
De sRGB-ruimte is niet perceptueel uniform. Dezelfde wiskundige beweging heeft verschillende mate van waargenomen effect, afhankelijk van waar u zich in de kleurruimte bevindt. Als je de ervaring van een ontwerper hiermee wilt lezen, is hier een: interessant voorbeeld die goed werk levert, moeite heeft om het goed te doen.
Het klassieke voorbeeld hier is hoe in de HSL kleuren met exact dezelfde “Lichtheid” echt helemaal niet hetzelfde aanvoelen.
HSL vs LAB:: lichtheid 💡
Dezelfde kleuren uit onze lastige kleurenpeiling, maar deze keer heb ik LAB's versie van dezelfde kleur erbovenop getoond. Merk op hoeveel dichter de lichtheidswaarde van LAB bij de resultaten van onze peiling ligt!
🎨 kleurruimten zijn niet allemaal hetzelfde! https://t.co/AIEs0amdWY pic.twitter.com/xkEguq3KZG
— Adam Argyle (@argyleink) 3 december 2019
Maar in LAB is het blijkbaar perceptueel uniform, wat betekent dat het programmatisch manipuleren van kleuren een veel verstandiger taak is. En een andere bonus is dat LAB-kleuren worden gespecificeerd als apparaatonafhankelijk. Hier is Michelle Barker:
LAB en LCH zijn gedefinieerd in de specificatie as apparaatonafhankelijke kleuren. LAB is een kleurruimte die toegankelijk is in software zoals Photoshop en wordt aanbevolen als u wilt dat een kleur er op het scherm hetzelfde uitziet als bijvoorbeeld afgedrukt op een t-shirt.
Resources
LCH is als hsl() van een veel breder gamma
Weet je nog dat ik zei dat HSL "voor mensen" is, omdat het gemakkelijker te begrijpen is dan RGB? Het wijzigen van de tint, verzadiging en lichtheid is logisch. Hier vergelijkbaar met lch() waar hebben we Lichtheid, Chroma en Tint. Terug naar mijn gesprek met Eric Portis:
LCH lijkt meer op HSL: een polaire ruimte. H = tint = een cirkel. Dus wiskunde doen om complementaire kleuren te kiezen (of welke transformaties je ook zoekt) wordt triviaal (voeg gewoon 180 toe - of wat dan ook!)
Ik veronderstel dat je LCH zou kiezen alleen omdat je de syntaxis ervan leuk vindt of omdat het een ingewikkeld programmatisch ding dat je probeert te doen gemakkelijker maakt - en je krijgt het feit dat het 50% meer kleuren gratis kan uitdrukken.
We krijgen hier ook de perceptuele uniformiteit. Hier is Lea Verou die opgewonden lijkt dat lichtheid echt iets zal betekenen:
Op de HSL is lichtheid zinloos. Kleuren kunnen dezelfde lichtheidswaarde hebben, met een enorm verschillende perceptuele lichtheid. […] Met LCH zijn alle kleuren met dezelfde lichtheid even perceptueel licht, en alle kleuren met dezelfde chroma zijn even perceptueel verzadigd.
Een ander voordeel van het nieuwe model is dat we onze handen kunnen afvegen van de “grijze dode zone” in CSS-kleurovergangen. Ik denk dat vanwege dit perceptuele uniformiteitsgedoe, twee rijke kleuren niet brutaal worden en zichzelf over niet-rijk gebied heen laten lopen.
Hier is een kleine persoonlijke voorspelling: dat zou ik zeggen lch() wordt waarschijnlijk een favoriet van ontwerpers. Binnenkort zullen er een heleboel nieuwe kleurkeuzes zijn en het is te moeilijk en raar om altijd verschillende te kiezen. LCH lijkt de meeste waar voor je geld te hebben.
Resources
"OK"
LAB 'n' vrienden lijkt zo nieuw omdat het nieuw is... voor CSS. Maar LAB werd uitgevonden in de jaren 1940. In een gesprek met Adam Argyle gebruikte hij een gedenkwaardige zin: Alle kleurruimtes hebben een achilleshiel. Dat wil zeggen, iets waar ze nogal aan zuigen. Voor sRGB is het de grijze dode zone, evenals het beperkte kleurengamma. LAB is geweldig en zo, maar het heeft zeker zijn eigen zwakheden. Een blauw-naar-wit verloop in LAB reist bijvoorbeeld behoorlijk onhandig door purpletown.
In december 2020 is Björn Ottosson helemaal als "Hé, er is zojuist een nieuwe kleurruimte gevallen", en nu bestaat OKLAB. Blijkbaar zien de CSS-bevoegdheden genoeg waarde in die kleurruimte dat beide oklab() en oklch() zijn al gespecificeerd. Ik denk dat we erom moeten geven, want ze zijn gewoon over het algemeen beter, maar pin me daar niet op vast.
Waarom gebruikt Display P3 de color() functioneren, maar de andere niet?
Ik weet het niet echt. Ik denk dat de CSS color() functie is een beetje nieuwer en dat is precies hoe Safari het daar heeft ondergedompeld om te beginnen. Ik heb geen idee of Display P3 zijn eigen speciale functie krijgt, of dat we allemaal maar CSS moeten gaan gebruiken color(), of wat.
/* This is how you use Display P3 */
color(display-p3 1 0.08 0); /* But this doesn't work */
color(oklch 42.1% 0.192 328.6); /* You gotta do this instead 🤷♀️ */
oklch(42.1% 0.192 328.6); /* But you can use the color space within a gradient... */
background-image: linear-gradient( to right in oklch, lch(50% 100 100), lch(50% 100 250) );De relatieve kleurensyntaxis is super handig.
Er is een echt coole mogelijkheid genaamd "relatieve kleursyntaxis", waar je in feite een CSS-kleur kunt deconstrueren terwijl je deze naar een ander formaat verplaatst. Stel dat je de (uiteraard) meest bekende CSS HEX-kleur ooit hebt, misthond, en dat je hem in plaats daarvan in HSL wilt trappen:
body { background: hsl(from #f06d06 h s l);
}Misschien is dat niet meteen zo handig, maar hey, nu kunnen we er alfa aan toevoegen! Er is letterlijk geen andere manier om alpha toe te passen op een bestaande HEX-kleur, dus dat is nogal enorm:
body { background: hsl(from #f06d06 h s l / 0.5);
}Maar ik kan er ook wat mee. Stel dat ik misthond een beetje wil verzadigen voordat ik dekking toevoeg, omdat de lagere dekking het natuurlijk dof zal maken en ik wil dat bestrijden. ik kan gebruiken calc() op de impliciete variabelen daar:
body { background: hsl(from #f06d06 h calc(s + 20%) l / 0.5);
}Dat is zo cool. Ik weet zeker dat we wat zullen zien verbazingwekkend dingen komen hieruit voort. En het beperkt zich zeker niet tot de HSL. Ik gebruikte alleen de HSL omdat ik dat nu prettig vind. Ik zou kunnen beginnen met de genoemde kleur red en rotzooi ermee in LCH als ik wil:
body { background: lch(from red l calc(c + 15) h / 0.25);
}Dit spul zal het nuttigst zijn wanneer het royaal wordt gecombineerd met aangepaste eigenschappen.
Er zijn geen speciale functies meer alleen voor alpha.
Voor de duidelijkheid: geen komma's voorafgaand aan de alfawaarde in een CSS-kleurfunctie - in plaats daarvan alleen een schuine streep:
/* Old! */
rgb(255, 0, 0);
rgba(255, 0, 0, 0.5); /* New! */
rgb(255 0 0);
rgb(255 0 0 / 0.5);
hsl(0deg 40% 40%)
hsl(0deg 40% 40% / 90%) /* can be percentage rather than 0.9 or whatever */ /* The New color stuff ONLY has the single base function, no alpha secondardy function */
lab(49% 39 80)
lab(49% 39 80 / 0.25) /* Display P3, with the color function, essentially works the same way with the slash */
color(display-p3 1 0.08 0 / 0.25); U kunt zelfs uw eigen CSS-kleurruimte definiëren.
Maar daar kan ik letterlijk niet eens aan denken. Het verbaast me, sorry.
