Two-Color Ramp Mixer

What it is for

A ramp is a row of colors that step evenly from one color to another: shading for a pixel sprite, the tones of a sky, or a set of matching UI accents. Picking the middle shades by eye is slow and rarely even. This mixer takes two HEX colors and a count, and calculates every step in between, including both endpoints.

You choose how the colors are mixed. sRGB channels averages the stored red, green and blue values directly. Linear light first converts them to physical light intensity, mixes there and converts back, which usually gives brighter, less muddy middle shades. The result comes as a table and as palette files for Flipline's Pixel Studio and Retro Lab, Lumina Palette Studio, GIMP and CSS. It is an additive color blend, not a simulation of mixing real paint.

Worked example

I wanted five shades from a deep navy #1D3557 to a warm orange #F4A261.

With sRGB channels the tool returned "5 mixed colors with both endpoints." and this ramp:

The linear-light column comes from a second run with the same colors. The endpoints are identical, but the middle is clearly different: the sRGB midpoint #896C5C is a dull brown, while the linear-light midpoint #B47B5C is lighter and warmer. Neither is "wrong"; they are two ways of defining halfway.

The built-in black-to-white example shows the effect most clearly: three colors in linear light give #BCBCBC as the middle, not #808080, because half the light of white looks much brighter than the stored value 128.

How to read the result

• Mixed color ramp table: the position, how far along the ramp it is (0–100 %) and the HEX code.
• HEX ramp: one color per line, ready to import into Pixel Studio, Retro Lab or Lumina.
• GIMP GPL ramp: a GIMP palette named "Mixed colors" with RGB values.
• JASC-PAL ramp: the text palette format read by many pixel-art tools.
• CSS ramp: custom properties --mix-1 to --mix-n in a :root block.

All four downloads keep the same order, and duplicate colors are kept.

Tips and common mistakes

• Enter six-digit HEX codes with #. Short forms like #FFF and names like navy are rejected.
• For shading and lighting, try linear light first; for flat UI scales that should match a design file, sRGB is closer to what most design tools do.
• Count includes both endpoints. Five colors means three new shades in between.
• Mixing complementary colors (blue to orange) gives greyish middles in both modes. Insert a third color by making two ramps, such as navy to violet and violet to orange.
• In Flipline's drawing board, Mix opens the same ramp and lets you pick a swatch as the ink color directly.

FAQ

Why do linear-light ramps look brighter in the middle?

Screens store colors with a gamma curve. Linear light undoes the curve before mixing, so halfway means half the light, which our eyes see as fairly bright.

Is this how paint mixes?

No. Blue and yellow paint make green; additive mixing of #0000FF and #FFFF00 gives grey. The tool interpolates light, not pigment.

How many colors can one ramp have?

Between 2 and 24, including both endpoints.

Does the tool support transparency?

No. Colors are opaque eight-bit RGB values.