Wat is CSS Color Mix Generator?
De CSS color-mix() functie mengt twee kleuren in een gespecificeerde kleurruimte. Het maakt kleurvariaties direct in CSS zonder een preprocessor zoals Sass. oklab geeft perceptueel uniformere resultaten dan srgb. Veelgebruikte toepassingen zijn hoverstates, randen en subtiele achtergronden.
Snel antwoord
Gebruik color-mix() om twee kleuren te mengen in oklab of srgb. Nuttig voor tint-, schaduw- en hovervarianten vanuit een basiskleur zonder preprocessor.
Last updated: 2026-05-25
Beperkingen
- Vereist Chrome 111+, Safari 16.2+, Firefox 113+.
- Oklab geeft betere resultaten dan srgb.
- Mogelijk problemen met custom properties in oudere browsers.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Voer een basiskleur in als hex-waarde.
- Bekijk de berekende color-mix() varianten met wit, zwart of transparant.
- Kopieer elke color-mix() declaratie in uw CSS.
- Gebruik de gegenereerde custom properties voor consistent kleurgebruik.
Waarvoor je het kunt gebruiken
- Maak hoverstates door een kleur te mengen met wit of zwart.
- Genereer subtiele achtergrondtinten van een merkkleur.
- Bouw randkleuren die iets donkerder zijn dan de achtergrond.