Color Mixer — Blend & Find Midpoints

Two hex values go in; seven perceptually even blend stops come out. Most color mixers average the gamma-encoded bytes directly, which means the midpoint of #FF7A59 and #2E6F73 lands as a brownish grey rather than the expected teal. Color Mixer converts both inputs to linear light first, interpolates there, then applies the sRGB gamma curve on the way back. That is the same path a display uses when it renders a CSS gradient, so every step in the sequence looks equally spaced to the eye.

Each of the seven stops is labelled with its percentage (0 % through 100 %), shows its hex, RGB and HSL values side by side, and offers individual Copy HEX and Copy RGB buttons. A "Copy all as CSS custom properties" button emits a ready-to-paste :root block with seven --blend-0 through --blend-100 variables. The gradient preview bar above the grid shows the full sweep at a glance, and the A vs B contrast ratio badge applies WCAG 2.1 luminance maths to the two input colors: 4.94 : 1 for the lead pair, which clears AA for large text but not the 4.5 : 1 AA threshold for body copy.

Running Your First Blend

1. Paste or type a hex value into the Color A field, or click the color-picker swatch to open the browser's native picker. The field accepts 3-digit shorthand like #F90 as well as the full 6-digit form.
2. Do the same for Color B. The gradient preview and blend grid update the moment both inputs are valid.
3. Press Sample to cycle through the six built-in color pairs. Press the swap button (↔) to flip A and B, useful when you want the sequence in reverse.
4. Click Copy HEX on any swatch to grab that stop. Press Copy all as CSS custom properties to get all seven as a :root block, ready to drop into a stylesheet.

Worked Example: #FF7A59 into #2E6F73

The lead sample blends #FF7A59 (a warm terracotta orange) into #2E6F73 (a muted teal). The 50 % midpoint in linear RGB is #B17163, a dusty rose, rather than the muddied brown a naive average would produce. The 0 % stop is #FF7A59, the 16 % stop is #E47A65, the 33 % stop is #CA7A6C, and the 100 % stop is #2E6F73. All seven can be copied and dropped straight into a Tailwind config as a custom color scale.

Accuracy, Rounding and Input Limits

• Identical inputs: if Color A and Color B are the same, all seven stops show that color; the contrast ratio reads 1.00 : 1.
• Near-identical inputs: two colors that differ by a single channel bit still produce seven distinct hex values because the interpolation runs at floating-point precision before rounding; visible differences emerge only past the first or second stop.
• Invalid input: a field that contains a non-hex value shows an inline message: "Invalid hex — enter a 3 or 6 digit code like #FF7A59." The blend grid stays hidden until both inputs are corrected.
• Contrast thresholds: the A vs B badge checks the two input colors only, not the blend steps. WCAG 2.1 defines AA body-copy contrast at 4.5 : 1, AA large text at 3 : 1, and AAA at 7 : 1. The badge labels each threshold so you can read the compliance level without counting.