Twee kleuren, een aantal stappen en de ruimte waar de menging doorheen loopt. Beide uiteinden tellen mee, dus negen stappen zijn jouw twee kleuren plus zeven mengsels. De ruimte is de hele vraag: hetzelfde paar geeft in sRGB een dood grijs midden en in OKLCH een verzadigd midden, en geen van beide is een weergavefout.

De interpolatieruimte bepaalt de route, niet de uiteinden

Twee kleuren mengen loopt langs een rechte lijn tussen twee punten, en de ruimte bepaalt waar die punten liggen en waar de lijn doorheen gaat. In sRGB zijn de coördinaten de waarden waarmee een scherm wordt aangestuurd: blauw is (0, 0, 255), geel is (255, 255, 0), halverwege elke as is 128, dus het midden van #0000ff en #ffff00 is precies #808080. Verzadiging is geen van de drie coördinaten, dus niets houdt het vast en de kleur valt uit het midden weg. Dat is de grijze dode zone.

OKLab, in 2020 gepubliceerd door Björn Ottosson en inmiddels onderdeel van CSS Color 4, zet de coördinaten op assen die zijn afgestemd op perceptuele data: één lichtheidsas en twee assen voor tegengestelde kleuren. OKLCH is dezelfde ruimte in polaire vorm, dus zijn getallen zijn lichtheid, chroma en tint, en interpolatie beweegt die apart. Chroma gaat helemaal mee en de tint loopt langs de cirkel in plaats van door het neutrale punt in het midden. De chroma-aflezing onder elke strook hierboven is dat verschil als getal in plaats van als indruk.

Wanneer sRGB nog steeds het juiste antwoord is

Kies sRGB als je iets reproduceert in plaats van iets ontwerpt. Een palet namaken dat gemaakt is in een tool die in sRGB mengde is het duidelijke geval: OKLCH zou je betere kleuren geven die zichtbaar niet de kleuren zijn die al in het bestand staan. Een CSS-verloop zonder opgegeven interpolatieruimte loopt in sRGB, en alpha compositing, wat opacity en een doorschijnende rgb() doen, gebeurt ook in gamma-gecodeerd sRGB, dus sRGB is het model dat een doorschijnende overlay voorspelt. HSL is de ruimte om te mijden: zijn lichtheid is meetkundig in plaats van perceptueel, en een verzadigd geel en een verzadigd blauw staan allebei op 50% terwijl de een duidelijk helderder is.

De tint neemt de korte weg

Er zijn twee wegen langs de cirkel van de ene tint naar de andere, en de kortste boog is hier en in CSS de standaard: 350° naar 10° is een stap van 20° door rood, geen boog van 340° langs al het andere. CSS kan met color-mix(in oklch longer hue, …) om de andere route vragen, of een richting afdwingen met increasing hue en decreasing hue. Deze tool doet alleen de kortste boog.

Mengen naar wit, zwart of een grijs is het geval waar mensen op stuklopen. Een neutraal heeft geen tint: zijn chroma is nul en de hoek die het rekenwerk teruggeeft is ruis. Naar die hoek interpoleren slingert het verloop door een onverwant stuk van het wiel, en daar komt "waarom werd mijn verloop van blauw naar wit paars" vandaan. CSS noemt zo'n tint powerless en zet die van het andere uiteinde ervoor in de plaats, en deze tool doet hetzelfde, dus een menging naar wit houdt de tint waar je mee begon.

color-mix() en de fallback die het nodig heeft

De regel onder het enkele mengsel geeft de menging aan de browser in plaats van hem als hex vast te leggen, en color-mix() is veilig om te leveren: Chrome en Edge 111, Safari 16.2 en Firefox 113, allemaal in 2023. E-mailclients en oude ingebouwde webviews missen het nog, en de fallback kost één regel. Zet de gewone hex eerst en de color-mix() daarna: elke engine die de tweede niet kan parsen gooit hem weg en houdt de eerste, dus een @supports-blok is niet nodig. Eén detail dat mensen omdraaien: het percentage hoort bij de kleur waar het achter staat, dus color-mix(in oklch, #0000ff, #ffff00 40%) is 40% van het geel over 60% van het blauw.

Licht mengen is geen verf mengen

Blauwe en gele verf maken groen. Blauw en geel licht niet, en deze tool ook niet, net zomin als color-mix() of welk CSS-verloop dan ook: die interpoleren allemaal tussen twee kleurwaarden, terwijl verf mengt door aftrekking, waarbij elk pigment een deel van het spectrum absorbeert tot wat jou bereikt is wat geen van beide pakte. Dat voorspellen vraagt een Kubelka-Munk-model en absorptiedata voor de specifieke pigmenten, en die draagt geen enkele hexcode. De OKLCH-route van blauw naar geel gaat wel door turkoois, dichter bij het antwoord van de schilder dan het grijs van sRGB, maar dat is alleen waar de kortste boog van de tintcirkel toevallig loopt. Het is meetkunde, geen pigment, en een ander paar valt niet zo mooi uit.

Veelvoorkomende problemen

Een stap is met een sterretje gemarkeerd. Hij viel buiten sRGB, wat in OKLCH makkelijk gebeurt omdat die ruimte kleuren beschrijft die geen enkel sRGB-scherm kan maken. Hij wordt teruggebracht door lichtheid en tint vast te houden en chroma te verlagen, en niet door elk kanaal af te kappen, want dat zou de tint verschuiven.
De browser tekent color-mix() net iets anders. Op een scherm met een breed gamut brengt hij een menging buiten het gamut naar het scherm terug in plaats van naar sRGB. De hex hier is altijd het sRGB-antwoord.
De schaal ziet er ook in OKLCH ongelijk uit. Een menging is een rechte lijn tussen twee kleuren, en dat is geen gelijkmatige toonschaal. Zet voor een schaal van 50 tot 950 stappen in de lichtheid, bij gelijke chroma en tint.
De gekopieerde hex heeft acht cijfers. Een van je kleuren is niet dekkend, en alpha wordt met de rest mee geïnterpoleerd.

Veelgestelde vragen

OKLCH of OKLab, als het dezelfde ruimte is?

Dezelfde ruimte, andere coördinaten, en de coördinaten veranderen het pad. OKLab interpoleert op de rechthoekige assen, dus de lijn loopt recht door de ruimte en komt dichter bij de neutrale as als de tinten ver uit elkaar liggen: het midden wordt iets minder verzadigd maar de tint verrast je nooit. OKLCH draait de tint en interpoleert chroma apart, dus het midden blijft verzadigd. Voor tegenpolen is OKLCH de kleurrijkere route en OKLab de voorspelbaardere.

Kan ik drie of meer kleuren mengen?

Niet in één bewerking. color-mix() neemt precies twee kleuren en deze tool volgt dat. Drie achter elkaar is een verloop en geen menging, en een verloopgenerator modelleert stops en posities fatsoenlijk. color-mix() nesten kan wel, maar de gewichten betekenen na het eerste niveau niet meer wat je verwacht.

Is het midden het gemiddelde van twee kleuren?

Alleen ten opzichte van een ruimte, en daarom laat deze pagina twee antwoorden tegelijk zien. Het gemiddelde van #0000ff en #ffff00 is #808080 in sRGB en een turkoois in OKLCH, en geen van beide is fout. Vraagt iemand naar het gemiddelde van twee kleuren zonder een ruimte te noemen, dan is de nuttige wedervraag: welke?

Wordt er iets wat ik typ geüpload?

Nee. Elke omrekening, menging en gamut-omzetting hier is rekenwerk dat in je browser draait, en er gaat geen enkel verzoek uit. De kleuren in de adresbalk staan er zodat een link laat zien waar je naar kijkt.