Generator Tools

Color Mixer

Blend two colors and generate a smooth palette of intermediate steps in OKLCH, LAB, HSL, or sRGB. Live preview, copy hex, gradient, and CSS variables.

Color A

Color A preview#1d4ed8

rgb(29, 78, 216)

Color B

Color B preview#f59e0b

rgb(245, 158, 11)

Blend space

OKLCHPerceptually uniform. Smooth midpoints, no muddy tones.LABPerceptual blend in CIE LAB. Clean ramps, slight chroma shift.HSLInterpolates hue, saturation, lightness. Vibrant but uneven.sRGBSimple channel-wise blend. What naive lerp libraries do.

Steps

Number of colors in the strip, including the two endpoints.

Hue arc

Direction the hue takes around the wheel between the two colors.

Pinpoint blend

50%

Slide to read the exact blend at any percent between A and B.

#d64d9e

rgb(214, 77, 158)

Mixed palette

7 colors interpolated through OKLCH (short hue arc).

Step 1 of 7#1d4ed8
0.0% from A
rgb(29, 78, 216)
Step 2 of 7#7548d9
16.7% from A
rgb(117, 72, 217)
Step 3 of 7#ac48c3
33.3% from A
rgb(172, 72, 195)
Step 4 of 7#d64d9e
50.0% from A
rgb(214, 77, 158)
Step 5 of 7#f15d72
66.7% from A
rgb(241, 93, 114)
Step 6 of 7#fc7a42
83.3% from A
rgb(252, 122, 66)
Step 7 of 7#f59e0b
100.0% from A
rgb(245, 158, 11)

CSS gradient

background: linear-gradient(90deg, #1d4ed8 0.00%, #7548d9 16.67%, #ac48c3 33.33%, #d64d9e 50.00%, #f15d72 66.67%, #fc7a42 83.33%, #f59e0b 100.00%);

CSS variables

:root {
  --mix-1: #1d4ed8;
  --mix-2: #7548d9;
  --mix-3: #ac48c3;
  --mix-4: #d64d9e;
  --mix-5: #f15d72;
  --mix-6: #fc7a42;
  --mix-7: #f59e0b;
}

CSV export

step, position, hex, rgb. Drop into a spreadsheet or design doc.

step,position,hex,rgb
1,0.00%,#1d4ed8,"rgb(29, 78, 216)"
2,16.67%,#7548d9,"rgb(117, 72, 217)"
3,33.33%,#ac48c3,"rgb(172, 72, 195)"
4,50.00%,#d64d9e,"rgb(214, 77, 158)"
5,66.67%,#f15d72,"rgb(241, 93, 114)"
6,83.33%,#fc7a42,"rgb(252, 122, 66)"
7,100.00%,#f59e0b,"rgb(245, 158, 11)"

How to use

Type a 3 or 6 digit hex value into the Color A and Color B inputs, or use the native color picker next to each one.
Pick a blend space (OKLCH for perceptual midpoints, LAB for clean ramps, HSL for hue-driven blends, or sRGB for the naive channel blend).
For HSL or OKLCH, choose a Shorter or Longer hue arc when the two colors live on opposite sides of the color wheel.
Set Steps from 3 to 13 to control how many colors appear in the strip, then read each swatch with its hex, rgb, and percent position from A.
Use Copy hex on any swatch, Copy gradient for a CSS linear-gradient, Copy variables for a :root block, or Copy CSV to export the full ramp.

About this tool

Color Mixer blends any two colors and produces a smooth strip of intermediate steps you can copy directly into a stylesheet, design tool, or design tokens file. Pick Color A and Color B by typing a 3 or 6 digit hex value or using the native color picker on either side, then choose how you want the colors mixed: OKLCH (perceptually uniform; the cleanest midpoints for design work and the default), CIE LAB (the classic perceptual blend), HSL (interpolates hue, saturation, and lightness; vibrant but not perceptually flat), or sRGB (the simple channel-wise blend most naive lerp libraries do). For HSL and OKLCH the tool exposes a hue arc control so you can take the shorter way around the color wheel for a clean fade or the longer way for a rainbow ramp through the opposite hue. A steps slider builds a palette of 3 to 13 colors evenly spaced between the two endpoints, each rendered as a swatch with its hex value, its rgb() form, the percent position from A to B, and a copy button. A separate pinpoint blend slider lets you read the exact color at any single percentage between the two inputs (for example, the color one third of the way from A to B), with its own swatch and copy controls. The tool also outputs a copy-ready CSS linear-gradient covering all stops, a CSS custom-properties block (--mix-1 through --mix-N) ready to paste into a :root rule, and a CSV (step, position, hex, rgb) for spreadsheets and design docs. Useful for designers building light-to-dark ramps from brand colors, frontend engineers generating design tokens between two anchor shades, illustrators looking for the color halfway between two paints, learners studying how different color spaces produce different intermediate hues, and anyone who needs a quick perceptual midpoint between two colors instead of an ugly muddy gray. All math runs locally on your device with the OKLCH, LAB, HSL, and sRGB transforms wired into the source: the colors you blend here never leave your browser.

Free to use. Works in your browser. No signup, no login.

Related tools

Color Mixer

How to use

About this tool

You may also like

Color Format Converter

Color Palette Generator

CSS Gradient Generator

Color Contrast Checker

HEX to RGB Converter