Anthony Sorace

[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

Oct 4, 2024 at 4:16pmWeb
Show threadKai KlostermannOct 4, 2024

@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
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
Show thread𝕚𝕒𝕞𝕕𝕥𝕞𝕤Oct 4, 2024
@a 1. #rgba alpha #channel
2. color-mix with #variable
3. #opacity & #inheritance
3a. opacity changes as well as content-box colors though...
Show threadChristopher Kirk-NielsenOct 4, 2024
@a `currentColor` is the "variable" that should provide what you're after. For tweaking the brightness, `color-mix(currentColor, black 10%)` or `hsl(from hsl, currentColor, h s calc(l * 0.9))`, but browser support is a little iffy, still. The background is not (yet) exposed as a keyword, but it's being discussed!
Show threadAnthony SoraceOct 4, 2024
@chriskirknielsen Oooo! The background version of this is *exactly* what I want! (Right now, anyway; knowing about currentcolor at all is new to me and likely to be useful at other times). Thanks!
Show threadbluestarultorOct 4, 2024

@a Do you mean like just adding a 10% alpha black/white?

https://www.w3schools.com/css/css_image_transparency.asp

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

Show threadAnthony SoraceOct 4, 2024
@bluestarultor No, although the (related) CSS 'filter' property can get me close to what I'm after.