Why Is Nobody Using The Hwb Color Function?

What Is Hwb?

The hwb() functional notation expresses a color in the sRGB color space according to its hue, whiteness, and blackness. According to the MDN Web Docs on hwb(), this notation was designed as a more intuitive alternative to RGB.

The name HWB stands for three components: Hue (the base color angle measured in degrees from 0-360), Whiteness (how much white to mix into the color as a percentage), and Blackness (how much black to mix into the color as a percentage). This syntax was originally proposed as a more intuitive alternative to RGB because it aligns with how people naturally think about colors--choosing a base hue and then lightening or darkening it.

The core insight behind HWB was simplicity: rather than dealing with red, green, and blue channel values that don't map to human color perception, developers could simply say "I want a blue, but lighter" by adding whiteness, or "I want a blue, but darker" by adding blackness. This mental model resonates with how designers and artists conceptualize color adjustments in tools like Photoshop or when mixing paints.

Why HSL Dominates Web Development

Despite HWB's intuitive premise, HSL has completely dominated the web development landscape. Several factors explain this phenomenon.

Familiarity and Momentum: HSL has been supported in browsers for much longer and has become the de facto standard for human-readable color definitions in CSS. When the CSS Color Module Level 4 specification was being developed, HWB was proposed alongside HSL, but HSL already had years of browser support and developer adoption. This head start created a powerful network effect--developers used HSL because everyone else used HSL, and frameworks standardized around HSL because developers used it. If you're building modern web applications, understanding HSL's dominance helps prioritize which CSS features to invest time learning.

Educational Materials: Every CSS tutorial, course, and documentation site teaches HSL first. When developers learn color manipulation in CSS, they learn HSL's hue, saturation, and lightness model. This educational momentum is nearly impossible to overcome. MDN's examples, Stack Overflow answers, and YouTube tutorials all use HSL, creating a feedback loop that perpetuates HSL's dominance.

Tooling Support: Design tools like Figma, Sketch, and color pickers overwhelmingly output HSL values. CSS preprocessors like Sass and Less have built-in HSL functions. PostCSS plugins and design system tools all work with HSL. There's simply no tooling ecosystem pushing developers toward HWB. As noted in the CSS Working Group's discussions, "there's no tooling that uses HWB, so no compatibility concerns"--but this also means there's no automated path from design tools to HWB code.

Developer Habit: Perhaps most importantly, HSL simply works well enough for most use cases. Developers who are comfortable with HSL have little motivation to learn a new color notation that offers marginal benefits at best.

Modern Alternatives Have Made Hwb Obsolete

The CSS landscape has evolved significantly since HWB was proposed. Newer features have made many of HWB's original use cases obsolete, offering more flexibility and power than HWB could ever provide.

Color-Mix Function

The color-mix() function provides a more powerful way to create tints and shades by mixing any two colors together. This includes mixing with white or black, which was HWB's primary use case:

/* Creating a tint by mixing with white */
color-mix(in srgb, #ff0000, white 20%)

/* Creating a shade by mixing with black */
color-mix(in srgb, #ff0000, black 20%)

This approach is more flexible than HWB because it works with any color space and any two colors, not just white and black. You can mix a custom brand color with a semi-transparent overlay, blend two brand colors together, or create complex color relationships that HWB's binary white/black model simply cannot express.

Oklch and Lab Color Spaces

Modern color spaces like OKLCH and Lab offer perceptual uniformity and wider color gamuts. These spaces are far superior for creating variations of an existing color while maintaining consistent visual appearance. As the CSS Working Group has noted, these modern approaches address the same problems HWB was designed to solve but with greater flexibility. When you create a lighter version of a color in HSL or HWB, the perceived lightness can jump unpredictably across different hues. OKLCH solves this by modeling colors based on human perception, making it ideal for design systems that require consistent color scaling across the entire color spectrum.

Together, color-mix() and modern color spaces address the same problems HWB was designed to solve, but with greater flexibility, better perceptual accuracy, and active development momentum from browser vendors and the CSS Working Group.

Practical Examples: Creating Color Scales

While HWB isn't widely used, it can be useful for creating consistent color scales. Here's how you might use it:

Color Scale Example

/* Primary color scale using HWB */
--color-primary-100: hwb(220 90% 90%);
--color-primary-200: hwb(220 80% 80%);
--color-primary-300: hwb(220 70% 70%);
--color-primary-400: hwb(220 60% 60%);
--color-primary-500: hwb(220 50% 50%);
--color-primary-600: hwb(220 40% 40%);
--color-primary-700: hwb(220 30% 30%);
--color-primary-800: hwb(220 20% 20%);
--color-primary-900: hwb(220 10% 10%);

How Whiteness and Blackness Interact

The HWB color space can be visualized as a triangle with three corners: pure hue, pure white, and pure black. As developer Stefan Judis explains in his blog, this triangular model makes it easy to mentally picture how colors will change. The MDN Web Docs on hwb() provide additional details on the normalization behavior.

When both whiteness and blackness are greater than zero, the color becomes muted and tends toward gray. If the sum of whiteness and blackness equals or exceeds 100%, the color function defines a shade of gray. When the sum exceeds 100%, the values are normalized proportionally.

• hwb(0 50% 50%) results in pure gray
• hwb(0 75% 25%) results in light gray
• hwb(0 25% 75%) results in dark gray

The Triangle Mental Model

To mentally model color creation with HWB, imagine a slider that moves from pure hue toward white in one direction and toward black in another. Starting at the pure hue (0% whiteness, 0% blackness), you can move toward the white corner to lighten the color or toward the black corner to darken it. The closer you get to the white-black edge (where hue is 0%), the more desaturated and gray the color becomes. This triangular mental model is actually quite intuitive once you practice it, though it differs significantly from HSL's cylinder model where saturation and lightness are independent axes.

When Might Hwb Be Useful?

Despite its lack of adoption, HWB could be useful in specific scenarios where its unique characteristics provide genuine value.

Educational contexts make an excellent case for HWB. Teaching color theory using a white-black spectrum can help beginners understand color relationships intuitively. The concepts of adding white to lighten (creating tints) and adding black to darken (creating shades) match how people traditionally learn about color in art classes. For instructors explaining color mixing fundamentals, HWB's direct approach to these operations can be pedagogically valuable.

Design systems with teams who find the whiteness/blackness mental model intuitive may prefer HWB for their internal design tokens. If a team has already adopted HWB and built tooling and patterns around it, maintaining consistency within that codebase may outweigh the friction of migrating to HSL or other formats. The cognitive load of switching conventions mid-project often exceeds the theoretical benefits of using a more widely-supported format.

Legacy projects where HWB is already in use present another clear use case for maintaining the status quo. Migrating color values from HWB to another format requires careful testing to ensure visual consistency, and for large-scale applications with extensive HWB usage, the migration cost may not justify the benefits.

The key insight is that HWB represents an interesting concept that simply didn't achieve the adoption needed to become a web standard success story. Understanding why--through the lens of tooling, education, and competing alternatives--can help developers make better decisions about which CSS features to adopt and which to watch from a distance.

Conclusion

The HWB color function represents an interesting experiment in CSS color notation that, for various reasons, never achieved mainstream adoption. While it offers an intuitive conceptual model for thinking about colors in terms of white and black additions, the combination of HSL's head start, lack of tooling support, and emergence of superior alternatives like color-mix() and OKLCH has left HWB as a feature waiting for its moment.

For developers working with CSS today, understanding HWB is valuable for comprehending color theory and CSS evolution, even if HWB itself is rarely used in production code. The function serves as a reminder that not every specification feature achieves widespread adoption, and that the web platform continues to evolve with better alternatives emerging over time.

Whether HWB remains in the specification indefinitely or eventually gets removed, its story provides insight into how web standards, developer preferences, and technological evolution interact in the complex ecosystem of CSS.

Related resources: Explore our guides on CSS color functions, modern CSS layout techniques, and building performant web applications to deepen your understanding of contemporary CSS development.

Sources

1. MDN Web Docs: hwb() - Official documentation on HWB syntax, browser support, and description
2. Stefan Judis: hwb() - a color notation for humans? - Developer perspective and practical examples
3. CSS WG GitHub Issue #6940: Do we actually need hwb()? - CSS Working Group discussion questioning HWB's future