Anthony SoraceOct 4, 2024

[Edit: see response from @chriskirknielsen below for the "right" answer (currentcolor) and @c0debabe for a workaround.]

In CSS, when defining the "color" or "background" for an item, is there a way to say "10% lighter/darker than whatever you're inheriting"?

I know I can define a CSS var up front and use that throughout, but that's not what I'm looking for. I suppose I want an "automatic variable" for "whatever this value would be if I weren't touching it".

Is that a thing?
#css

Show threadKai Klostermann

@a https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors#using_custom_properties

Relative colors with custom properties should do the trick.

Using relative colors - CSS | MDN

The CSS colors module defines relative color syntax, which allows a CSS <color> value to be defined relative to another color. This is a powerful feature that enables easy creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants — enabling more effective color palette creation.

MDN Web Docs
Oct 4, 2024 at 4:37pmWeb
Show threadAnthony SoraceOct 4, 2024
@OddDev Yes, but I want to avoid custom properties. I want to be able to refer to “whatever it already is“, including if that comes from the user agent style sheet, where I can’t define those.
Show threadJosh “Yoshi” VickersonOct 4, 2024

@a @OddDev I haven't tried, but relative colors with the `currentcolor` keyword might work for “color”. Not sure if there’s anything for background without custom properties

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword

<color> - CSS: Cascading Style Sheets | MDN

The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.

MDN Web Docs