Problem 1: Modifying Opacity of a Hex Color in CSS

• Option 1: Use a CSS pre-processor like Sass. Example: $brand-color: #9c3ce7;, background-color: rgba($brand-color, 0.5);.
• Option 2: Use vanilla CSS with custom variables. Example: :root { --brand-color: rgb(156 60 231 / var(--brand-opacity)); }, --brand-opacity: 0.5; background-color: var(--brand-color);. But it requires including the rgb() version of each color.

Problem 2: Dealing with Lighter or Darker Variations of a Main Color in CSS

• With absolute values like hex or rgb, it's not possible to edit the color easily without opening a color picker.
• Example: For a primary button, on hover, it should become slightly darker. With absolute colors, it might be done like --btn-bg-color: #9c3ce7; --btn-bg-color-hover: #9c3ce7; background-color: var(--btn-bg-color);, and the darker color is picked manually using a color picker.

CSS Relative Colors Syntax

• Syntax: color-function(from origin-color channel1 channel2 channel3 / alpha(optional)).
• Example: border-color: rgb(from #000 r g b / 0.1); means get the rgb values from #000 and change the alpha to 0.1.

Altering Color Channels

• With calc() and relative colors, we can modify any color channel.
• In hsl() color function, we can change the lightness channel to make the color lighter or darker. Example: background-color: hsl(from #9333ea h s calc(l + 10)); for lighter, and background-color: hsl(from #9333ea h s calc(l - 10)); for darker.
• lch() color space is designed for human perception and can give more consistent colors compared to hsl().

Using color-mix() Function

• As a fallback for relative colors, color-mix() can be used to adjust opacity or generate color shades.
• Example: border-color: color-mix(in srgb, #000 10%, transparent); to adjust opacity. background-color: color-mix(in srgb, #8136ba, black 10%); to get a darker variation of a color.
• We can use a feature query to fallback to color-mix(). Example: @supports (color: rgb(from #000 r g b / 0.1)) { border-color: rgb(from #000 r g b / 0.1); }

Use Cases for Relative Colors

• Changing Opacity or Alpha:

  • Button border: border-color: rgba(from #000 r g b / 0.1);. Example with different alpha values for "Cancel" button.
  • Dynamic gradient: Using a package like Fast Average Color to get the dominant color and apply opacity with relative color.
• Darker Color: Use hsl() and calc() to modify the lightness channel. Example: background-color: hsl(from #9c3ce7 h s calc(l - 20));
• Lighter Color: Similar to darker color, just change the sign in calc(). Example: background-color: hsl(from #9c3ce7 h s calc(l + 20));
• Consistent Contrast Ratio: In oklch() color space, the lightness is perceptually uniform, giving better contrast ratio compared to hsl().
• Better White Alternative: Use relative colors to alter lightness and chroma values for text color based on background color.
• Gray Variant with oklch(): Set chroma to 0 in oklch() to grayscale a color. Example for a disabled button.
• Multiple Variants of a Color: Create multiple variants of a main color dynamically using oklch(). Example from TechCrunch design.
• Complementary Color: Use relative colors to get the complementary color. Example with oklch() and comparison with hsl().

Conclusion

• CSS relative colors offer a new way to generate colors dynamically. It's new but worth trying.

Further Resources

• CSS relative color syntax
• Color Formats in CSS
• LCH is the best color space