Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
Color Mixer
Blend two colors by ratio and read the result in HEX, RGB and HSL.
Tool Panel
About Color Mixer
Blends two colours linearly in sRGB and shows the result as HEX, RGB and HSL, each one click away from the clipboard.
- 1
Linear interpolation in RGB: each channel is weighted and summed (0% is A, 100% is B), updating live with both HEX and HSL shown.
- 2
Because mixing happens in RGB rather than Lab or OKLab, the same pair differs slightly from a design tool mix — those usually blend in a perceptually uniform space, producing a lighter midpoint.
- 3
The ratio is an exact weight, not a layer stack: 50% is equal weighting, not B at 50% opacity over A.
- 1
Pick two colours
A contrasting pair is preselected; click either swatch to change it.
- 2
Drag the slider
The left percentage is A weight, the right is B.
- 3
Copy the result
Both HEX and HSL are copyable and ready for CSS.
Different blend space. This mixes linearly in RGB while design tools typically use Lab or OKLab, which keeps midpoints lighter and preserves saturation better. Match their result by computing in the same space.
No. Here the two colours are weighted and summed; alpha compositing also involves what shows through and the backdrop, so the two only converge when A is opaque and the backdrop is B.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools