The color-mix function is one of the new features in CSS that helps web developers create colors more accurately by mixing them together. This capability, particularly advantageous in the context of vibrant new color scales, allows you to create new color ranges based on existing colors, without the need to use external tools.
Instead of manually calculating color values (like RGB or HSL), you can use color-mix to create intermixed colors or even a complete combination of two colors.
This function structurally resembles many other functions in CSS, and you can define parameters to tell CSS how colors should combine. For example, if you want to mix two base colors with different proportions, color-mix is precisely designed for this task.
Let's begin with a simple example of how we can mix blue and yellow colors using color-mix to achieve a green shade. Also, note that some browsers may not yet support this feature, so you should use it with specific preconditions.
Example Usage of color-mix
div {
color: color-mix(in srgb, blue 50%, yellow 50%);
}
Explanation Line by Line:
div: defines the style to be applied to the div tags in HTML.
color: this property specifies the color value of the element.
color-mix: a function for mixing two specific colors.
in srgb: the color space in which the mixing occurs. Here, it’s srgb, the standard color space for the web.
blue 50%: specifies that 50% of the blue color will be present in the mixture.
yellow 50%: specifies that 50% of the yellow color will be present in the mixture.