# Colors & Units — CSS

Source: https://www.geekswithgeeks.com/en/css/css-colors-units

> Color formats and the difference between absolute and relative sizing.

## Color formats

`#rrggbb` hex, `rgb(r, g, b)`, `rgba(r, g, b, a)` with transparency, and `hsl(hue, sat%, light%)` — hsl is often the most intuitive for tweaking shades.

## Colors side by side

All four describe the same shade of blue.

```css
.a { color: #264de4; }
.b { color: rgb(38, 77, 228); }
.c { color: rgba(38, 77, 228, 0.8); }
.d { color: hsl(226, 79%, 52%); }
```

## Absolute vs relative units

`px` is absolute — fixed size. `em` is relative to the parent's font size (compounds when nested). `rem` is relative to the **root** font size (predictable). `%`, `vw`, `vh` are relative to the container or viewport.

## Prefer rem for text

`rem` sizes scale correctly when a user changes their browser's default font size — better accessibility than fixed `px`.