Color & Typography
Color Mixer
Blend two colors, then turn the result into design-system tints, shades, UI states,
palettes and transparency steps. Copy HEX, RGB, HSL or a ready-to-paste
color-mix() value — everything runs in your browser.
Workflow
Manual mixBlend two colors by percentage. The ramp shows the full range from color A to color B.
Colors & mix
sRGB
Hex, rgb(), rgba(), hsl(), or a common color name.
Alpha is mixed too; use rgba() or hsl() to try transparent colors.
0% uses only color A, 100% uses only color B.
Advanced — interpolation space
sRGB matches color-mix(in srgb, ...). Oklab and Oklch often produce more even
perceptual ramps. Results that fall outside sRGB are clamped, and the CSS output matches
the selected space.
Result
live- HEX
—- RGB
—- HSL
—- CSS
—
Ramp
How it works
Each result is interpolated channel by channel — A × (1 - mix) + B × mix
— in the space you choose. sRGB matches color-mix(in srgb, ...); Oklab and Oklch
interpolate perceptually and are converted back to sRGB, clamping anything outside the gamut. The mix
percentage is the share of color B, so 0% returns color A and 100% returns
color B. Click any ramp swatch to select it and copy its value, and share the whole setup through the
page URL. Everything runs in your browser.