Color Mixer
Meng twee kleuren in een gekozen kleurruimte en met een willekeurige verhouding, zoals CSS color-mix() dat doet. Voer twee kleuren in een willekeurig CSS-formaat in, stel het aandeel van de tweede kleur in van 0 tot 100 procent en kies OKLab, OKLCH, Lab, LCH, sRGB, lineair sRGB, Display P3, HSL, HWB of XYZ. Het resultaat bestaat uit HEX, RGB, HSL en OKLCH, plus een kant-en-klare color-mix()-expressie voor je stylesheet.
Veelgestelde vragen
Hoe werkt de hoeveelheid?
De hoeveelheid is het aandeel van Kleur 2 in de mix. Bij 0% krijg je Kleur 1, bij 100% krijg je Kleur 2 en bij 50% zit je precies halverwege in de gekozen kleurruimte. Dit komt overeen met color-mix(in space, color1 (100 - p)%, color2 p%).
Welke kleurruimte moet ik kiezen?
OKLab is de standaard, is perceptueel uniform en voorkomt modderige of donkere middentonen. sRGB mengt de gamma-gecodeerde kanalen zoals oudere browsers en Sass dat doen, waardoor mengsels van verzadigde kleuren donkerder en doffer worden. Lab is de oudere perceptuele kleurruimte van CIE en gedraagt zich ongeveer hetzelfde als OKLab, maar met minder gelijkmatige blauwtinten.
Wat doen de op kleurtint gebaseerde kleurruimten?
OKLCH, LCH, HSL en HWB interpoleren de kleurtint langs de kortste boog van het kleurenwiel, de standaard van CSS. Daardoor behoudt het midden zijn verzadiging en kan het levendiger zijn dan beide invoerkleuren. Heeft een kleur geen kleurtint, zoals neutraal grijs, dan wordt de kleurtint van de andere kleur gebruikt.
Waarvoor dienen lineair sRGB en XYZ?
Beide mengen lichtintensiteiten lineair, zoals overlappende lichtbundels, waardoor het midden er helderder uitziet dan bij sRGB. Ze zijn handig voor fysiek gebaseerde effecten en om na te bootsen hoe vervaagde of gemengde pixels eruitzien.
Hoe wordt transparantie verwerkt?
Net als bij CSS color-mix() interpoleert de mixer met vooraf vermenigvuldigde alfa, zodat een transparante kleur de mix niet naar zwart trekt. De alfawaarde zelf wordt in dezelfde verhouding geïnterpoleerd en verschijnt in de hex-code van 8 cijfers en na de schuine streep in CSS-functies.
Welke invoerformaten kan ik gebruiken?
Hex-codes met of zonder #, CSS kleurnamen, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), kleurruimten zoals display-p3 met color(), en cmyk(), in elke combinatie. Elke kleur mag maximaal 100 tekens lang zijn.
Wat gebeurt er als het resultaat buiten sRGB valt?
Mengen in Display P3, OKLCH of LCH kan kleuren opleveren die sRGB niet kan weergeven. HEX, RGB en HSL worden dan met het CSS Color 4-algoritme naar sRGB omgezet en bij het resultaat verschijnt een melding. De OKLCH-waarde behoudt de niet-omgezette kleur.
Hoe gebruik ik de color-mix()-expressie?
Plak de expressie in een CSS-eigenschap die een kleur accepteert. De invoerkleuren worden aangeduid met hun hex-code of met oklch() voor invoer met een breed gamut, zodat de browser dezelfde mix opnieuw berekent. color-mix() werkt in alle huidige versies van Chrome, Edge, Firefox en Safari.
Hoe nauwkeurig is het resultaat?
De hoeveelheid is een geheel percentage en de mix wordt met volledige precisie berekend met de culori-bibliotheek. RGB-kanalen worden afgerond op gehele getallen, HSL-percentages op twee decimalen en de lichtheid en chroma van OKLCH op vier. Browsers kunnen daardoor één stap verschillen in het laatste cijfer.
Hoe krijg ik meerdere stappen tussen twee kleuren?
Voer de mixer uit met verschillende hoeveelheden, zoals 25%, 50% en 75%. Voor een volledige schaal richting wit, zwart of grijs genereren de Color Tint, Shade en Tone Generators elke stap in één tabel.