Color Blender Calculator

It places the input colors at the ends and computes each interior position as t = i / (steps + 1). The mode labeled linear RGB interpolates the encoded 8-bit RGB channels independently with c = c1 + (c2 - c1) x t. It is channel-linear, not linear-light color mixing. A request for 5 steps returns 7 colors because both endpoints are included.

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). This calculator uses that channel-by-channel midpoint. CSS gradients can use a different interpolation color space, so check the rendered result in your target browser.

Use RGB when you want independent channel interpolation similar to the default sRGB behavior of common CSS gradients. Use HSL when you want the hue to travel around the color wheel while saturation and lightness also interpolate. Neither mode is universally better, and neither is perceptually uniform. Check the intermediate colors for your specific use.

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 limits the amount of generated output and the number of swatches the browser renders. Whether a palette looks continuous depends on the endpoints, color space, display, and viewing conditions. For a continuous fill, use a CSS gradient instead of generating a long list of discrete colors.