CSS Colors and Units: px, rem, em, %, vw/vh Explained

CSS supports several ways to specify color, each useful in different situations.

.box {
  color: red;                    /* named color */
  background: #ff5733;           /* hex */
  border-color: rgb(255, 87, 51);        /* rgb */
  outline-color: rgba(255, 87, 51, 0.5); /* rgb with alpha/transparency */
  box-shadow: 0 0 10px hsl(9, 100%, 60%); /* hsl */
}

hsl() (hue, saturation, lightness) is often the most intuitive for adjusting a color's shade — keeping hue and saturation fixed while sliding lightness up or down produces a natural tint/shade ramp, which is harder to do by eye with hex codes.

Units fall into two categories: absolute and relative.

.box {
  width: 300px;      /* absolute: pixels, fixed regardless of context */
  font-size: 1.5rem; /* relative to the root element's font size */
  padding: 2em;      /* relative to this element's own font size */
  width: 50%;        /* relative to the parent element's width */
  height: 100vh;     /* relative to the viewport height */
}

px — a fixed, absolute unit. Predictable but doesn't scale with user font-size preferences.
rem — relative to the root (<html>) font size, typically 16px by default. Widely recommended for font sizes and spacing since it respects a user's browser zoom/accessibility settings.
em — relative to the current element's font size, which can compound confusingly when nested.
% — relative to the parent element's corresponding dimension.
vw/vh — relative to the viewport's width/height, useful for full-screen sections.

A common modern default: use rem for font sizes and consistent spacing, % or fr (in Grid) for flexible widths, and px only for things that should truly never scale (like a 1px border).