CSS color-mix() Generator
Generate CSS color-mix() functions to blend two colors in sRGB, OKLab, OKLCH, HSL, and more. Live preview, percentage slider, and copy-ready CSS. 100% client-side.
Loading tool...
What is CSS color-mix() Generator?
The CSS color-mix() Generator blends two colors into a single CSS color-mix() function using the color space of your choice. The CSS color-mix() function, supported in all modern browsers, interpolates between two colors so you can create tints, shades, and perceptually smooth blends without pre-computing hex values. This tool gives you a live preview and copy-ready code with a percentage slider that controls the weight of each color.
Key Benefits
- Live preview of the blended result rendered with the real color-mix() value
- Twelve color spaces including OKLab, OKLCH, sRGB, and display-p3
- Percentage slider that normalizes both weights so output always sums to 100
- Native color pickers plus manual hex entry for precise control
- 100% client-side - works offline and keeps colors private
Common Use Cases
- •Generating tints and shades of a brand color without a preprocessor
- •Building perceptually uniform hover or focus states with OKLab mixing
- •Creating accessible color steps between a background and text color
- •Prototyping gradient endpoints before committing to a full gradient
How to Generate a CSS color-mix()
- Pick the two colors: Use the native color pickers or type a hex value (#ff6347) for Color 1 and Color 2. Invalid hex shows a hint.
- Choose a color space: Select an interpolation space such as oklab (perceptually uniform), srgb, or oklch from the dropdown.
- Set the mix ratio: Drag the slider to choose how much of Color 1 to use. The complementary percentage of Color 2 is filled in automatically.
- Copy the CSS: Read the generated color-mix(in <space>, ... ) declaration and click Copy to paste it into your stylesheet.
Key Features
- Native HTML color pickers plus manual hex entry for both input colors.
- Twelve interpolation color spaces including OKLab, OKLCH, sRGB, and display-p3.
- Live blended preview swatch rendered with the actual color-mix() value.
- 0-100% mix slider with normalized output percentages that always sum to 100.
- One-click copy of the final color-mix() declaration for any use case.