YouTipMixed in sRGB
Mixed in LCH
70% Blue / 30% Yellow
```
```css
.box {
width: 200px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
color: white;
font-weight: bold;
}
/* Mix Blue and Yellow in sRGB space (results in a muted green/gray) */
.mix-srgb {
background-color: color-mix(in srgb, blue, yellow);
}
/* Mix Blue and Yellow in LCH space (results in a vibrant green) */
.mix-lch {
background-color: color-mix(in lch, blue, yellow);
}
/* Mix with custom weights (70% blue, 30% yellow) */
.mix-weighted {
background-color: color-mix(in srgb, blue 70%, yellow);
}
```
---
### Example 2: JavaScript Programmatic Color Mixer
If you need to mix colors dynamically on the client side (e.g., in a canvas application or a dynamic theme generator), you can implement a linear interpolation (LERP) mixer in JavaScript.
Below is an implementation of an RGB color mixer:
```javascript
/**
* Mixes two hex colors together based on a weight.
* @param {string} color1 - The first hex color (e.g., "#ff0000")
* @param {string} color2 - The second hex color (e.g., "#0000ff")
* @param {number} weight - The blend factor between 0 and 1 (0.5 is an equal mix)
* @returns {string} The mixed hex color
*/
function mixColors(color1, color2, weight = 0.5) {
// Helper to convert hex to RGB object
const hexToRgb = (hex) => {
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
const fullHex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(fullHex);
return result ? {
r: parseInt(result, 16),
g: parseInt(result, 16),
b: parseInt(result, 16)
} : null;
};
// Helper to convert component to hex string
const componentToHex = (c) => {
const hex = Math.round(c).toString(16);
return hex.length === 1 ? "0" + hex : hex;
};
const rgb1 = hexToRgb(color1);
const rgb2 = hexToRgb(color2);
if (!rgb1 || !rgb2) return '#000000';
// Linear interpolation (LERP) between the two colors
const r = rgb1.r * (1 - weight) + rgb2.r * weight;
const g = rgb1.g * (1 - weight) + rgb2.g * weight;
const b = rgb1.b * (1 - weight) + rgb2.b * weight;
return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
}
// Usage Example:
const red = "#FF0000";
const blue = "#0000FF";
// Mix 50% Red and 50% Blue (Purple)
console.log(mixColors(red, blue, 0.5)); // Output: "#800080"
// Mix 20% Red and 80% Blue
console.log(mixColors(red, blue, 0.8)); // Output: "#3300cc"
```
---
### Example 3: Sass (SCSS) Compile-Time Mixing
For static stylesheets where colors are determined during the build process, Sass provides an elegant solution.
```scss
$primary-color: #3498db; // Blue
$alert-color: #e74c3c; // Red
// Mix 50% primary and 50% alert
.button-warning {
background-color: mix($primary-color, $alert-color);
}
// Mix 80% primary and 20% alert for a subtle hover state
.button-hover {
background-color: mix($primary-color, $alert-color, 80%);
}
```
---
## Considerations & Best Practices
### 1. Choosing the Right Color Space
When using CSS `color-mix()`, the choice of color space dramatically affects the output:
* **`srgb`**: The standard web color space. Mixing colors here can sometimes result in muddy or gray transitions (especially when mixing complementary colors like blue and yellow).
* **`lch` and `lab`**: These are perceptually uniform color spaces. Mixing colors in `lch` preserves brightness and saturation much better, resulting in more vibrant and natural-looking gradients and mixtures.
### 2. Browser Support
* **CSS `color-mix()`** is widely supported in all modern evergreen browsers (Chrome 111+, Safari 16.2+, Firefox 113+).
* If you must support legacy browsers (like Internet Explorer), perform color mixing at build time using Sass/PostCSS, or use a JavaScript fallback.
### 3. Accessibility (WCAG)
When mixing colors dynamically to generate UI elements (such as text on a mixed background), always verify that the contrast ratio between the foreground and background meets WCAG AA guidelines (at least 4.5:1 for normal text).