Colours & units

Colours on the web

Additionally to the predefined named colours, there are also a number of other ways to specify colours on the web. The most common way is to use hexadecimal colour codes, which are prefixed with a hash symbol (#). These codes are written in the form of #RGB or #RRGGBB, where RR, GG, and BB are the red, green, and blue components of the colour, respectively. Additionally, you can defined the alpha channel (opacity) of a colour by adding a value at the end of the hex code (#RGBA or #RRGGBBAA).

Colours can also be specified using a colour function, which allows to define colours in a different colour space. Here are a few of the most wiedly used:

• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%) (hue, saturation, lightness)
• HWB: hwb(50deg 30% 40%); (hue, whiteness, blackness)
• LAB: lab(52% 40 60); (lightness, a, b)
• LCH: lch(50% 75 20); (lightness, chroma, hue)

Some useful units

Default unit of length

The px unit is the most common unit of length on the web. The pixel unit should be used for defining fixed length and sizes, such as border thicknesses, media queries, and other smaller adjustments. Note that usually, if a unit is not specified, the browser will assume the unit is px.

Typographic units

The em unit is used to define font sizes relative to the font-size of the element. The default font size of a website is 16px, but this default can be overwritten by custom user settings (accessiblity, contrast, etc.). An em is more or less equal to the width of the capital letter M in the current font.

The ch is most commonly used for horizontal typographical measurements, such as maximum line length and indentation. A ch is equal to the width of the "0" character in the element's font and often changes depending on the cut of the font.

Advanced: rem unit

The rem unit is used to define font sizes relative to the root element. Since the root element's font-size doesn't change, the rem unit is a good choice for more consistent sizing.

Viewport and percentages

Length can also be specified using percentages, either relative to their parent element or the viewport.

The % unit is relative to the parent element. It doesn't only apply to the width and height of the element, but also to its padding, border, margin, font-size and other properties.

The vw and vh units are relative to the viewport width and height. They are useful for responsive design, where you want to define a layout that adapts to different screen sizes.