Farbmischer

Mische mehrere Farben, um neue Farbtöne zu erstellen.

Mixed Color

Simple average of RGB values. Up to 3 colors.
Blends in HSL color space for natural color transitions. Up to 3 colors.
Alpha compositing on background. Limited to 2 colors.
Hex
#000000
RGB
rgb(0, 0, 0)
RGBA
rgba(0, 0, 0, 1)
Opacity
100%

Anleitung

1

Choose Blend Mode

Select RGB for simple averaging, HSL for natural color transitions, or Opacity for alpha compositing on a background.

2

Add & Select Colors

Click the "+" button to add color cards (up to 3, or 2 for Opacity mode). Click on the color picker or enter hex values directly.

3

Adjust Opacity

Use the opacity slider on each card to control transparency. Hex values automatically include alpha when opacity is below 100%.

4

Copy Mixed Color

The mixed result appears at the top. Click the copy button next to Hex, RGB, RGBA, or Opacity values to copy them.

About

The Color Mixer is a versatile tool for blending colors using different color models. Whether you're a designer creating color palettes, a developer working on UI components, or an artist exploring color combinations, this tool helps you visualize and calculate mixed colors with precision.

Choose from three blending modes: RGB (Red-Green-Blue) for additive color mixing commonly used in digital displays, HSL (Hue-Saturation-Lightness) for more intuitive color harmony based on color wheel positions, or Opacity for simulating semi-transparent colors layered over a white background using alpha compositing.

Each color can be adjusted using the color picker, direct hex input (supporting alpha channel with 8-digit hex codes), and individual opacity sliders. The mixed result is displayed in multiple formats (Hex, RGB, RGBA, and Opacity percentage) with convenient copy buttons for easy integration into your projects.

Häufig gestellte Fragen

What is the difference between RGB, HSL, and Opacity blend modes?
RGB mode averages the red, green, and blue values directly. HSL mode converts colors to Hue, Saturation, and Lightness before blending, creating more natural color transitions. Opacity mode uses alpha compositing to layer colors on top of each other, simulating transparency.
How do I enter colors with transparency?
You can enter hex values with alpha channel in the format #RRGGBBAA (e.g., #FF000080 for 50% transparent red). Alternatively, use the opacity slider to adjust transparency. The hex value will automatically update to include the alpha channel.
Why is the Opacity mode limited to 2 colors?
Opacity mode uses alpha compositing, which layers one color on top of another. This simulates how transparent colors appear when stacked. The result is most meaningful with a background color and one foreground color.
Can I save or share my color mixes?
Currently, you can copy any of the color values (Hex, RGB, RGBA) by clicking the copy button next to each value. The values are copied to your clipboard for use in your design tools or code.

Was kommt als Nächstes?

URL Sharing

Share your color mixes via unique URLs.

Planned

History Panel

Track and revert to previous color mixes easily.

Planned

Cookie‑Einstellungen

Hier kannst du deine Cookie‑Einstellungen anpassen.

Notwendig

Wesentlich für Funktion & Sicherheit

Präferenzen

Merkt sich deine Einstellungen