FREE BROWSER TOOLContent creation

Two-Color Palette Mixer

Pick the two ends of a gradient to build a color ramp for digital shading, illustration or a web theme. Copy the resulting hex codes straight into a stylesheet.

Calculations run in your browser. No account or API key is needed.

Your result

Edit inputs

#284B91
#77708D
#9F8A89
#BD9F85
#D6B181
#ECC17D
#FFCF78

Palette size: 7
CSS interpolation space: srgb-linear

:root {
  --palette-1: #284B91;
  --palette-2: #77708D;
  --palette-3: #9F8A89;
  --palette-4: #BD9F85;
  --palette-5: #D6B181;
  --palette-6: #ECC17D;
  --palette-7: #FFCF78;
}

How to use this tool

Choose the starting and ending screen colors.
Select 3 to 12 stops and the color space used to mix them.
Update the palette, then copy the CSS variables to apply individual swatches.

Choose the midpoint you want

Encoded sRGB averages the stored red, green and blue component values. Linear-light sRGB converts those values to relative light intensity before mixing. Try black and white with three stops. The middle hex code is #808080 in encoded sRGB and #BCBCBC in linear-light sRGB.

Use the swatches in a drawing

Choose two colors from the light and shadow sides of a subject. Start with five stops for broad shapes and increase the count to subdivide a transition. The endpoints stay in place as the number of intermediate swatches changes.

Common questions

Why do two steps have the same hex code?

Each channel is rounded to one of 256 possible values for hex output. Closely spaced endpoints can share the same rounded swatch at several stops.

Can I use the percentages for mixing paint?

These steps describe screen colors in the sRGB color space. Pigment mixtures depend on the paints, binder and surface. Test a physical paint mixture on the intended surface.

Make it yours