Color Mixer
This color mixer blends two colors and shows the result at once as HEX, RGB and HSL. You can also lighten, darken or tone down a color and create a gradient with up to 15 steps.
Source: CSS Color 5, W3C – CSS Color Module Level 5: color-mix(). Updated: .
How it is calculated
The tool mixes screen colors, that is, light values – not paint made of pigments. That is why red and blue give purple (#800080), while blue and yellow give a neutral gray and not green as with watercolors.
How the mixing works
An in-between value is calculated for each color channel. The mixing space decides how exactly:
- sRGB: the simple average of the channel values – this is also how CSS mixes by default and how most graphics programs calculate.
- Linear light: mixes in physical amounts of light. The result is brighter and matches what two overlapping light sources really produce.
- Oklab: a perceptual color space. Gradients look more even, without a gray middle between vivid colors.
Lighten, darken, tone down
Mixing a color with white lightens it (a tint); with black it gets darker (a shade), with gray more muted (a tone). The percentage sets the strength, and the steps give you a whole series – handy for hover states or color scales.
The color-mix() expression can be copied straight into a stylesheet. Matching palettes come from the color palette generator, formats are converted by the color converter, and the contrast checker tells you whether text stays readable.
Frequently asked questions
What do blue and yellow make when mixed?
On a screen a neutral gray (the sRGB average #808080), because light colors are being mixed. With watercolor or acrylic paint blue and yellow make green, since pigments work subtractively.
How do I mix two colors in equal parts?
Enter both colors and leave the share of the second color at 50%. For one third of color 2, enter 33.
How can I lighten or darken a color?
Choose “Lighten a color” or “Darken a color” above and adjust the percentage: at 20% white the color gets a little lighter, at 80% it is almost white.
Which mixing space should I pick?
sRGB matches the default behavior of CSS and most programs. Oklab gives more even gradients, and linear light matches overlapping light sources.
How do I use the result in CSS?
Copy the value under “CSS (color-mix)” and use it as a color in any modern browser, or just take the HEX value.
Sources and legal basis
- CSS Color 5: W3C – CSS Color Module Level 5: color-mix()
- Björn Ottosson – A perceptual color space for image processing (Oklab)
- CSS Color 4: W3C – CSS Color Module Level 4: sRGB transfer function and linear light
As of: · Editorial policy
Related tools
- Color palette generatorBuild matching colors from one base color: complementary, analogous, triadic, square, split-complementary or monochrome – with HEX, RGB and HSL values.
- Color converter: HEX, RGB, HSL, HSV, CMYKConvert color codes: HEX to RGB, RGB to HEX, HSL, HSV, HWB and CMYK – type any format or use the color picker and copy the result, right in your browser.
- Color contrast checker (WCAG 2.2)Check the contrast between text and background colors: WCAG 2.2 contrast ratio with AA/AAA ratings for normal text, large text and UI components.
- Color picker from image (eyedropper)Get color codes from any image: open a photo, click a spot and copy the HEX, RGB or HSL value – plus the main colors. No upload, it all stays in your browser.
- BMI calculator (WHO categories)BMI calculator in lb and ft/in or kg and cm: your body mass index with WHO category on a colour scale, healthy weight range for your height and BMI Prime.
- Caffeine calculatorCaffeine calculator: add up coffee, espresso, tea, cola, energy drinks and chocolate and compare with the EFSA safe levels – 400 mg a day, 200 mg in pregnancy.
- Batting average calculatorBatting average calculator with OBP, slugging and OPS, plus ERA and WHIP for pitchers – using the formulas of Rule 9.21 of the Official Baseball Rules.
- School backpack weight calculatorBackpack weight calculator for kids: what percent of body weight the school bag is, and the most it should weigh at 10 % and at the 15 % limit of the AAP.
- A1C calculator: convert A1C and average glucoseA1C calculator: convert A1C % to estimated average glucose (eAG) in mg/dL and mmol/L, to IFCC mmol/mol, or work back from your average blood sugar.