Web developers and design systems developers often use functions to design components. With the increasing usage of design systems that support multiple platforms, and increased capability of Dark Mode in UI, this becomes even more useful to not need to manually set color, and to instead have a single source from which layouts are calculated. Currently Sass, calc() on HSL values, or PostCSS is used to do this.
- Components with color variations based on calculations from a parent. (i.e. Button with outline that uses the primary button color to adjust the size)
- Theming - Palletes based on a color or set of colors for themes. Especially when a single base system is used with multiple themes
- Uniformity among transformations between components with different primary colors
- 3 functions:
adjust-color
,mix-color
, andcontrast-color
- LCH is the default color space. You can specify transformations in another color space (ie. HSL lightness instead of the default LCH lightness -
lightness(red, lch)
). If the argument is non-compliant with the color space (i.e.lightness(red, cmyk)
), the transformation will be clipped to CMYK after an LCH transformation. - In this example, like
filter
, > 100% or 1 = positive change (i.e. lighter), and < 100% or 1 = negative (i.e. makes it darker) and/or we can do negative and positive values based on 0 (- 30% || + 30%)
- Adjusts color via:
- lightness
- chroma
- hue
adjust-color(<color>, <colorFunctions(<amount>,<optional color space>)>)
- ex.
adjust-color(red, lightness(130%) chroma(0.4));
- ex.
adjust-color(red, lightness(130%, hsl) chroma(0.4, lch));
← with color space argument
- Mix two colors by an specified ammount of the first value. See examples:
mix-color(<color1>, <color2>, <colorFunctions(<amount>,<optional color space>)>)
- ex.
mix-color(red, yellow, lightness(30%) chroma(0.8));
← 30% of red lightness and 70% of yellow lightness, 80% of red alpha and 20% of yellow alpha - ex.
mix-color(red, yellow, lightness(30%, rgb) chroma(0.8, lch));
← specifying color spaces
- Determine which of the list of colors (second input, space-separated list of values) has the highest contrast with the background (first input)
contrast-color(<bgcolor || currentBackground>, <color>{2,})
← which of these (2+) colors is the most contrasted
I like aspects of both proposals for color-adjustments, but replying here to specifically comment on mix and contrast.
mix:
I’m glad to see the default even interpolation added in that final comment, but curious if the shortcut can be extended to any single weighting value in addition to the default 50%. eg
color-mix(red, yellow, 70%)
(defaulting to lch)contrast:
I like the basic thrust, but working on design systems, I often need more control than max-contrast from a list. I’d like to see these uses considered as well:
I imagine the latter may open up too much complexity - but I’d consider the former a primary use-case.
I also like the way font-stacks and nested variable fallbacks allow you to weight your preferences - that would be another way to put the author in control of how colors are selected from the list based on ratio: make the list order meaningful.