Understanding Colour Hex Codes for Web Design

A hex colour code is a six-character string preceded by a hash symbol: #FF5733, for example. The six characters are three pairs, each representing a colour channel: the first pair is red, the second is green, the third is blue. Each pair is a hexadecimal number from 00 to FF, which corresponds to a decimal value from 0 to 255. #FF0000 is pure red (255 red, 0 green, 0 blue). #000000 is black (0 of each). #FFFFFF is white (255 of each).

Hex codes are the dominant format in web development because they are compact — six characters versus up to fifteen for an equivalent RGB declaration — and because every browser and CSS engine understands them without conversion. They can be shortened to three characters when each pair is a repeated digit: #FF6633 becomes #F63. This shorthand is valid CSS and reduces file size in large stylesheets.

RGB notation expresses the same information as hex in decimal: rgb(255, 87, 51) is identical to #FF5733. The advantage of RGB notation is readability — 255, 87, 51 is more immediately interpretable than FF5733 to someone unfamiliar with hexadecimal arithmetic. RGB is also easier to manipulate programmatically: adjusting the red channel by 10 is a simple addition rather than a hexadecimal conversion.

RGBA adds a fourth channel — alpha — which controls opacity. rgba(255, 87, 51, 0.5) applies the same colour at fifty percent opacity. Hex codes can also express alpha as an eighth and ninth character in the six-character code (eight-digit hex: #FF573380 for fifty percent opacity), but RGBA notation is more widely supported and more readable for transparency work.

When building a colour palette for a web project, defining your primary colours in both hex (for static CSS) and RGBA (for components that need transparency or layering) at the outset saves conversion time during development. Many design tokens systems store both representations alongside HSL values for easy manipulation.

HSL notation describes colour as three human-intuitive properties: hue (the colour wheel position, 0–360 degrees), saturation (colour intensity as a percentage), and lightness (brightness as a percentage). hsl(12, 100%, 60%) is a vivid orange-red. hsl(12, 100%, 80%) is a lighter pastel version of the same colour. hsl(12, 30%, 60%) is a muted, desaturated version.

The power of HSL is that relationships between colours become arithmetic. To create a lighter tint of a colour, increase the lightness value. To create a muted shade, reduce the saturation. To create a complementary colour, add 180 degrees to the hue. These operations are immediately logical in HSL and require memorising hex codes or guessing in RGB.

Most modern design tools — Figma, Sketch, Adobe XD — display colours in both hex and HSL. Knowing how to read HSL values lets you understand why two colours in a palette feel harmonious or discordant without needing a colour theory background. The relationship is visible directly in the hue values.

Colour converter tools translate between hex, RGB, RGBA, HSL, and HSLA instantly. This is useful when a designer provides a brand colour as a hex code and a developer needs the HSL equivalent to build a palette with systematic lightness variants. It is equally useful when a colour appears in a design tool as an RGB value and needs to be expressed in CSS.

When building a design system, run your primary and accent colours through a converter and record all four representations in your colour token file. Storing hex, RGB, and HSL alongside each other makes it trivial to use whichever format is most convenient for each use case without running conversions at every step.

Named web colours — red, blue, cornflowerblue — are convenient for rapid prototyping but should be replaced with specific hex or HSL values in any production design. Named colours are not part of a deliberate palette and their exact values vary slightly between interpretations. Designing with precise values from the start ensures visual consistency across every context where the colour appears.