Dive deep into the CSS color-mix() function in this comprehensive 18-minute video tutorial. Explore the basics of color mixing, learn to manipulate percentages, and understand the behavior when total percentages fall below 100%. Discover how different color models work, including RGB, lab, oklab, lch, and oklch. Uncover the surprising concept of mixing colors in various directions and see practical examples of creating color schemes using color-mix(). Gain insights into browser support, access helpful resources, and follow along with provided code examples to enhance your CSS color manipulation skills.
Overview
Syllabus
- Introduction
- The very basics
- Mixing specific percentages of each color
- When the percentages don’t equal 100%
- The color models
- lab, oklab, lch, and oklch
- mixing colors in different directions
- Creating a color scheme with color-mix
Taught by
Kevin Powell
