What is the difference between RGB and RYB mixing?

RGB (additive) mixing works like light — red + green = yellow. RYB (subtractive) mixing mimics traditional paint: red + blue = purple, red + yellow = orange, which matches intuitive color mixing expectations.

Why does Lab blending look more natural?

The CIE Lab color space is perceptually uniform, meaning equal numerical steps correspond to equal perceived differences. This prevents the muddy middle colors that can appear in straight RGB interpolation.

What does the 5-step gradient show?

It displays colors at 0%, 25%, 50%, 75%, and 100% along the blend from Color A to Color B using the selected mixing model, giving you a full palette of intermediate shades.

Can I use this for web design?

Absolutely. The HEX and RGB output values can be copied directly into CSS. HSL values are also provided since HSL is well-supported in modern CSS and often easier to adjust manually.

design Free No signup

Color Mixer

Mix two colors using RGB, RYB subtractive, HSL, or perceptual Lab blending modes with a live gradient preview.

Loading tool…

About this tool

Pick two colors with the color pickers or enter hex values, then drag the proportion slider to blend them anywhere from 0 to 100%. Choose from four mixing models — RGB additive, RYB subtractive (traditional paint), HSL interpolation, or perceptual Lab blending — and see the result as HEX, RGB, and HSL values. A 5-step gradient strip shows the full range between your two colors.

How to use

1 Step 1: Select Color A and Color B using the color pickers or by typing hex codes directly into the input fields.
2 Step 2: Choose a mixing model — RGB, RYB (paint-like), HSL, or Lab (perceptual) — from the mode selector.
3 Step 3: Drag the proportion slider to set how much of Color A versus Color B you want in the mix.
4 Step 4: Copy the mixed color's HEX, RGB, or HSL value and use the 5-step gradient strip as a reference for intermediate shades.

About this tool

How to use

Frequently Asked Questions