color-mix() and relative color syntax
Blend colors together and create color variations using modern CSS color functions.
color-mix() and relative color syntax is a free CSS Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
color-mix() Function
color-mix() blends two colors together in a specified color space. It enables design token–driven color variations without Sass or JavaScript.
.button-hover {
background: color-mix(in oklch, royalblue 80%, black 20%);
/* 80% royalblue mixed with 20% black */
}color-mix() Syntax
Full syntax: color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage]). Percentages must sum to 100%.
/* Mix equally */
color-mix(in srgb, red, blue);
/* 50% red + 50% blue */
/* Weighted mix */
color-mix(in oklch, white 30%, navy 70%);Color Spaces in color-mix()
The color space affects the blending result. Modern perceptual spaces like oklch produce more visually uniform results than srgb:
/* OKLCH blending (perceptually uniform) */
color-mix(in oklch, royalblue, white);
/* sRGB blending (can produce muddy middle colors) */
color-mix(in srgb, royalblue, white);Generating Color Scales with color-mix()
Create a consistent color palette from a single brand color:
:root {
--brand: royalblue;
--brand-100: color-mix(in oklch, var(--brand) 10%, white);
--brand-300: color-mix(in oklch, var(--brand) 30%, white);
--brand-700: color-mix(in oklch, var(--brand) 70%, black);
--brand-900: color-mix(in oklch, var(--brand) 90%, black);
}Relative Color Syntax
Relative colors let you derive a new color from an existing color by modifying specific channels. Use from keyword:
/* oklch(from royalblue l c h) — same as royalblue */
/* Modify specific channels: */
color: oklch(from royalblue calc(l - 0.2) c h); /* 20% darker */
color: oklch(from royalblue l calc(c * 0.5) h); /* half saturation */Transparent Variant with Relative Color
Create a transparent version of a brand color without knowing its RGB values:
:root { --brand: royalblue; }
.overlay {
background: oklch(from var(--brand) l c h / 50%);
/* 50% transparent version of --brand */
}Lightening and Darkening
Add or subtract lightness in oklch to create tints and shades:
.card {
--base: hsl(220, 70%, 50%);
background: oklch(from var(--base) calc(l + 0.2) c h); /* lighter */
}
.card:hover {
background: oklch(from var(--base) calc(l - 0.1) c h); /* darker */
}oklch Color Space Overview
OKLCH is a perceptually uniform color space:
l— lightness (0 to 1)c— chroma/saturation (0 to 0.4+)h— hue angle (0 to 360)
Adjusting l gives predictably uniform tints/shades.
Browser Support
color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+. Relative color syntax (from keyword) is in Chrome 119+, Safari 16.4+, Firefox 128+. Check caniuse.com for current support.
color-contrast() Future
color-contrast() is a proposed function that automatically picks the most readable color (from a list) against a given background. Not yet in browsers but designed for accessibility-driven theming.
Quick Check
Which color-mix() color space produces the most perceptually uniform blending results?
Recap
color-mix(in oklch, color1 %, color2 %) blends colors in a specified space — ideal for tints, shades, and transparent variants from a single brand color. Relative color syntax (oklch(from var(--brand) calc(l+0.2) c h)) derives new colors by modifying individual channels. OKLCH is the best color space for perceptually uniform results.
Frequently asked questions
Is the “color-mix() and relative color syntax” lesson free?
Yes — the full text of “color-mix() and relative color syntax” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “color-mix() and relative color syntax”?
Blend colors together and create color variations using modern CSS color functions. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “color-mix() and relative color syntax” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- calc() for Dynamic Calculations
- min() max() and clamp() for Fluid Values
- repeat() and minmax() in Grid
- color-mix() and relative color syntax