What do the color() and l() function in a CSS value mean?

Question

Today I encountered some code when digging in the Ghost code. I'm trying to create the same styling in my React app after extracting data from the API.

I found this:

:root {
    /* Colours */
    --blue: #3eb0ef;
    --green: #a4d037;
    --purple: #ad26b4;
    --yellow: #fecd35;
    --red: #f05230;
    --darkgrey: #15171A;
    --midgrey: #738a94;
    --lightgrey: #141e24;
    --whitegrey: #e5eff5;
    --pink: #fa3a57;
    --brown: #a3821a;
    --darkmode: color(var(--darkgrey) l(+2%));
}

.post-full-content pre {
    overflow-x: auto;
    margin: 1.5em 0 3em;
    padding: 20px;
    max-width: 100%;
    border: color(var(--darkgrey) l(-10%)) 1px solid;
    color: var(--whitegrey);
    font-size: 1.4rem;
    line-height: 1.5em;
    background: color(var(--darkgrey) l(-3%));
    border-radius: 5px;
}

What is the l() function in the CSS? I can't find it anywhere. WebStorm doesn't recognise it, nor VSCode. It also doesn't work in my CRA app. I don't think Ghost is using any CSS processor afterwards either. So what is it?

I found out that gatsby-ghost-starter has it in their code as well.

But it's not rendering for my app:

Ghost app:

You're looking at the wrong element. You're looking at `.post-full-content pre`, not `.site-archive-header .no-image .site-header-content`. — Dai, Jul 29 '20 at 06:48
Ah sorry, updated the css file. They actually did that on the `.post-full-content pre` class too! — Robert Tirta, Jul 29 '20 at 06:54
Thanks! Although I still don't get why there isn't much documentation about it anywhere. Also, not an expert but i'm not sure why its not working on my Create react app. Haven't tried it in Nextjs but its working in Gatsby. Possibly some postcss or webpack config — Robert Tirta, Jul 29 '20 at 09:34
@RobertTirta This should be documented somewhere, and as [Charlie](https://stackoverflow.com/users/4185234/charlie) says in [the answer](https://stackoverflow.com/a/63147847), there's some [source available](https://topaxi.codes/modifying-css-colors-with-the-color-function/). — Praveen Kumar Purushothaman, Jul 29 '20 at 10:01

Charlie · Accepted Answer · 2020-07-31T05:49:50.477

24

It is a part of HSL/HWB Adjuster and is for adjusting the lightness - the others being saturation, whiteness and blackness. (shortcuts s, w, b)

[saturation( | s(] ['+' | '-' | *]? <percentage> )
[lightness( | l(] ['+' | '-' | *]? <percentage> )
[whiteness( | w(] ['+' | '-' | *]? <percentage> )
[blackness( | b(] ['+' | '-' | *]? <percentage> )

So, the statement

color(var(--darkgrey) l(+2%));

means adjust lightness of the "darkgray" by +2%

Here are some details on modifying colors with color() function

Edit:

As of July, 2020, this feature is just a draft. The other answer contains a lot of details on that line.

edited Jul 31 '20 at 05:49

answered Jul 29 '20 at 06:47

Charlie

22,886
11
59
90

1

The linked article is from 2015, but I can't find references to the HSL/HWB adjusters in CSS Colors Level 4, but I do see references in CSS Colors Level 5 (which is still a Working Draft). This is strange. – Dai Jul 29 '20 at 06:49
Huh.. That's very clear now thanks! Do I need some extra preprocessor to use it in my CRA? I don't think its renderring correctly.. I don't know which package is gatsby or ghost using to get that func – Robert Tirta Jul 29 '20 at 06:53

Zombo · Answer 2 · 2020-07-29T18:07:36.267

2

Personally I feel the other answer lacking in practical details, so here they are. Before you can consider using any of this, you need to know that these are not currently widely available functions. In fact, as of now it seems they are only supported by Safari:

https://caniuse.com#feat=css-color-function

and notably are not currently supported with Firefox or Chrome:

They are documented with Working Draft CSS Color Module Level 4:

https://w3.org/TR/2019/WD-css-color-4-20191105

However as can be seen below, the current (and only) recommended version is CSS Color Module Level 3, so anything other than this should only be used in a test like environment:

https://w3.org/TR?title=color

edited Jul 29 '20 at 18:07

answered Jul 29 '20 at 18:02

Zombo

1
62
391
407

2

While these links might be useful in understanding support for the property, they don't really answer the question of what the `l(-10%)` value means/is doing, which is what OP is asking. – TylerH Jul 29 '20 at 18:09
3

OP is not trying to use it; his attempts were just part of the process of trying to figure out what it does. OP's question clearly asks "what is this" in the title and body. It doesn't say "how can I use it" or "why isn't it working in my attempt" anywhere. – TylerH Jul 29 '20 at 21:12
@TylerH the point of an XY question is **it doesnt matter what the OP thinks they want**. Even if he knew what the function does, it doesnt matter because he cant use it with his browser, as was demonstrated by OP himself. The real question is the one I answered, which is essentially "what is up with these strange functions?" – Zombo Jul 29 '20 at 23:35
While I fail to see a fair amount of XY problem characteristics in OPs problem, I certainly agree that I should have included this details in my answer. That part is true. I will cite your answer in my answer and +1 – Charlie Jul 31 '20 at 05:48

What do the color() and l() function in a CSS value mean?

2 Answers2