New CSS Colour Systems (LCH, LAB, HWB)

CSS has come a long way from its early days when colours were primarily defined using basic RGB (Red, Green, Blue) values. Over time, more sophisticated colour systems like HSL (Hue, Saturation, Lightness) and HSLA (Hue, Saturation, Lightness, Alpha) were introduced, providing developers with greater control over colour manipulation. However, even these models have limitations when it comes to representing colours as perceived by the human eye.

The latest advancements in CSS include new colour systems like LCH (Lightness, Chroma, Hue), LAB (Lightness, A, B), and HWB (Hue, Whiteness, Blackness). These systems offer more intuitive ways to define and manipulate colours, allowing for smoother transitions, more natural colour gradients, and improved accessibility. Understanding these advanced colour models is essential for frontend developers looking to create visually appealing and user-friendly designs.

LCH Colour Model

LCH, which stands for Lightness, Chroma, and Hue, is a colour model derived from the LAB colour space. It offers a more perceptually uniform way to describe colours, meaning the differences between colours are more consistent with how humans perceive them.

In the LCH model:

• Lightness (L) represents the brightness of the colour, ranging from 0% (black) to 100% (white).
• Chroma (C) measures the intensity or purity of the colour, with higher values indicating more vivid colours.
• Hue (H) indicates the colour type, such as red, blue, or green, represented as an angle from 0 to 360 degrees.

Why LCH is Useful in CSS

The LCH colour model is particularly useful in CSS because it aligns more closely with human colour perception, making it easier to create harmonious and visually appealing designs. Some key benefits include:

• Natural Colour Transitions
  LCH allows for smoother and more predictable colour transitions, which is crucial for creating gradients and animations.
• Improved Accessibility
  By accurately representing colour differences, LCH helps in designing accessible colour schemes that are distinguishable to people with various types of colour vision deficiencies.
• Intuitive Adjustments
  Adjusting the lightness, chroma, or hue individually provides a more intuitive way to tweak colours compared to traditional RGB or HSL models.

Code Snippet for Defining Colours Using LCH

Here’s how you can define colours using the LCH model in CSS:

color: lch(52.2345% 100 40);

In this example:

• 52.2345% is the lightness, indicating how light or dark the colour is.
• 100 is the chroma, showing the intensity of the colour.
• 40 is the hue, determining the specific colour type on the colour wheel.

LAB Colour Model

The LAB colour model, which stands for Lightness, A, and B, is designed to be more aligned with human vision, making it an excellent choice for creating visually accurate and consistent colours in web design.

In the LAB model:

• Lightness (L) represents the lightness of the colour, ranging from 0% (black) to 100% (white).
• A represents the green to red component, with negative values indicating green and positive values indicating red.
• B represents the blue to yellow component, with negative values indicating blue and positive values indicating yellow.

Advantages of Using LAB in Web Design

The LAB colour model offers several advantages for web design:

• Perceptual Uniformity
  LAB is designed to be more perceptually uniform, meaning that equal changes in value correspond to equal changes in perceived colour. This makes it easier to create smooth and consistent colour gradients.
• Accurate Colour Representation
  LAB can represent all perceivable colours, providing a broader and more accurate colour range compared to RGB or HSL.
• Enhanced Accessibility
  By using LAB, designers can ensure that colour differences are more noticeable and distinct, improving accessibility for users with colour vision deficiencies.

Code Snippet for Defining Colours Using LAB

Here’s how you can define colours using the LAB model in CSS:

color: lab(53.23288% 80.109309 -67.220068);

In this example:

• 53.23288% is the lightness, indicating how light or dark the colour is.
• 80.109309 is the A component, representing the green to red axis.
• -67.220068 is the B component, representing the blue to yellow axis.

HWB Colour Model

The HWB colour model, which stands for Hue, Whiteness, and Blackness, provides a straightforward and intuitive way to define colours, making it particularly user-friendly for developers.

In the HWB model:

• Hue (H) indicates the type of colour, similar to the hue in the HSL and HSV models, represented as an angle from 0 to 360 degrees.
• Whiteness (W) measures the amount of white mixed into the colour, expressed as a percentage.
• Blackness (B) measures the amount of black mixed into the colour, also expressed as a percentage.

Benefits of Using HWB for Colour Definition

The HWB colour model offers several practical benefits:

• Simplicity
  HWB is more intuitive and easier to understand than some other models, making it ideal for beginners. Adjusting the whiteness and blackness provides a straightforward way to lighten or darken a colour.
• Efficient Colour Adjustments
  With HWB, it's simple to adjust the lightness and darkness of colours without altering their hue, making it easier to maintain consistent colour schemes.
• Cleaner Syntax
  The HWB model's syntax is clean and easy to read, which can improve code readability and maintainability.

Code Snippet for Defining Colours Using HWB

Here’s how you can define colours using the HWB model in CSS:

color: hwb(194 20% 30%);

In this example:

• 194 represents the hue, which is the type of colour.
• 20% represents the whiteness, indicating how much white is mixed into the colour.
• 30% represents the blackness, indicating how much black is mixed into the colour.

Practical Applications

Understanding how to apply LCH, LAB, and HWB in your CSS projects can greatly enhance the visual appeal and functionality of your web designs. 

How to Create Colour Palettes Using LCH, LAB, and HWB

Creating colour palettes with these advanced colour models allows for more harmonious and perceptually uniform colour schemes.

LCH Palette Example

--primary-color: lch(65% 80 230);  /* Vivid Blue */
--secondary-color: lch(75% 60 45);  /* Soft Orange */
--accent-color: lch(50% 90 120);  /* Bright Green */

LAB Palette Example

--primary-color: lab(65% 45 -75);  /* Deep Blue */
--secondary-color: lab(75% 60 45);  /* Warm Yellow */
--accent-color: lab(50% 20 60);  /* Rich Purple */

HWB Palette Example

--primary-color: hwb(210 20% 10%);  /* Sky Blue */
--secondary-color: hwb(30 10% 20%);  /* Sunny Yellow */
--accent-color: hwb(120 30% 15%);  /* Fresh Green */

Examples of Gradients and Transitions

Using LCH, LAB, and HWB for gradients and transitions ensures smoother and more natural changes between colours.

LCH Gradient Example

background: linear-gradient(to right, lch(65% 80 230), lch(75% 60 45));

LAB Gradient Example

background: linear-gradient(to right, lab(65% 45 -75), lab(75% 60 45));

HWB Gradient Example

background: linear-gradient(to right, hwb(210 20% 10%), hwb(30 10% 20%));

Code Snippets Demonstrating Practical Use

LCH Transition Example

.element {
  transition: color 0.5s ease;
}

.element:hover {
  color: lch(75% 60 45);  /* Hover color changes smoothly */
}

LAB Transition Example

.element {
  transition: background-color 0.5s ease;
}

.element:hover {
  background-color: lab(75% 60 45);  /* Background color changes smoothly */
}

HWB Transition Example

.button {
  transition: border-color 0.5s ease;
}

.button:hover {
  border-color: hwb(30 10% 20%);  /* Border color changes smoothly */
}

Browser Support

When implementing new colour models like LCH, LAB, and HWB in your CSS, it's important to consider their compatibility with different browsers. Currently, browser support for these advanced colour systems is evolving, with more widespread adoption expected in the near future.

Current Browser Support

As of now, support for LCH, LAB, and HWB colour models varies across different browsers:

• Google Chrome: Partial support for LCH and LAB colours, with HWB support in development.
• Mozilla Firefox: Supports LAB and HWB colours. LCH support is also available in recent versions.
• Safari: Partial support for LAB and HWB colours, with ongoing updates to include LCH.
• Microsoft Edge: Similar to Chrome, Edge has partial support for LCH and LAB colours, with HWB in development.
• Opera: Follows Chrome’s implementation, offering partial support for LCH and LAB colours.

Ensuring Compatibility

Always provide fallback colours using widely supported colour models (e.g., RGB, HEX)

color: #1a73e8; /* Fallback for unsupported browsers */
color: lch(52.2345% 100 40);

Use CSS feature queries to check for support and apply styles conditionally

@supports (color: lch(52.2345% 100 40)) {
  .element {
    color: lch(52.2345% 100 40);
  }
}

Gradually introduce new colour models, ensuring your design remains functional in all browsers.

Resources for Browser Support

To stay updated on browser support for LCH, LAB, and HWB colour models, refer to the following resources:

• Can I Use: A comprehensive database of browser support for HTML, CSS, and JavaScript features.
• MDN Web Docs: Detailed documentation on CSS colour models and their browser compatibility.

By keeping an eye on browser support and implementing best practices, you can confidently use LCH, LAB, and HWB colour models to enhance your web designs while ensuring a consistent user experience across all browsers.

Resources and Further Reading

To deepen your understanding of the LCH, LAB, and HWB colour models, the following resources offer comprehensive guides, tutorials, and articles. These will help you effectively incorporate these advanced colour systems into your web design projects.

• LCH Colour Model: MDN Web Docs: lch()
• LAB Color Model: MDN Web Docs: lab()
• HWB Color Model: MDN Web Docs: hwb()