Farben mischen
Zwei Farben mischen und die Zwischenstufen berechnen: Anzahl der Schritte, Farbraum RGB oder OKLab – als HEX, CSS-Variablen oder Verlauf.
Farben mischen berechnet die Zwischenstufen zwischen zwei Farben. Du wählst Start- und Endfarbe, die Zahl der Zwischenschritte und den Farbraum: klassisches RGB, lineares RGB wie bei Licht oder OKLab für gleichmäßig wirkende Übergänge. Ergebnis sind HEX-Werte, CSS-Variablen und ein mehrstufiger Verlauf.
#2563eb
#4a7dd9
#6d91c4
#90a3ad
#b3b291
#d6c06a
#facc15Farbräume beim Mischen
| Farbraum | Mitte zwischen Blau und Gelb | Geeignet für |
|---|---|---|
| RGB | Trübes Grau | Kompatibilität mit alten Werkzeugen |
| Lineares RGB | Helles Grau | Lichteffekte, Überblendungen |
| OKLab | Gleichmäßiger, farbiger Übergang | Paletten, Diagramme, UI |
Einzelne Farben aufhellen oder abdunkeln kannst du mit Farbe aufhellen und abdunkeln, den Mischwert direkt in CSS berechnet der color-mix()-Rechner.
Häufige Fragen
Warum sehen die Mischungen je nach Farbraum anders aus?
In RGB werden die Zahlenwerte direkt gemittelt; zwischen Blau und Gelb entsteht dabei ein trübes Grau. Lineares RGB mischt wie Licht und wird heller. OKLab berücksichtigt die menschliche Wahrnehmung, die Stufen wirken gleichmäßig und bleiben farbig.
Wofür brauche ich Zwischenfarben?
Für Diagramme mit Abstufungen, Heatmaps, Fortschrittsanzeigen, Hover-Zustände oder harmonische Hintergründe. Für komplette Farbskalen einer einzelnen Farbe eignet sich der Tailwind-Farbgenerator.
Geht das auch direkt in CSS?
Ja, mit color-mix(): color-mix(in oklab, #2563eb 50%, #facc15) liefert die Mitte. Den Ausdruck und das Ergebnis für jeden Anteil zeigt der color-mix()-Rechner.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.