Color Mixer: Blend Two Hex Colors

How to use the color mixer

1. Enter the first hex color code in Color A. You can use 3-digit shorthand like F00 or full 6-digit codes like #FF0000.
2. Enter the second hex color in Color B.
3. Set the Ratio slider or number field. This controls how much of Color B appears in the final blend (0 means pure A, 100 means pure B).
4. Choose a Blend space: sRGB for standard CSS mixing, or Linear light to mix as physical light intensity (midpoints come out brighter).
5. Read the mixed hex, rgb() and hsl() values below, along with a five-step gradient table.

How sRGB blending works

In sRGB mode the color mixer interpolates each channel independently using the formula C = round(A + (B - A) * t), where t is the ratio divided by 100. For example, mixing #FF0000 (red) and #0000FF (blue) at 50 percent gives red = round(255 + (0 - 255) * 0.5) = 128, green = 0, blue = 128, which is #800080. Rounding uses half-up so 127.5 becomes 128.

This approach matches how most CSS tools and image editors blend colors by default. It is fast, but sRGB values are gamma-encoded rather than proportional to actual light intensity, so the result is not a physical light mix. Neither mode is perceptually uniform; for that you would need a space such as OKLab or OKLCH.

Why linear light blending matters

sRGB stores colors with a gamma curve that compresses dark tones. Blending the encoded values directly is not what happens when two lights of different colors actually add together. Linear light blending converts each channel to linear intensity before mixing, which models physical light mixing and is the correct basis for things like resizing images or simulating overlapping light sources. It does not make the result perceptually even: the midpoints it produces usually look brighter than the plain sRGB average.

The conversion from an sRGB channel value c (scaled 0 to 1) to linear follows the sRGB transfer function: if c is 0.04045 or less, linear = c / 12.92; otherwise linear = ((c + 0.055) / 1.055)^2.4. After interpolation the result is converted back using the inverse function. Mixing black (#000000) and white (#FFFFFF) at 50 percent in linear light yields approximately #BCBCBC instead of the sRGB midpoint #808080, because a linear value of 0.5 maps back to an sRGB value near 0.735, which rounds to 188 (hex BC).

Common blend reference table

Use this table as a quick reference when you mix colors in sRGB mode at a 50 percent ratio.

Practical uses for a color mixer

Designers use a color mixer online to generate palette variations, create smooth gradients and check contrast between blended shades. Developers building themes often need to derive hover states or disabled colors by blending a base color toward white or black at a fixed ratio.

When you mix hex colors for gradients, compare both modes. Linear light blending keeps the physical intensity consistent and avoids the dark, muddy band that sRGB can show between saturated colors, but it brightens midpoints, and its steps are not perceptually even. For UI components like progress bars or overlays, sRGB blending is usually preferred because it matches how browsers render CSS gradients and transitions natively.

Handling hex formats and edge cases

This tool accepts 3-digit and 6-digit hex codes with or without the leading hash symbol. Hex codes with an alpha channel (4 or 8 digits) are not supported and are rejected. A 3-digit code like #F00 is expanded to #FF0000 by doubling each character. Invalid characters or wrong-length strings produce a clear error message.

A ratio of exactly 0 always returns Color A unchanged, and 100 returns Color B. Values outside the 0 to 100 range are rejected. The output includes the mixed hex code alongside rgb() and hsl() representations so you can paste the result directly into CSS. If you also need to pick a starting color visually, try the color picker to grab a hex code first.

Worked examples