CSS Tutorial / CSS Colors and Units: px, em, rem, and Percentages

CSS colors can be written using names, hexadecimal values, and functions such as rgb(). Length units use different reference points: px is an absolute CSS length, em depends on font size, rem uses the root font size, and percentages depend on the property being set.

Compare color names, hexadecimal notation, and RGB

teal, #008080, and rgb(0, 128, 128) express the same color. Color names are easy to read, but there are set names that can be used, and hexadecimal and RGB are good for numerically controlling the amount of red, green, and blue. RGB stands for Red, Green, Blue.

Alpha describes color opacity: 20% allows much of the underlying color to show, while 100% is opaque. The displayed result depends on that underlying color. Adding alpha only to the background differs from setting opacity on the whole element, which also makes its text and descendants translucent. See MDN: color.

Understand the reference points of px, em, and rem

px is a CSS pixel. This does not always equate to one physical pixel on the screen, and may appear differently depending on the screen scale and pixel density of the device. Using 16px does not mean that the screen magnification function does not work.

In font-size, em uses the inherited font size. In a declaration such as padding: 1em, it uses the element's own font size. rem uses the root element's font size. The following calculations assume both the root and parent font sizes are 16px. For further detail, see CSS Fonts, Font Sizes, and Line Height.

If you repeat font-size: 1.25em at each step in which the parent size increases, it increases from 16 → 20 → 25px. Repeat 1.25rem over the same structure, both steps are 20px. em is convenient for small components that need to be proportional to the surrounding letters, and rem is convenient for sharing a constant reference across the page. Choose what criteria to follow rather than the absolute correct answer. For the definition of the unit, refer to the CSS value of MDN and the unit guide.

Find the reference for percentage width

width: 50% is usually calculated based on the content width of the containing block. Not all attribute percentages are based on the same target. For example, font-size: 125% is based on the font size inherited from the parent, so it must be separated from % of width.

.wrapper { width: 100%; max-width: 640px; padding: 1rem; }

.inner { width: 50%; font-size: 1.25rem; padding: 1em; }

This example uses border-box, so padding fits inside the declared width. With a 16px root font, sufficient space, and no borders, the outer box is 640px wide. Its 16px padding on each side leaves 608px of content width. The inner box's 50% width is 304px; its 20px padding on each side leaves 264px for content. For further detail, see CSS Width, Height, min/max Limits, and box-sizing.

If the screen is narrow, the width of the outer box will also be reduced. At this time, the inner width is not fixed to 304px but is recalculated based on the new content width of the outer box. max-width in the example is a secondary setting that restricts the box from being wider than 640px.

Run the complete example

Enter the code below into units.html saved as UTF-8 and open it in your browser. The code includes color comparison, nesting units, and width calculations. The root's 100% follows the browser's default font size, so the 16px condition in the exercise below is checked first in developer tools.

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Comparing colors and units</title>

  <style>

    html { font-size: 100%; }

    * { box-sizing: border-box; }

    body { margin: 16px; font-family: sans-serif; line-height: 1.7; }

    .wrapper { width: 100%; max-width: 640px; padding: 1rem; background: #e9f7ef; }

    .inner { width: 50%; padding: 1em; font-size: 1.25rem; background: white; }

    .color-name { color: teal; }

    .color-hex { color: #008080; }

    .color-rgb { color: rgb(0, 128, 128); }

    .alpha { padding: 1rem; background: rgb(0 128 128 / 20%); }

    .nest { font-size: 16px; }

    .em-step { font-size: 1.25em; }

    .rem-step { font-size: 1.25rem; }

  </style>

</head>

<body>

  <h1>Colors and units</h1>

  <h2>Three notations of the same color</h2>

  <p class="color-name">Character specified by teal</p>

  <p class="color-hex">Characters specified as #008080</p>

  <p class="color-rgb">Character specified by rgb(0, 128, 128)</p>

  <p class="alpha">Only this box's background color has 20% opacity.</p>

  <h2>Width and spacing</h2>

  <div class="wrapper"><div class="inner">Text and padding in the inner box</div></div>

  <h2>Nested em</h2>

  <div class="nest"><div class="em-step">First step<div class="em-step">Second step</div></div></div>

  <h2>Nested rem</h2>

  <div class="nest"><div class="rem-step">First step<div class="rem-step">Second step</div></div></div>

</body>

</html>

Change one value at a time

1. Check the calculated font-size of the html in developer tools. If it is 16px, make sure the nested em is 20px·25px and the nested rem is 20px·20px. If it is a different basic size, calculate it in the same multiple.
2. Let's briefly change the html to font-size: 20px. All rem-based text are 25px, and .nest maintains the specified 16px, so the em level is 20px·25px. The padding of .inner is 25px. After comparison, it returns to the original 100%.
3. Make the window wider and check the box sizes of .wrapper and .inner. In the original 16px condition, it is 640px·304px. As you narrow the window, make sure both sides shrink together.
4. Check the calculated colors of the three color paragraphs. They must all have the same RGB value. Make sure that changing the background of .alpha does not blur the text itself.

If it's not what you expected, check the calculation criteria before just changing the units. Parent and root font size, padding, box-sizing, and overriding CSS rules can have an effect. Changes made in developer tools usually disappear when you refresh, and changes saved to files must be manually reverted to their original values.