Lesson 3

CSS Value Functions

CSS has a family of functions you can use inside property values to compute results at runtime. You've certainly seen calc(), but the full set - min(), max(), clamp(), and color-mix() - lets you build responsive, flexible designs that adapt without media queries.

calc() - arithmetic in CSS

calc() evaluates a mathematical expression at runtime. The killer feature: you can mix units.

/* Subtract a fixed sidebar from a fluid container */
.main { width: calc(100% - 250px); }

/* Add a rem offset to a viewport unit */
.hero { height: calc(100vh - 4rem); }

/* Multiply a custom property */
.box { padding: calc(var(--base-spacing) * 2); }

Operators: + - * /. Two rules:

• + and - must have spaces on both sides: calc(100% -20px) is invalid. Write calc(100% - 20px).
• * and /: at least one operand must be a plain number. You can't do calc(10px * 5px) - that would give you "square pixels" which isn't a CSS unit.

<!-- HTML -->
<div class="calc-demo">
  <div class="calc-sidebar">250px</div>
  <div class="calc-main">calc(100% - 250px)</div>
</div>

/* CSS */
.calc-demo {
  --sidebar: 250px;
  display: flex;
}

.calc-sidebar {
  width: var(--sidebar);
  flex-shrink: 0;
}

.calc-main {
  width: calc(100% - var(--sidebar));
}

Nesting calc() and combining with var()

You can nest calc() inside itself, though modern browsers also let you just use parentheses:

/* These are equivalent: */
width: calc(100% - calc(var(--sidebar) + 2rem));
width: calc(100% - (var(--sidebar) + 2rem));

Combined with custom properties, calc() becomes a mini expression language:

min() - the smaller of two or more values

min() takes a comma-separated list of values and resolves to the smallest. Think of it as a cap - "this big, but no bigger."

/* Width is 100% of parent, but never more than 500px */
.container { width: min(100%, 500px); }

/* Font size is 5vw, capped at 3rem */
.heading { font-size: min(5vw, 3rem); }

<!-- HTML -->
<div class="min-demo-box">I'll fill my parent up to 500px, then stop growing.</div>

/* CSS */
.min-demo-box {
  width: min(100%, 500px);
  padding: 1rem;
  background: #fff3e0; color: #1a1a2e;
  border-radius: 6px;
}

max() - the larger of two or more values

max() resolves to the largest value. It sets a floor - "at least this big."

/* Padding is 5% of container, but never less than 1rem */
.card { padding: max(5%, 1rem); }

/* Width shrinks with viewport, but never below 300px */
.sidebar { width: max(30vw, 300px); }

clamp() - min, preferred, max in one

clamp(MIN, PREFERRED, MAX) is equivalent to max(MIN, min(PREFERRED, MAX)). It gives you a preferred value that can flex, with a floor and ceiling:

/* Font scales with viewport, clamped between 1rem and 2.5rem */
font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);

/* Width is 80% of parent, but between 300px and 800px */
width: clamp(300px, 80%, 800px);

/* Padding is fluid, with sensible bounds */
padding: clamp(1rem, 3vw, 3rem);

<!-- HTML -->
<div class="clamp-text">This text scales fluidly...</div>

/* CSS */
.clamp-text {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
  line-height: 1.3;
  padding: 1rem;
  background: #f9f0ff; color: #1a1a2e;
  border-radius: 6px;
}

Reading clamp() - the three-part mnemonic

clamp( floor , preferred , ceiling )
       ↑            ↑           ↑
  never smaller   ideal     never bigger

Order matters: it's always min, preferred, max. If min > max, min wins (the floor always beats the ceiling).

color-mix() - blend two colours in CSS

Previously you needed Sass or JS to create colour variations. color-mix() does it natively:

/* Mix accent with white to lighten */
background: color-mix(in oklch, var(--accent), white 50%);

/* Mix accent with black to darken */
background: color-mix(in oklch, var(--accent), black 30%);

/* Mix two arbitrary colours */
border-color: color-mix(in oklch, red, blue 40%);

The syntax: color-mix(in <color-space>, <color1>, <color2> <percentage>?)

The percentage says how much of colour2 to mix in. white 50% means "50% white, 50% of colour1".

Colour spaces explained

The in <color-space> part tells the browser how to move between the two colours. Think of it like choosing a route on a map - the start and end are the same, but the path (and what you see along the way) changes depending on the space.

What is a colour space?

A colour space is a system for representing colours as numbers. Different spaces model colour differently:

• sRGB - the classic web colour space. Colours are defined by Red, Green, Blue channels (0-255 or 0%-100%). rgb(), hex, and named colours all live here. Mixing in sRGB interpolates each channel independently, which can produce dull, muddy midpoints - especially between saturated colours.
• HSL - Hue (0°-360°), Saturation (0%-100%), Lightness (0%-100%). More intuitive to think about than RGB, but not perceptually uniform - a 50% lightness yellow looks much brighter than a 50% lightness blue to your eye. Mixing here can produce unexpected saturation spikes.
• Lab / OKLab - designed to match human perception. Lightness is perceptually linear: L=50 genuinely looks "half as bright" as L=100. oklab is a corrected version of lab that fixes some issues at the extremes. Mixing in these spaces produces uniform, natural-looking transitions.
• LCH / OKLCH - the polar form of Lab/OKLab. Instead of a/b axes, you get Lightness, Chroma (saturation), and Hue (an angle). This is like HSL but perceptually uniform. oklch is the corrected version. This is generally the best space for mixing.

Comparison: mixing red and blue in different spaces

/* Same mix, different paths */
--srgb:  color-mix(in srgb, red, blue 50%);   /* dark muddy purple */
--hsl:   color-mix(in hsl, red, blue 50%);    /* vivid magenta (hue rotation) */
--oklab: color-mix(in oklab, red, blue 50%);  /* balanced purple */
--oklch: color-mix(in oklch, red, blue 50%);  /* vibrant purple, preserves chroma */

Why are these different? Because the "midpoint" between red and blue is in a different location depending on which coordinate system you're navigating through:

• sRGB averages R/G/B channels → (128, 0, 128) → dark purple, low saturation in the middle
• HSL rotates the hue wheel (0° → 240°, midpoint is 300° magenta) and averages S/L → vivid but can overshoot saturation
• OKLab averages in a perceptual 3D space → natural-looking purple without muddiness
• OKLCH rotates through hue angle while preserving lightness and chroma → vibrant result that "feels right"

Practical examples in each space

/* Lighten a brand colour - all valid, different results */
--light-srgb:  color-mix(in srgb, var(--brand), white 40%);
--light-hsl:   color-mix(in hsl, var(--brand), white 40%);
--light-oklab: color-mix(in oklab, var(--brand), white 40%);
--light-oklch: color-mix(in oklch, var(--brand), white 40%);

/* Create a semi-transparent overlay */
--overlay: color-mix(in srgb, black, transparent 50%);
/* ↑ srgb is fine here - we're just adjusting opacity, not mixing hues */

/* Blend two theme colours for a gradient midpoint */
--mid: color-mix(in oklch, var(--primary), var(--secondary) 50%);

/* Desaturate a colour (mix with its grey equivalent) */
--muted: color-mix(in oklch, var(--brand), gray 40%);

When to use which space

• in oklch - default choice. Perceptually uniform, vibrant mixes, predictable lightness.
• in oklab - same quality as oklch but no hue angle; good when you don't need to think about hue rotation direction.
• in srgb - when you want channel-level control or are only adjusting opacity. Also useful for matching legacy colour tooling.
• in hsl - when you specifically want hue rotation effects (e.g. shifting a colour towards warm/cool). Be aware saturation can spike.

/* Generate a full tint scale from one token */
:root { --accent: #3a86ff; }

--tint-100: color-mix(in oklch, var(--accent), white 80%);
--tint-300: color-mix(in oklch, var(--accent), white 50%);
--tint-500: var(--accent);
--tint-700: color-mix(in oklch, var(--accent), black 30%);
--tint-900: color-mix(in oklch, var(--accent), black 60%);

All of these compose together

The real power is combining these functions with custom properties:

:root {
  --min-font: 1rem;
  --max-font: 2.5rem;
  --fluid-rate: 2vw;
  --brand: #3a86ff;
}

h1 {
  font-size: clamp(var(--min-font), calc(0.5rem + var(--fluid-rate)), var(--max-font));
  color: color-mix(in oklch, var(--brand), black 20%);
  padding: max(1rem, 3vw);
}

Every value is responsive, bounded, and derived from tokens. No media queries required for the basics.

Quick reference

Quiz