Color Blender Calculator

It places the two input colors at the ends of an evenly spaced strip and computes each interior position as t = i / (steps + 1), where i is the slot index. In linear RGB mode, every red, green, and blue channel is mixed independently with the formula c = c1 + (c2 - c1) x t, then rounded to a whole 0-255 value. The output palette always includes the two endpoints, so a request for 5 steps returns 7 colors total.

The midpoint between pure red and pure blue, with t = 0.5, is #800080, a deep purple. Each channel is averaged: red goes from 255 to 0 (halfway is 128 = 0x80), green stays at 0, and blue goes from 0 to 255 (halfway is also 128). That is exactly what CSS does for a linear-gradient(red, blue) at the 50 percent stop.

Linear RGB matches CSS linear-gradient and is fast and predictable, but blending across complementary hues (red to green, blue to orange) can pass through muddy grays at the midpoint. Linear HSL interpolates the hue around the color wheel along the shorter arc, then blends saturation and lightness, which keeps intermediate steps vivid. HSL is better for rainbow palettes; RGB is better for tints, shades, and matching CSS output.

The number is the WCAG 2.1 contrast ratio between the two endpoint colors, from 1 (identical) to 21 (black on white). WCAG asks for at least 4.5:1 for normal body text and 3:1 for large text or UI components. A high contrast ratio means your gradient spans a wide range of brightness, which is useful for data viz scales; a low ratio (under 3:1) means the two endpoints are similar in luminance.

The cap protects the browser from rendering thousands of swatches with no visible benefit. With more than about 30 to 40 steps, the gradient already looks continuous to the eye and the per-step color difference falls below the just-noticeable difference for most displays. If you need a smooth fill, use the CSS linear-gradient string the calculator builds from the endpoints rather than a long list of stops.