CSS Reference Cheat Sheet

Px, rem & em conversion

At the browser default 16px root font-size. The em column assumes a 16px parent — with a different parent, divide the px value by that parent's size instead.

Non-default root font-size, or need the reverse conversion? Use the px, rem & em converter — full reasoning in the px vs rem vs em guide.

Color: hex alpha & HSL hue wheel

An 8-digit hex color's last pair sets its alpha (transparency). A quick reference for the values that come up most:

HSL's hue is a position on the color wheel (0–360°) — saturation and lightness then adjust vividness and darkness independently of hue:

Convert a real value in all three formats with the hex, RGB & HSL converter — full comparison in the hex vs RGB vs HSL guide.

Common responsive breakpoints

Real device widths worth testing against, rather than arbitrary round numbers:

Check what a vw/vh value resolves to at any of these with the viewport units calculator.

Common aspect ratios

Reduce an arbitrary resolution to its simplest ratio with the aspect ratio calculator — full guide to the CSS aspect-ratio property.

WCAG contrast thresholds

Check a real pair with the WCAG contrast ratio checker — the luminance formula and worked examples are in the WCAG contrast guide.

Viewport units

Translate a vw/vh value to px at a real screen width with the viewport units calculator — the mobile 100vh bug and the fix are covered in the viewport units guide.

clamp() formula

Fluid value between a minimum size at a small viewport and a maximum size at a large viewport:

slope     = (max_px - min_px) / (max_vw_px - min_vw_px)
vw term  = slope * 100
constant = min_px - (slope * min_vw_px)   /* then divide by 16 for rem */

font-size: clamp(MINrem, CONSTANTrem + VWvw, MAXrem);

Worked example — 16px at a 320px viewport growing to 24px at a 1280px viewport:

clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Generate a value for your own min/max/viewport pair with the CSS clamp() generator — full walkthrough in the clamp() guide.