Here we explore the latest advancements in CSS colors, offering more intuitive and powerful ways to manage your color palettes. These modern features allow for dynamic color manipulation, improved accessibility, and access to a wider range of colors.
color-mix(): Blending colors
The color-mix() function in CSS provides a way to mix two colors together in a specified color space. This function takes the color space for mixing, the two colors to be mixed, and optional percentages for how much of each color to include.
Example 1: Basic Color Mixing
/* style.css */
.element {
/* Mixes 50% of blue and 50% of red in the sRGB color space */
background-color: color-mix(in srgb, blue, red);
}
Explanation
This code snippet sets the background color of .element to a purple hue. The color-mix() function blends equal parts of blue and red within the standard srgb color space, resulting in a predictable mix.
Example 2: Mixing with Percentages
/* style.css */
.button-primary {
/* Creates a lighter shade of blue by mixing it with white */
background-color: color-mix(in srgb, blue 80%, white 20%);
}
Explanation
Here, color-mix() is used to create a tint of blue. By mixing 80% blue with 20% white, we achieve a lighter, less saturated version of the original blue, perfect for UI elements like buttons.
Example 3: Mixing in a Different Color Space
/* style.css */
.vibrant-mix {
/* Mixes hotpink and yellow in the LCH color space for a more vibrant result */
background-color: color-mix(in lch, hotpink, yellow);
}
Explanation
This example demonstrates mixing colors in the lch color space. Mixing in perceptually uniform color spaces like LCH often produces more vibrant and visually appealing results than srgb.
lch(), lab(), hwb(): Perceptually uniform color spaces
These color models provide more intuitive ways to define colors based on human perception. LCH stands for Lightness, Chroma, and Hue, LAB for Lightness, 'a' axis (green to red), and 'b' axis (blue to yellow), and HWB for Hue, Whiteness, and Blackness.
Example 1: Using lch() for Perceptual Lightness
/* style.css */
.card {
/* A card with a specific lightness, chroma, and hue */
background-color: lch(50% 100 250);
}
Explanation
The lch() function is used to set a background color with 50% lightness, a chroma (saturation) of 100, and a hue of 250 degrees. This allows for precise control over the perceived brightness of the color.
Example 2: Using lab() for a Wide Gamut Color
/* style.css */
.highlight {
/* A vibrant green color defined in the LAB color space */
color: lab(80% -80 90);
}
Explanation
The lab() color space can represent a wider range of colors than sRGB. In this example, we define a vivid green that might be outside the standard sRGB gamut, making it appear more vibrant on compatible displays.
Example 3: Using hwb() for Intuitive Shades
/* style.css */
.alert-box {
/* A red alert box created with a specific hue, and a mix of whiteness and blackness */
background-color: hwb(0 10% 10%);
}
Explanation
hwb() allows for an intuitive way to create tints and shades. Here, we start with a red hue (0 degrees) and add 10% whiteness and 10% blackness to achieve the desired shade.
color-contrast(): Ensuring accessibility
The color-contrast() function is a powerful tool for maintaining accessible color combinations in web design. It automatically selects the most readable color from a list to be placed against a base color.
Example 1: Basic Text Color Selection
/* style.css */
.container {
background-color: #333;
/* Automatically chooses white for the best contrast against the dark background */
color: color-contrast(#333 vs white, black);
}
Explanation
This code ensures the text inside .container is always readable. The color-contrast() function compares the background color #333 with white and black, and selects white as it provides the highest contrast.
Example 2: Dynamic Theming
/* style.css */
:root {
--theme-color: #f0f0f0;
}
.themed-text {
background-color: var(--theme-color);
/* The text color will be black or a dark gray to contrast with the light theme color */
color: color-contrast(var(--theme-color) vs #222, #fff);
}
Explanation
This example showcases how color-contrast() can be used in dynamic theming. The text color will automatically adjust to a readable option if the --theme-color variable is changed to a different light or dark color.
Example 3: Finding the Best Contrast from a List
/* style.css */
.colorful-section {
background-color: cornflowerblue;
/* Selects the color with the best contrast from a list of colors */
color: color-contrast(cornflowerblue vs navy, teal, maroon, white);
}
Explanation
The color-contrast() function can evaluate a list of colors and pick the one with the best contrast ratio. In this case, white would likely be chosen as the text color against the cornflowerblue background for optimal readability.
Relative Colors: Defining variations based on a base color
Relative color syntax allows you to create new colors by modifying the channels of an existing color. This is incredibly useful for creating color palettes and states like hover or focus.
Example 1: Modifying Opacity
/* style.css */
:root {
--brand-color: oklch(65% 0.25 250);
}
.overlay {
/* Creates a semi-transparent version of the brand color */
background-color: oklch(from var(--brand-color) l c h / 0.5);
}
Explanation
This code defines a brand color using oklch. The .overlay class then uses the from keyword to create a new color based on --brand-color, keeping the lightness, chroma, and hue the same but setting the alpha channel to 0.5.
Example 2: Creating a Hover Effect
/* style.css */
:root {
--base-color: #4a90e2;
}
.interactive-button {
background-color: var(--base-color);
transition: background-color 0.3s ease;
}
.interactive-button:hover {
/* Lightens the base color on hover by increasing the lightness channel */
background-color: hsl(from var(--base-color) h s calc(l + 10%));
}
Explanation
Here, a hover effect is created by taking the --base-color and increasing its lightness by 10% using the calc() function within the hsl() color model. This provides a consistent and dynamic way to generate interactive states.
Example 3: Adjusting Hue for Thematic Variations
/* style.css */
:root {
--primary-accent: lch(70 80 260);
}
.secondary-accent {
/* Creates a secondary accent color by rotating the hue of the primary accent */
background-color: lch(from var(--primary-accent) l c calc(h + 120));
}
Explanation
This example demonstrates how to create a harmonious color palette. A secondary accent color is generated by taking the --primary-accent and rotating its hue by 120 degrees, resulting in a thematically related yet distinct color.