Naar de kleurkiezer

Kleuren mengen

Meng twee kleuren in elke verhouding in OKLab, OKLCH of sRGB. Kopieer het resultaat of een kant-en-klare color-mix()-expressie.

50%
Mengen in
Resultaat#ae7ea4
HEX
RGB
OKLCH

CSS met fallback

color: #ae7ea4;
color: color-mix(in oklab, #ff5733, #3b82f6 50%);

Stappen van de eerste naar de tweede

Hetzelfde mengsel in elke kleurruimte

sRGB wordt in het midden grijs en donker. OKLab houdt de helderheid gelijkmatig. OKLCH en HSL behouden de verzadiging, maar reizen rond de kleurencirkel.

Vragen en antwoorden

Wat is color-mix() in CSS?

color-mix() is een CSS-functie die twee kleuren mengt in een kleurruimte naar keuze, bijvoorbeeld color-mix(in oklab, #ff5733, #3b82f6 30%). Ze werkt in alle actuele browsers. Zet voor oudere browsers een gewone kleur als fallback ervoor, zoals in het codefragment hierboven.

In welke kleurruimte kan ik het best mengen?

OKLab is de veiligste standaard: het midden houdt zijn helderheid en wordt niet modderig. OKLCH houdt kleuren verzadigd, maar neemt de kortste weg over de kleurencirkel, zodat rood en blauw via paars en roze gaan. sRGB is hoe oudere tools mengen, en het midden ziet er daar vaak grijs en donker uit.

Waarom is licht mengen anders dan verf mengen?

Schermen tellen licht op, dus deze tool middelt lichtwaarden: blauw en geel geven grijs of een bleke kleur, geen groen. Verf neemt licht weg, daarom ziet dezelfde mix op papier er groen uit. Wil je het resultaat van verf voorspellen, gebruik dan een model voor verfmenging in plaats van een kleurruimte voor schermen.