Ways to specify colours in CSS

Published March 8, 2024 │ Latifa Siddiqah Latif

Image source: Unsplash

How many ways are there to specify colour in CSS? Do we need to know them all? What are the practical uses of each?

This article will talk about the following topics:

Named Colours
RGB/RGBA
HEX/HEXA
HSL/HSLA
HWB
LAB
LCH

INTRODUCTION

Ever pondered the question of how vast the spectrum of colours truly is? Delving into the intricate world of colour perception prompts a contemplation on the sheer multitude of hues that exist.

16,777,216. This is the number of colours there are. I will later on explain where this figure comes from – but are you able to figure out where the figure comes from before reading ahead?

There are a number of ways that colour can be specified in CSS and I will be explaining them and giving their practical uses in this article. Plus, is it necessary to know them all?

METHOD 1 – Named Colours

Named colours is the most simplest way to declare colours in CSS. This is by simple calling the colours by their name, for instance ‘red’, or ‘yellow’.

This method is most practical when it comes to prototyping and quick-styling where basic colours are sufficient to present the idea of what colours may be used. With this method, you would declare it using the ‘color’ property and then giving that property a value, which will be the name of the colour. Colour names with more than one word will be declared using camel case, as can be seen in the image above, where the initial letter of the word is upper-case.

Advantages:

Readability and Maintainability:
- Named colours enhance the readability of your CSS code, making it easier for developers to understand and maintain the styling.
Semantic Meaning:
- Named colours allow you to convey semantic meaning through colour choices, making your code more intuitive and purposeful.
Ease of Color Swapping:
- If you need to change a colour, you can update it by changing the name, providing a convenient and quick way to make adjustments.
Accessibility:
- Named colors can contribute to accessibility by using colors with specific meanings, aiding users with visual impairments.

Disadvantages:

Subjectivity:
- Colour perception is subjective, and the interpretation of named colors may vary among individuals.
Limited Precision:
- Named colours have predefined values, limiting the precision when specifying colours compared to using hexadecimal or RGB values.
Limited Range:
- The named colour set is limited, and if you require a very specific or custom colour, you may need to resort to hexadecimal or RGB values.

Named Colors and Hex Equivalents

CSS Tricks (the link above) has a list of the colour names that are available to be declared in CSS. It also showcases it HEX equivalents. You can see how limited the range of colours there are, and why there are other methods of declaring colours in CSS.

METHOD 2 – RGB

Colours are a unique combination of red, green and blue. RGB values are typically represented in terms of bits, with each colour channel (Red, Green, and Blue) assigned a specific number of bits to determine its intensity. Each channel is presented in 8 bits and as 1 bit has two values, either 0 or 1, 2 to the power of 8 gives us the value of 256. This is the number of values each colour channel represents. 256 * 256 * 256 gives us the value 16,777,216. This is the figure I had mentioned in the introduction, that is how many colours are possibly presentable.

This method allows control over each colour channel. In CSS, RGB colour values can be declared using the ‘color’ property and then using the ‘rgb()’ notation, followed by a semi-colon to end that line of code, as can be seen in the image below, showcasing the colour Deep Lilac.

RGB colors are fundamental in digital displays, such as computer monitors, TVs, smartphones, and tablets. Each pixel on the screen is composed of red, green, and blue subpixels to produce a wide range of colours.

In digital photography and imaging, RGB is commonly used to represent and edit images. Each pixel’s colour is described by its intensity of red, green, and blue, allowing for precise colour adjustments.

Applications like Adobe Photoshop and Illustrator use RGB colour representation for designing graphics. Artists and designers work with the RGB colour model to create visually appealing and accurate designs.

Alpha Channel

An additional channel is added for transparency. This enables to create semi-transparent colours and overlays and can be used on features such as link states (hover, active, focus…), box-shadows, text shadows and more.

This is declared similarly to rgb(), but we add an ‘a’, rgba() and we have a fourth figure for the alpha, which is a number between 0 to 1, where 0 is fully transparent (invisible) and 1 is fully opaque (completely visible).

Advantages:

Precision and Control:
- RGB allows for precise control over the intensity of red, green, and blue components, enabling designers to choose the exact shade they want for text, backgrounds, borders, and other elements.
Consistency Across Devices:
- RGB is widely supported across different devices and browsers, ensuring consistent colour representation and visual appearance on various screens and platforms.
Dynamic Color Adjustments:
- CSS allows dynamic adjustments to RGB values using various techniques such as hover effects, transitions, and animations. This flexibility enhances the user experience by providing dynamic and interactive visual elements.
Transparency Control (RGBA):
- RGBA, an extension of RGB, allows the inclusion of an alpha channel for transparency control. This is valuable for creating semi-transparent elements, overlays, or shadows.
Compatibility with Design Tools:
- Design tools commonly use the RGB colour model, making it seamless for designers to transfer colour choices from applications like Photoshop or Illustrator directly to CSS.

Disadvantages:

Subjectivity of Color Perception:
- Colour perception varies among individuals, and what looks consistent on one device may appear differently on another. This subjectivity can lead to challenges in achieving colour consistency across various screens.
Accessibility Challenges:
- Relying solely on RGB values may pose challenges in meeting accessibility standards. Designers need to consider contrast ratios and ensure that colour choices are accessible for users with visual impairments.
Device and Browser Variability:
- Different devices and browsers may interpret RGB values slightly differently due to variations in rendering engines and display technologies. This can lead to inconsistent colour appearances.

METHOD 3 – HEX

Hexadecimal (hex) codes are a way to represent colours in digital form using a base-16 system (0 to 9, A to F). A hex code consists of six characters, with each pair representing the intensity of one of the three primary colours: red, green, and blue. The format for declaring colour using hex notation is ‘#RRGGBB’, assigning it to the property ‘color’.

Hex notation is versatile and consistent across different platforms and software, for example, tools like Adobe Photoshop, Illustrator, and other graphic design software use hex codes to represent colours. Designers can input or pick colours using hex notation for consistent colour reproduction across various design projects.

Alpha Channel

Similar to RGBA, Hex notation also has an ‘alpha’ channel, and it is declared with an additional two digits/figures following the general #RRGGBB, so it is now #RRGGBBAA. ’00’ is fully transparent and ‘FF’ is fully opaque.

Advantages:

Compact Representation:
- Hex notation provides a concise and compact representation of colours, using only six characters to define the intensity of red, green, and blue components. This makes it easy to read and write.
Widely Supported:
- Hex codes are widely supported across various platforms, browsers, and design software. They have become a standard notation for specifying colours in web development and digital design.
Ease of Copy-Pasting:
- Hex codes can be easily copied and pasted, making it convenient to transfer colour values between design tools, style sheets, and other applications.
Efficient for Digital Media:
- Hex codes are well-suited for representing colours in digital media, such as websites, applications, and graphics, where RGB colour models are commonly used.

Disadvantages:

Complex for Beginners:
- For beginners or those new to web development and design, hex notation might initially seem more complex compared to other colour representations like named colours.
Not Intuitive for Everyone:
- Hexadecimal notation may not be intuitive for everyone, especially those who are not familiar with the base-16 numbering system. Some may find it more challenging to remember or understand compared to other notations.

METHOD 4 – HSL

Hue, saturation and lightness is derived from the abbreviation HSL. Hue is represented in degrees (0 to 360) and saturation and lightness is presented by percentages. The HSL colour space is an alternative to the more common RGB (Red, Green, Blue) colour model and is designed to be more intuitive and human-friendly.

Here’s a brief explanation of each component in the HSL colour model:

Hue (H):
- Hue represents the type of colour, often described as the pure colour without any white or black added. It is measured in degrees on a colour wheel, ranging from 0 to 360. Red is typically at 0°, green at 120°, blue at 240°, and the cycle repeats.
Saturation (S):
- Saturation defines the intensity or vividness of a colour. It is expressed as a percentage, ranging from 0% (completely desaturated, grayscale) to 100% (fully saturated, vibrant colour).
Lightness (L):
- Lightness represents the brightness of a colour. It is also expressed as a percentage, with 0% being completely black, 50% representing the normal colour, and 100% being completely white.

The HSL colour model provides a more intuitive way to work with colours, making it easier for designers and developers to specify and adjust colour properties. It is particularly useful for tasks like colour picking, as changing the hue, saturation, or lightness individually can result in more predictable and understandable colour variations.

HSL is commonly used in graphic and web design for specifying and adjusting colours. Designers can easily manipulate the hue, saturation, and lightness to create harmonious colour schemes, gradients, and visual elements.

HSL is valuable in UI design for creating aesthetically pleasing and user-friendly interfaces. Designers can control the saturation and lightness to ensure readability, contrast, and overall visual appeal. This then links to accessibility – designers use HSL to ensure accessibility by adjusting lightness and contrast. This helps in creating designs that are readable and visually accessible for users with varying visual abilities.

HSL can be part of responsive design strategies where designers adjust colours based on the user’s device or preferences, ensuring a consistent and visually appealing experience across various screen sizes.

Alpha Channel

Along with RGB, Hex and HSL has an alpha channel as well. It is specified by the following: hsla(hue, saturation, lightness, alpha). The alpha parameter is the same as it is for RGBA, where 0 is fully transparent and 1 is fully opaque.

Advantages:

Intuitive Representation:
- HSL provides a more intuitive and human-friendly representation of colours compared to RGB. Designers can easily conceptualize and communicate colour ideas using terms like hue, saturation, and lightness.
Natural Light and Shadow Effects:
- The lightness parameter in HSL allows for creating natural-looking light and shadow effects, making it suitable for applications like illustrations, icons, and graphics.
Ease of Dark/Light Adjustments:
- Adjusting the lightness in HSL is particularly useful for creating variations in colour for different states (e.g., hover, active) without dramatically changing the hue or saturation.

Disadvantages:

Limited Device Independence:
- The appearance of colours in the HSL colour space may vary across different devices and displays, as it is not device-independent. This can make it challenging to ensure consistent colour reproduction.
Perceptual Non-Uniformity:
- HSL does not offer perceptual uniformity, meaning that equal changes in hue, saturation, or lightness may not be perceived as equally significant by the human eye.

METHOD 5 – HWB

Similar to HSL, HWB is for hue, whiteness and blackness.

Here are the three components of the HWB color space:

Hue (H):
- Similar to other color models, hue represents the type of color. It is measured in degrees on a color wheel, ranging from 0 to 360. Red is typically at 0°, green at 120°, blue at 240°, and the cycle repeats.
Whiteness (W):
- Whiteness represents the amount of white in a color. It is expressed as a percentage, ranging from 0% (no white) to 100% (fully white). A higher whiteness value means the color appears lighter.
Blackness (B):
- Blackness represents the amount of black in a color. Like whiteness, it is expressed as a percentage, ranging from 0% (no black) to 100% (fully black). A higher blackness value means the color appears darker.

While HWB is not as commonly used as RGB or HSL, there are some practical uses for it.

HWB may be employed in UI design for adjusting the brightness and darkness of interface elements. Designers can use whiteness and blackness to control the overall appearance of colours in user interfaces, ensuring optimal visibility and aesthetics.

Designers may use the HWB colour space to make accessibility adjustments by modifying the whiteness and blackness of colours. This can enhance the contrast and readability of text and graphical elements, improving accessibility for users with visual impairments.

Alpha Channel

Yes, HWB also has an alpha channel for transparency, however, it does not have it’s own property such as ‘RGBA’ or HEXA’, or ‘HSLA’. The transparency is presented by a forward slash following the format hwb(hue, whiteness, blackness / transparency).

Advantages:

Intuitive Lightness Control:
- The separate controls for whiteness and blackness make it intuitive for designers to control the overall lightness or darkness of a colour independently of its hue. This can be advantageous in design scenarios where precise control over colour appearance is essential.
Natural Appearance:
- By incorporating whiteness and blackness, HWB allows for the creation of colours that might have a more natural appearance, resembling shades found in the physical world.
Accessibility Adjustments:
- Designers can use the controls provided by HWB to make accessibility adjustments by modifying whiteness and blackness. This can enhance the contrast and readability of text and graphical elements.

Disadvantages:

Not Widely Adopted:
- HWB is not as widely adopted or used in design tools and applications as other colour spaces like RGB or HSL. Designers and developers may be more accustomed to working with other models.

Method 6 – LAB

CIELab, L*A*B*, or most commonly called, Lab, is a tri-stimulus model, scaled to achieve near uniform spacing of perceived colour differences. Unlike RGB and HSL, which are device-dependent colour models, LAB is a device-independent colour space. It was developed to create a perceptually uniform colour space, meaning that the perceptual difference between colours is consistent throughout the space.

The LAB colour space consists of three components:

L (Lightness):*
- L* represents the brightness or lightness of a colour and ranges from 0 to 100. A higher L* value corresponds to a lighter colour, while a lower value corresponds to a darker colour.
a (Green to Red axis):*
- The a* axis represents the colour on a green-to-red scale. Positive values represent red tones, while negative values represent green tones.
b (Blue to Yellow axis):*
- The b* axis represents the colour on a blue-to-yellow scale. Positive values represent yellow tones, while negative values represent blue tones.

The LAB (CIELAB) colour space is widely used particularly in industries where accurate and perceptually uniform colour representation is essential.

LAB is commonly used in photo and image editing software for colour correction and retouching. Its perceptual uniformity allows for more accurate adjustments, and changes in LAB space often correspond more closely to human visual perception.

In manufacturing industries where colour consistency is crucial, LAB is employed for quality control. It helps maintain uniformity in product colours and ensures that the final products meet specified colour standards.

The way to present lab in CSS is color: lab (red/green value, yellow/blue value);.

There are useful tools out there that can help in converting values if you are not familiar with how the colour space works. For instance, the screenshot above is a Hex to Lab converter.

Alpha Channel

Similar to HWB, Lab doesn’t have its own property name for its alpha channel but you can alter the transparency. As with the HWB alpha channel, the alpha channel for Lab is added with a forward slash and a value between 0 and 1 is stated.

Advantages:

Device Independence:
- LAB is device-independent, meaning that the same LAB colour values should appear similar across different devices and viewing conditions. This is beneficial for ensuring colour consistency in various applications.
Color Correction and Matching:
- LAB is widely used in colour correction and colour matching tasks, especially in industries such as printing, where achieving consistent colours is essential. Adjustments in LAB space often align more closely with human perception.

Disadvantages:

Complexity:
- The LAB colour space can be more complex to understand and work with compared to RGB or HSL, especially for those who are not familiar with colour science. The three-dimensional nature of LAB may pose challenges for beginners.
Limited Browser and Software Support:
- In web development and certain design software, there may be limitations in terms of direct support for LAB colour values. This can impact its practicality in certain workflows and industries.

Method 7 – LCH

The LCH colour space, also known as CIELCH, is a cylindrical representation of colours based on the LAB (CIELAB) colour space. lc

Here’s a breakdown of the components in the LCH colour space:

Lightness (L):
- Lightness represents the perceived brightness of a colour and ranges from 0 to 100. A higher L value corresponds to a lighter colour, while a lower value corresponds to a darker colour.
Chroma (C):
- Chroma represents the colour intensity or saturation and measures the distance of a colour from the neutral axis in the LAB colour space. It ranges from 0 to a maximum value, indicating how vivid or intense the colour is.
Hue (H):
- Hue represents the type of colour, similar to the concept of hue in other colour spaces. It is expressed in degrees, ranging from 0 to 360 around a colour wheel. Different hues represent different colours, such as red, green, blue, etc.

The LCH colour space is often preferred in design and colour-related applications because it separates the components of colour in a way that aligns more closely with human perception. The cylindrical representation (LCH) is considered more intuitive for certain tasks compared to the Cartesian coordinates used in the LAB colour space.

The LCH notation is presented as: lch(lightness, chroma, hue). The LCH colour space is particularly useful in design applications where designers want more intuitive control over lightness, saturation, and hue.

Alpha Channel

Once again, LCH has an alpha channel that is separated from the rest of the components by a slash following the new notation.

Advantages:

Perceptual Uniformity:
- Similar to the LAB colour space, LCH aims to maintain perceptual uniformity. This means that equal changes in Lightness, Chroma, or Hue are intended to be roughly equal in perceived visual difference. This can be beneficial for tasks requiring consistent colour perception.
Natural Representation of Colors:
The cylindrical representation of LCH is considered more natural for expressing colour relationships, especially when compared to Cartesian coordinates. This can be advantageous in design tasks where a natural representation of colours is desired.

Disadvantages:

Complexity for Some Users:
- While LCH is more intuitive for many designers, it can still be conceptually complex for individuals who are not familiar with colour theory or the LAB colour space. Understanding the relationships between lightness, chroma, and hue may take time for some users.
Hardware and Software Limitations:
- Some hardware and software tools may not fully support LCH colour representation or may not provide accurate conversions between LCH and other colour spaces. This can be a consideration in workflows where interoperability is crucial.

Do we need to know them all?

Knowing all the colour spaces and ways to specify colours in CSS is not a strict requirement for everyone. However, having a good understanding of colour spaces and CSS colour notations can be beneficial.

Understanding the basics of colour spaces (such as RGB, HSL, LAB, LCH) and CSS colour notations (such as hex, RGB, HSL, named colours) is practical for individuals involved in design and development. It enables you to make informed decisions about colour choices, adjustments, and compatibility across various platforms.

Knowledge of colour spaces and accessibility considerations is crucial for creating designs that are inclusive and accessible to individuals with colour vision deficiencies. Understanding colour spaces helps in making informed choices for accessible colour combinations.

Understanding the use cases of each is also crucial as it can enable you to make an informed decision on when it is appropriate to use what method. Plus, you may not always be able to use your favourite colour-space, and knowing how to use other ones will be helpful in such situations where your favourite one may not be able to be used.

What are your thoughts and opinions? Leave a comment below!