This is part 2 of my series Here’s what I didn’t know about… in which I try to learn new things about CSS. This time I'm trying to find out what I didn’t know about the color property.

When setting the CSS color property, 2 things happen.

The foreground color value of an element's text changes. The currentcolor value changes.

a {

color : #237680 ;

}



circle {

fill : currentColor ;

}

< a href = " # " >

Hello World!

< svg height = " 30 " width = " 30 " >

< circle cx = " 15 " cy = " 15 " r = " 10 " fill = " red " />

</ svg >

</ a >

Hello World!

currentColor is the default color value of some properties

Usually when I work with the border property, I change the width and color of the border. That’s probably why I’ve never noticed that the default value of border-color is currentColor .

.parent {

color : #ca3041 ;

border-style : solid ;

}

< div class = " parent " >

yo!

</ div >

yo!

So, if you change the color value of an element, its border color changes, too.

That’s the case for most properties that have a color.

text-emphasis-color

.parent em {

text-emphasis-style : "*" ;

}

WTF is text-emphasis?

text-shadow

.parent span {

text-shadow : 5px 10px ;

}

yo!

text-decoration-color

.parent span {

text-decoration : overline underline ;

}

yo!

caret-color

The user agent selects an appropriate color for the caret. This is generally currentcolor, but the user agent may choose a different color to ensure good visibility and contrast with the surrounding content, taking into account the value of currentcolor, the background, shadows, and other factors.

https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

input {

color : #ca3041 ;

}

The text and caret color should be red



outline-color

.parent span {

outline-style : dotted ;

}

yo!

column-rule-color

.parent p {

columns : 3 ;

column-rule : solid ;

}

I didn’t know that column-rule exists. How did I miss that?

Now that I've written it down, it absolutely makes sense and I guess I subconsciously knew how most of the properties behave, but I just wasn't aware. Now I am. :)

HSL colors

Yes, I know, HSL colors are not specific to the color property and they’ve been around for forever (IE 9+), but I’ve never used them and I don’t know how they work. Now is a good time to find out.

HSL (Hue, Saturation, Lightness) is an alternative representation of the RGB color model.

Hue

H is an angle of the color circle. It can be defined using 4 different units.

deg (or unitless): a value between 0 and 360. Red: 0deg, Green: 120deg, Blue: 240deg.

rad : a value between 0 and 2π (~6.2832). (Red: 0rad, Green: 2.0944rad, Blue: 4.1888rad)

grad : a value between 0 and 400. (Re: 0grad, Green: 133.33grad, Blue: 266.66grad)

turn : a value between 0 and 1. (Re: 0grad, Green: 0.333turn, Blue: 0.6666turn)

For example, a right angle is 90deg = 100grad = 0.25turn ≈ 1.5708rad

This page about the <angle> CSS data type on MDN helped me better understand how these units relate.

Saturation

S is a percentage. 0% is fully unsaturated (gray), 100% is fully saturated.

Lightness

L is a percentage. 0% lightness is black, 50% lightness is default, and 100% lightness is white.

body {

background : hsl ( 0, 100%, 100% ) ;

}

hsl(0, 100%, 100%)

body {

background : hsl ( 0, 100%, 0% ) ;

}

hsl(0, 100%, 0%)

body {

background : hsl ( 0, 100%, 50% ) ;

}

hsl(0, 100%, 50%)

body {

background : hsl ( 0, 50%, 50% ) ;

}

hsl(0, 50%, 50%)

There’s also hsla, which adds support for a fourth parameter (alp﻿ha).

body {

background : hsla ( 0, 100%, 50%, 0.5 ) ;

}

hsla(0, 100%, 50%, 0.5)

CSS Colors Level 4 adds support for space-separated values.

body {

background : hsl ( 0 100% 50% / .15 ) ;

background : hsl ( 0 100% 50% / 15% )

}

hsl(0 100% 50% / 15%)

Many designers find HSL more intuitive than RGB, since it allows hue, saturation, and lightness to each be adjusted independently. HSL can also make it easier to create a set of matching colors (such as when you want multiple shades of a single hue).

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