# Color Mixer

Mische zwei Farben in einem ausgewählten Farbraum und in einem beliebigen Verhältnis, wie es CSS color-mix() tut. Gib zwei Farben in einem beliebigen CSS-Format ein, lege den Anteil der zweiten Farbe auf 0 bis 100 Prozent fest und wähle OKLab, OKLCH, Lab, LCH, sRGB, lineares sRGB, Display P3, HSL, HWB oder XYZ aus. Als Ergebnis erhältst du HEX, RGB, HSL und OKLCH sowie einen fertigen color-mix()-Ausdruck für dein Stylesheet.

## Häufig gestellte Fragen

### Wie funktioniert der Anteil?

Der Anteil gibt an, wie viel Farbe 2 in der Mischung enthalten ist. Bei 0 % erhältst du Farbe 1, bei 100 % Farbe 2 und bei 50 % die Mischung zur Hälfte im ausgewählten Farbraum. Das entspricht color-mix(in space, color1 (100 - p)%, color2 p%).

### Welchen Farbraum sollte ich wählen?

OKLab ist standardmäßig ausgewählt, wahrnehmungsgleichförmig und vermeidet trübe oder dunkle Mitteltöne. sRGB mischt die gamma-kodierten Kanäle wie ältere Browser und Sass, wodurch Mischungen gesättigter Farben dunkler und matter werden. Lab ist der ältere wahrnehmungsbezogene CIE-Farbraum und verhält sich ähnlich wie OKLab, bildet Blautöne aber weniger gleichmäßig ab.

### Was bewirken farbtonbasierte Farbräume?

OKLCH, LCH, HSL und HWB interpolieren den Farbton entlang des kürzeren Bogens im Farbkreis – der Standardeinstellung von CSS. Dadurch behält die Mitte ihre Sättigung und kann kräftiger wirken als beide Eingabefarben. Ist eine Farbe neutrales Grau ohne Farbton, wird der Farbton der anderen Farbe verwendet.

### Wofür sind lineares sRGB und XYZ gedacht?

Beide mischen Lichtintensitäten linear, wie sich überlagernde Lichtstrahlen. Dadurch wirkt die Mitte heller als in sRGB. Sie eignen sich für physikalisch basierte Effekte und um nachzubilden, wie unscharfe oder gemischte Pixel aussehen.

### Wie wird Transparenz behandelt?

Wie bei CSS color-mix() interpoliert der Mixer mit vormultipliziertem Alpha, sodass eine transparente Farbe die Mischung nicht in Richtung Schwarz verschiebt. Der Alpha-Wert selbst wird im selben Verhältnis interpoliert und erscheint in Hex-Codes mit 8 Ziffern sowie nach dem Schrägstrich in CSS-Funktionen.

### Welche Eingabeformate kann ich verwenden?

Hex-Codes mit oder ohne #, CSS-Farbnamen, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color()-Farbräume wie display-p3 und cmyk(), auch in beliebiger Kombination. Jede Farbe darf bis zu 100 Zeichen lang sein.

### Was passiert, wenn das Ergebnis außerhalb von sRGB liegt?

Beim Mischen in Display P3, OKLCH oder LCH können Farben entstehen, die sRGB nicht darstellen kann. HEX, RGB und HSL werden dann mit dem CSS-Color-4-Algorithmus auf sRGB abgebildet. Das Ergebnis erhält einen entsprechenden Hinweis, während der OKLCH-Wert die nicht abgebildete Farbe beibehält.

### Wie verwende ich den color-mix()-Ausdruck?

Füge ihn in eine beliebige CSS-Eigenschaft ein, die eine Farbe annimmt. Die Eingaben werden anhand ihres Hex-Codes benannt oder bei Farben mit großem Farbumfang anhand von oklch(), damit der Browser dieselbe Mischung neu berechnen kann. color-mix() funktioniert in allen aktuellen Versionen von Chrome, Edge, Firefox und Safari.

### Wie genau ist das Ergebnis?

Der Anteil wird als ganze Prozentzahl angegeben und die Mischung mit voller Genauigkeit mithilfe der culori-Bibliothek berechnet. RGB-Kanäle werden auf ganze Zahlen gerundet, HSL-Prozentwerte auf zwei Dezimalstellen und Helligkeit sowie Chroma in OKLCH auf vier. Daher kann das Ergebnis in Browsern an der letzten Stelle um eine Einheit abweichen.

### Wie erhalte ich mehrere Schritte zwischen zwei Farben?

Führe den Mixer mit verschiedenen Anteilen aus, etwa 25 %, 50 % und 75 %. Für eine vollständige Skala in Richtung Weiß, Schwarz oder Grau erzeugen die Color Tint, Shade and Tone Generators alle Schritte in einer Tabelle.

Deine Anzeige hier?

[Schreib uns eine E-Mail](mailto:hi@dennn.is?subject=Werbung%20auf%20OneClick%20Pro)

[Anzeige Die agentenfähige Plugin-Suite für WordPress.](https://sleekwp.com/?ref=oneclickpro)