Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

hsl

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

like image 940
Robert Tirta Avatar asked Jul 29 '20 06:07

Robert Tirta


People also ask

What is the function of color in CSS?

The CSS color() function allows the browser to display colors in any color space, such as the P3 color space which can display colors outside of the default sRGB color space.

What are the CSS color values?

Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.

What is the color property in CSS is used to set the color of HTML elements?

The color property in CSS is used to set the color to text, the background of the webpage, and also to set the color of borders. 2. color-name: By directly specify the name of the color like blue, green, yellow, white, black, etc.


1 Answers

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.

like image 140
Charlie Avatar answered Oct 02 '22 00:10

Charlie