CSS color functions and custom properties

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

I know I’m really late to the party, but I finally understood why people find color functions like hsl(), hwb(), or lab() so appealing.

There are many reasons, but one of them is that in combination with custom properties, working with color functions is so much easier, cleaner, and understandable compared to working with hex colors or rbg().

Here's an example. Let's say we have a simple status component.

[role="status"] {
  --background-color: rgb(211 232 248);
  
  background-color: var(--background-color);
  padding: 1rem;
  margin-block-end: 1em;
}

<div role="status">
  <strong>Information:</strong> You're logged in as “Tyler Durden”.
</div>

If I wanted to add a border to the component with a slightly darker variation of the background color, I would usually take the color picker in dev tools and just pick a random darker color.

[role="status"] {
  --border-color: rgb(122 186 235);

  border: 2px solid var(--border-color);
}

That's fine, but with hsl() it's way more intuitive. Instead of picking a random color, I use the background color and I just reduced the l value (lightness) from 90% to 70%.

[role="status"] {
  --background-color: hsl(206deg 74% 90%);
  --border-color: hsl(206deg 74% 70%);
  
  background-color: var(--background-color);
  border: 2px solid var(--border-color);

  padding: 1rem;
  margin-block-end: 1em;
}

To avoid repetition, I store the h (hue) and s (saturation) value in custom properties.

[role="status"] {
  --h: 206deg;
  --s: 74%;
  
  --background-color: hsl(var(--h) var(--s) 90%);
  --border-color: hsl(var(--h) var(--s) 70%);
}

What’s great about that is that creating variations of this component in different colors is now super easy. All I have to do is change the h value.

.warning {
  --h: 40deg;
}

.error {
  --h: 0deg;
}

<div role="status" class="warning">
  <strong>Warning:</strong> Your free trial is ending in 4 days.
</div>

<div role="status" class="error">
  <strong>Error:</strong> Your username and password don't match.
</div>

Theoretically, you don’t even need the classes.

<div role="status" style="--h: 40deg;">
  <strong>Warning:</strong> Your free trial is ending in 4 days.
</div>

<div role="status" style="--h: 0deg;">
  <strong>Error:</strong> Your username and password don't match.
</div>

Here's the final CSS code.

[role="status"] {
  --h: 206deg;
  --s: 74%;
  
  --background-color: hsl(var(--h) var(--s) 90%);
  --border-color: hsl(var(--h) var(--s) 70%);
  
  background-color: var(--background-color);
  border: 2px solid var(--border-color);

  padding: 1rem;
  margin-block-end: 1em;
}

.warning {
  --h: 40deg;
}

.error {
  --h: 0deg;
}

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

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

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2023-01-12T09:38:54+00:00) CSS color functions and custom properties. Retrieved from https://www.scien.cx/2023/01/12/css-color-functions-and-custom-properties/

MLA

" » CSS color functions and custom properties." Manuel Matuzović | Sciencx - Thursday January 12, 2023, https://www.scien.cx/2023/01/12/css-color-functions-and-custom-properties/

HARVARD

Manuel Matuzović | Sciencx Thursday January 12, 2023 » CSS color functions and custom properties., viewed ,<https://www.scien.cx/2023/01/12/css-color-functions-and-custom-properties/>

VANCOUVER

Manuel Matuzović | Sciencx - » CSS color functions and custom properties. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/12/css-color-functions-and-custom-properties/

CHICAGO

" » CSS color functions and custom properties." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/01/12/css-color-functions-and-custom-properties/

IEEE

" » CSS color functions and custom properties." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/01/12/css-color-functions-and-custom-properties/. [Accessed: ]

rf:citation

» CSS color functions and custom properties | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/01/12/css-color-functions-and-custom-properties/ |

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.