カラーミックス計算機

What Is the Color Mix Calculator?

The color mix calculator blends two colors together in your choice of RGB, HSL, or OKLAB color space. Adjust the blend ratio with a slider, preview the full gradient between the two colors, and copy the resulting hex code.

Different color spaces produce noticeably different midpoints — OKLAB is perceptually uniform and generally produces the most natural-looking blends, while RGB is the simplest and HSL preserves hue better for saturated colors.

How to Use the Color Mix Calculator

1. Choose a color space: RGB, HSL, or OKLAB.
2. Set Color 1 using the color picker or by typing a hex value.
3. Set Color 2 the same way.
4. Drag the ratio slider to adjust the blend — 50% gives an equal mix.
5. Click any stop in the gradient preview to jump to that ratio.
6. Copy the result hex, RGB, or HSL value with the copy buttons.

Features

• Three color spaces: RGB, HSL, and perceptually uniform OKLAB
• Live gradient preview with 11 interpolated stops
• Click any gradient stop to set the ratio instantly
• Side-by-side comparison of all three color spaces at the same ratio
• Copy result as hex, RGB, or HSL
• 5 built-in color pair presets
• All calculations run client-side — no server requests

FAQ

What is the difference between mixing colors in RGB vs HSL vs OKLAB?

RGB mixing interpolates red, green, and blue channels directly — fast but can produce muddy grays in the middle. HSL mixing interpolates hue, saturation, and lightness, which often looks more natural for hue transitions. OKLAB is a perceptually uniform color space where equal numeric steps correspond to equal perceived differences, producing the most visually smooth gradients.

What is OKLAB?

OKLAB is a perceptually uniform color space designed by Björn Ottosson in 2020. Unlike RGB or HSL, distances in OKLAB correspond closely to how humans perceive color differences. This makes it ideal for color interpolation, gradients, and color manipulation that looks natural to the eye.

How does the CSS color-mix() function work?

The CSS color-mix() function (supported in modern browsers) mixes two colors in a specified color space: color-mix(in oklab, blue 50%, red). This tool performs the same calculation client-side and outputs the resulting hex color.

Why does mixing black and white in RGB look different from OKLAB?

In RGB, the midpoint of black (#000000) and white (#ffffff) is #808080. In OKLAB, the perceptually uniform midpoint is slightly different because OKLAB accounts for how human vision perceives lightness non-linearly. OKLAB midpoints tend to look more "middle gray" to the human eye.