Blend modes

Three blend modes produce different results depending on how color channels are interpolated:

RGB (linear): Interpolates each red, green, and blue channel independently. The simplest mode; produces the mathematically "average" color.
HSL (perceptual): Interpolates hue, saturation, and lightness. Produces more visually pleasing gradients because it avoids the muddy middle tones common in RGB mixing.
Pigment (sqrt-space): Uses a square-root transform that approximates how physical pigments mix. Good for artistic color blending.

Mix ratio

Drag the slider left for more of Color A, right for more of Color B. At 50 you get an equal blend; at 0 the result is pure Color A; at 100 it is pure Color B.

Why square-root-space (pigment) mixing looks different

Light is additive: mixing colored lights (like LEDs or monitor pixels) adds their intensities. Mixing red and green light produces yellow. But physical pigments are subtractive: they absorb wavelengths rather than emitting them. A simple linear average of RGB values mimics additive light mixing, which often produces an unpleasant, washed-out midpoint (e.g., orange + blue = a muddy gray in RGB). The square-root-space ("pigment") mixing mode converts colors to a reflectance approximation, mixes them, then converts back - producing a result that more closely matches what you'd get mixing real paints.

Design use cases

Brand color gradients: generate intermediate shades between two brand colors to build a harmonious gradient that avoids the muddied midpoint problem.
Palette expansion: given a primary and an accent color, produce a range of blends to fill in a multi-stop design token scale.
Accessibility testing: find a midpoint between two similar colors to see if the difference is perceptible enough for accessibility purposes.