Wat is CSS Color Mix Generator?
CSS Color Mix Generator is een browsertool voor deze taak: Genereer CSS color-mix() aanroepen voor hover, borders, achtergronden en ingetogen tekst. De uitvoer blijft leesbaar, zodat je die kunt controleren voordat je hem publiceert.
Quick answer
Use color-mix() to blend two colors in a specified color space, such as oklab or srgb. It is useful for creating tint, shade, and hover variants from a single base color without a preprocessor.
Limitations
- color-mix() requires Chrome 111+, Edge 111+, Safari 16.2+, and Firefox 113+. Older browsers do not support it and will ignore the declaration.
- The oklab color space produces more perceptually uniform results than srgb. Mixing in srgb can create muddy intermediates.
- color-mix() may not reference CSS custom properties that contain color-mix() output in some older browser versions due to property cycle detection.
Zo gebruik je deze tool
- Open de tool en vul de relevante waarden in.
- Controleer de uitvoer in het resultaatpaneel.
- Kopieer alleen het deel dat bij je página past.
- Test de wijziging voordat je publiceert.
Waarvoor je het kunt gebruiken
- Terugkerend publicatiewerk sneller afronden.
- Markup, CSS of checklists voorbereiden voor een launch.
- Kleine fouten vermijden die bij statische sites makkelijk worden gemist.