Como usar: Color Mixer
- Enter or pick Color A and Color B.
- Choose how many steps you want (including both ends).
- Pick an interpolation space — OKLab gives the smoothest, most even blend.
- Click a swatch to copy one color, or copy the full set as CSS variables,
color-mix()or JSON.
What does a color mixer do?
It calculates evenly spaced colors between two endpoints. With 5 steps between blue and amber you get blue, three transitional colors and amber — useful for multi-stop gradients, data-visualization scales, progress indicators, subtle borders between two surface colors and themed hover states.
Why the interpolation space matters
| Space | Result | Best for |
|---|---|---|
| OKLab | Perceptually even steps, no muddy middle | Most UI work, gradients, chart scales |
| OKLCH | Travels around the hue wheel, keeps colors vivid | Rainbow-like and brand gradients |
| sRGB | The classic browser default; mid-points can turn gray or dark | Matching legacy designs |
| Linear sRGB | Physically correct light mixing, brighter mid-points | Simulating real light blending |
| HSL | Hue-based, uneven perceived lightness | Quick hue sweeps |
Mixing complementary colors like blue and yellow in sRGB produces a dull gray in the middle; OKLab keeps the transition clean. That is why modern CSS lets you choose the space explicitly.
Mixing colors in native CSS
All current browsers support color-mix() and interpolation hints in gradients, so you can often skip hard-coded values entirely:
.border { border-color: color-mix(in oklab, var(--surface), var(--text) 15%); }
.hero { background: linear-gradient(in oklch 90deg, #2563eb, #f59e0b); }Generated steps are still handy for design tools, email templates, charts drawn in canvas/SVG and anywhere CSS functions aren’t available. To build a full light-to-dark scale from one color, use the Tailwind Color Generator; for gradient code with multiple stops, the CSS Gradient Generator.
Também pesquisado como: blend colors, color interpolation, color steps, color-mix, gradient steps, mix two colors.
Ferramentas que combinam com: Color Mixer
- OKLCH Color Converter — Explore the perceptually uniform OKLCH color space with live sliders, see whether a color fits in sRGB, and copy matching HEX, RGB and HSL fallbacks.
- Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- Color Name Finder — Paste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
- HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.
Perguntas frequentes
Which interpolation should I use?
Are the end colors included in the step count?
What is color-mix() in CSS?
color-mix(in oklab, red, blue 30%) blends two colors in the browser. It is supported in all current browsers and works with CSS variables, so mixes update automatically with your theme.