Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.
Pass a background to contrast-color() and it hands back black or white, whichever stays readable on it. The four swatches and every step of the ramp below carry the same one-line declaration — no colour was paired by hand, and none was measured. The ramp is there to find the seam: somewhere along it the label flips, and the browser decides where.
Mixing two colours used to mean a preprocessor function or hand-computed hex values. color-mix() does it in the browser: name a colour space, two colours, and how much of the first one you want. Drag the slider and watch the result bar and the declaration change together — the bar's background is the very color-mix() call printed underneath it.
This demo illustrates how a color picker's saturation/brightness square and hue strip can be constructed using layered CSS gradients. Drag the circular selectors to change the hue, saturation, and brightness, seeing the resulting color instantly.
This demo illustrates how to create accessible status indicators by toning down pure hues and combining color with clear text labels and icons. Colors are derived from HSL custom properties for backgrounds, borders, and text to ensure readability and semantic clarity.