Colors and Units in CSS

Analogy categoryAnalogies

Introduction

CSS gives you multiple ways to express colors and multiple systems of measurement for lengths. Choosing the right color format and unit type affects both visual accuracy and how well a design adapts across screen sizes.

🏏

Cricket analogy: Choosing between hex colors and HSL is like choosing between a bowler's raw pace figures and their economy rate, different formats describing the same underlying performance.

Syntax

css

.box {
  color: #ff5733;
  background-color: rgb(255, 87, 51);
  border-color: hsl(11, 100%, 60%);
  opacity: 0.9;
  width: 20rem;
  padding: 1.5em;
  font-size: 1.2vw;
}

Explanation

Colors can be written as keywords (red), hexadecimal codes (#ff5733), rgb()/rgba() functions, or hsl()/hsla() functions, where hsl represents hue (0-360 degrees), saturation, and lightness — often the most intuitive for adjusting a color's tone. Units fall into two categories: absolute units like px, which represent a fixed physical size, and relative units like %, em, rem, vw, and vh, which scale based on another value such as the parent element's font size, the root font size, or the viewport dimensions. rem is especially useful because it always references the root (html) element's font size, making layouts easier to scale consistently.

🏏

Cricket analogy: hsl's hue-saturation-lightness sliders are like adjusting a pitch report's pace, bounce, and turn independently, more intuitive than memorizing a raw hex code of numbers.

Example

css

html { font-size: 16px; }

.title {
  font-size: 2rem;      /* 32px, based on root */
  margin-bottom: 1em;   /* relative to this element's own font-size */
  color: hsla(210, 80%, 45%, 0.85);
}

.hero {
  width: 100vw;
  height: 50vh;
}

Output

The .title element renders at 32px because 2rem multiplies the root's 16px font size. Its bottom margin equals the element's own computed font size (32px), since 1em references the current element. The .hero element stretches to the full width and half the height of the browser viewport, resizing automatically whenever the window changes.

🏏

Cricket analogy: The .title's 32px size, doubled from the 16px root, is like a batting average scaled up by a form multiplier, the base stat times a situational factor gives the final number.

Key Takeaways

Colors can be expressed as keywords, hex, rgb()/rgba(), or hsl()/hsla().
hsl() is intuitive for tweaking hue, saturation, and lightness independently.
px is an absolute unit; %, em, rem, vw, and vh are relative units that adapt to context.
rem scales relative to the root font-size, making it ideal for consistent, scalable typography and spacing.