Here’s what I didn’t know about “color”

This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović

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.

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

a {
  color: #237680;
}

circle {
  fill: currentColor;
}

<a href="#">
  Hello World!
  <svg height="30" width="30" focusable="false">
    <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>

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: '*';
}

text-shadow

.parent span {
  text-shadow: 5px 10px;
}

text-decoration-color

.parent span {
  text-decoration: overline underline;
}

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;
}

column-rule-color

.parent p {
  columns: 3;
  column-rule: solid;
}

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%); /* = #FFFFFF */
}

hsl(0, 100%, 100%)

body {
  background: hsl(0, 100%, 0%); /* = #000000 */
}

hsl(0, 100%, 0%)

body {
  background: hsl(0, 100%, 50%); /* = #FF0000 */
}

hsl(0, 100%, 50%)

body {
  background: hsl(0, 50%, 50%); /* = ##bf4040 */
}

hsl(0, 50%, 50%)

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

body {
  background: hsla(0, 100%, 50%, 0.5); /* = rgba(255, 0, 0, 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); /* = rgba(255, 0, 0, 0.15*/
  background: hsl(0 100% 50% / 15%) /* = rgba(255, 0, 0, 0.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

Thanks for reading ❤️. In part 3 I'll probably write about text-emphasis or column-rule ?.

This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2020-04-19T06:58:54+00:00) Here’s what I didn’t know about “color”. Retrieved from https://www.scien.cx/2020/04/19/heres-what-i-didnt-know-about-color-2/

MLA

" » Here’s what I didn’t know about “color”." Manuel Matuzović | Sciencx - Sunday April 19, 2020, https://www.scien.cx/2020/04/19/heres-what-i-didnt-know-about-color-2/

HARVARD

Manuel Matuzović | Sciencx Sunday April 19, 2020 » Here’s what I didn’t know about “color”., viewed ,<https://www.scien.cx/2020/04/19/heres-what-i-didnt-know-about-color-2/>

VANCOUVER

Manuel Matuzović | Sciencx - » Here’s what I didn’t know about “color”. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2020/04/19/heres-what-i-didnt-know-about-color-2/

CHICAGO

" » Here’s what I didn’t know about “color”." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2020/04/19/heres-what-i-didnt-know-about-color-2/

IEEE

" » Here’s what I didn’t know about “color”." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2020/04/19/heres-what-i-didnt-know-about-color-2/. [Accessed: ]

rf:citation

» Here’s what I didn’t know about “color” | Manuel Matuzović | Sciencx | https://www.scien.cx/2020/04/19/heres-what-i-didnt-know-about-color-2/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.