Web_Dev_Grad

Colour is one of the most powerful tools in web design. It evokes emotion, conveys messages, enhances user experience, and can even guide user behaviour. Whether used to create brand identity, draw attention to important elements, or improve accessibility, colour is a fundamental aspect of creating engaging and effective websites. It is more than just aesthetics though, it's a vital communication tool that guides, informs, and engages users. Understanding colour formats (hex, RGB, HSL), using colour theory principles, ensuring accessibility, and applying consistent branding are all essential parts of modern web development and can turn a good website into a great one.

In web design, colour can be defined in multiple ways, and each format offers different advantages. The most common formats are hexadecimal codes, RBG, RGBA, HSL, HSLA, and keyword colour names.

Hexadecimal Colours

Hexadecimal colour codes, or hex codes, are among the most widely used formats in web design. They consist of six characters prefixed with a hash symbol (#). These six characters are split into three pairs, representing the red, green, and blue (RGB) colour values respectively. Each pair is a number in base 16 (hexadecimal), ranging from 00 (minimum intensity) to FF (maximum intensity).

For example:

• #000000 = black (no colour intensity)
• #FFFFFF = white (maximum colour intensity for all three components)

Each component pair contributes to the final colour.

• #FF0000 = pure red
• #00FF00 = pure green
• #0000FF = pure blue

A shorthand version is possible if both numbers in the pairs are the same by defining it once. For instance:

• #FFFFFF can be written as #FFF
• #00FFFF can be written as #0FF

Hex codes can also include opacity values using 8-digit hex notation where the last two characters (00 to FF) represent the alpha (opacity) channel like so:

• #00000000 = fully transparent black
• #FFFFFFFF = fully opaque white

RGB and RGBA

RGB stands for Red, Green, Blue. This format defines colours based on numeric intensity values ranging from 0 (no intensity) to 255 (full intensity). The syntax is looks like:

rgb(255, 0, 0); /* bright red */

RGBA extends this format by adding Alpha (opacity), a value between 0 (completely transparent) and 1 (fully opaque).

rgba(255, 0, 0, 0.5); /* semi-transparent red */

RGBA is especially useful when layering elements or applying effects like hover or background overlays without changing the underlying colour entirely.

HSL and HSLA

HSL stands for Hue, Saturation, and Lightness, offering a more intuitive way to represent colours compared to RGB. The syntax looks like:

hsl(hue, saturation%, lightness%);

Hue is the type of colour, represented by an angle from 0 to 360.

• Red = 0° (or 360°)
• Green = 120°
• Blue = 240°

Saturation is the intensity of the colour, expressed as a percentage.

Lightness determines how light or dark the colour is (0% = black, 100% = white).

Combining these can look like hsl(240, 100%, 50%); /* vivid blue */

HSLA adds the alpha channel for opacity in much the same way as RGBA adds it to RGB. It ranges from 0 (completely transparent) to 1 (fully opaque). The syntax for this looks like: hsla(240, 100%, 50%, 0.3); /* semi-transparent vivid blue */

Many designers prefer HSL because it aligns more naturally with how we perceive colour.

Named Colours

CSS also supports named colours, also called keyword colours, like red, blue, orange, or lightgreen. These are simple and readable, but limited in variety compared to other formats. A full list can be found here at the Mozilla Developers Docs. The syntax for this looks like: color: skyblue;

There are 140+ named colours officially supported in CSS. They are useful for quick prototyping, but for brand consistency or precise design, hex or HSL formats are often preferred.

In web design, colours are not only technical but emotional and psychological tools. Designers use colour to influence how users feel and behave. Some common meanings and elicited emotions of colours are:

Colour	Perceived Meaning and Common Uses
Red	Energy, urgency, passion (often used for alerts or buttons)
Blue	Trust, calm, professionalism (commonly used in business or healthcare sites)
Green	Nature, health, growth (used in eco-friendly or finance websites)
Yellow	Optimism, warmth, caution (attention-grabbing but overuse can be overwhelming)
Purple	Luxury, creativity, sophistication
Black	Elegance, power, modernity
White	Cleanliness, simplicity, space

Designers often choose colours that align with a brand's identity and desired user response.

One of the most critical uses of colour in web design is ensuring accessibility. Colour contrast between foreground text and the background must be strong enough for all users to read comfortably, including those with visual impairments like colour blindness.

The WCAG suggest the minimum contrast ratios of 4.5:1 for normal text and 3:1 for large text, which they define as a size of 18pt or bold text of size 14pt. This can be assessed on your website when you validate the accessibility levels.

Consistent colour usage enhances the UI and strengthens your brand identity. Successful websites use a cohesive colour palette which is usually made up of 3 to 5 main colours. Broken down, these would correspond to:

Colour	Use
Primary Colour	The main brand colour
Secondary Colour(s)	This supports the primary colour and is often used for accents
Neutral Colour(s)	Used for backgrounds, typography, and borders
Action Colour	Used for call-to-action buttons (e.g., “Buy Now” or “Sign Up”) and hover effects

These colours should be used consistently throughout the interface to help users understand navigation (coloured buttons or links), highlight important features (alerts or banners), and improve visual hierarchy (darker colour = stronger importance).