CODEWITHSUNDEEP
csshsl
Robert Tirta
Robert Tirta

Reputation: 2911

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

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:

My app

Ghost app:

ghost app

Upvotes: 18

Views: 1014

Answers (2)

Charlie
Charlie

Reputation: 23858

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.

Upvotes: 24

Zombo
Zombo

Reputation: 1

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:

  1. https://bugzilla.mozilla.org/show_bug.cgi?id=1128204
  2. https://bugs.chromium.org/p/chromium/issues/detail?id=1068610

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

Upvotes: 2

Related Questions