Color Blender Tool
Mix two colors together to create blends and transitions. Generate intermediate colors between any two colors for smooth gradients and harmonious palettes.
How Color Blending Works
Colors are blended by interpolating between RGB values:
| Start Color | End Color | 50% Blend |
|---|---|---|
| #FF0000 (Red) | #0000FF (Blue) | #800080 (Purple) |
| #FFFFFF (White) | #000000 (Black) | #808080 (Gray) |
Blending Steps
Generate multiple intermediate colors:
``
Start: #FF0000 (Red)
25%: #BF003F
50%: #80007F
75%: #4000BF
End: #0000FF (Blue)
`
Use Cases
| Application | Use |
|---|---|
| Gradient creation | Smooth color transitions |
| Palette expansion | Fill gaps between colors |
| Color mixing | Predict blended results |
| UI design | Create hover states |
Blend Percentages
| Percentage | Result |
|---|---|
| 0% | Original color 1 |
| 50% | Equal mix |
| 100% | Original color 2 |
Create smooth transitions between any two colors.How Blending Works
Mixing two colours means interpolating each channel. In sRGB that is a straight linear
mix, which is fast and occasionally ugly: blending blue and yellow in sRGB passes through
grey rather than green, because sRGB is not perceptually uniform.
`javascript
const mix = (a, b, w) => a + (b - a) * w; // per channel
`
CSS now does this for you, and in a better colour space:
`css
background: color-mix(in oklab, var(--brand) 60%, white);
`
oklab and oklch are perceptually uniform, so a 50% mix looks like the midpoint. Use
them where support allows and keep sRGB as the fallback.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.