2022-10-28
1627
#css
Temitope Oyedele
139420
Oct 28, 2022 â‹… 5 min read

Using HSL colors in CSS

Temitope Oyedele I am a web developer and technical writer. I love to write about things I've learned and experienced.

Recent posts:

Solving The Node.js Console.Time Is Not A Function Error

Solving the Node.js console.time is not a function error

Explore the two variants of the `console.time is not a function` error, their possible causes, and how to debug.

Joseph Mawa
Nov 1, 2024 â‹… 6 min read
Why jQuery 4 Is A Good Reminder To Stop Using jQuery

Why jQuery 4 is a good reminder to stop using jQuery

jQuery 4 proves that jQuery’s time is over for web developers. Here are some ways to avoid jQuery and decrease your web bundle size.

Shalitha Suranga
Oct 31, 2024 â‹… 11 min read
How to Create a Multilevel Dropdown Menu in React

How to create a dropdown menu in React

See how to implement a single and multilevel dropdown menu in your React project to make your nav bars more dynamic and user-friendly.

Ibadehin Mojeed
Oct 30, 2024 â‹… 12 min read
Purple background with different connections between icons for an article about building Node.js modules with Rust and NAPI-RS.

Building Node.js modules in Rust with NAPI-RS

NAPI-RS is a great module-building tool for image resizing, cryptography, and more. Learn how to use it with Rust and Node.js.

Rahul Padalkar
Oct 30, 2024 â‹… 7 min read
View all posts

One Reply to "Using HSL colors in CSS"

  1. Great article!

    One point of discussion for me would be, if it would time to use the latest HSL syntax here instead. Based on the MDN reference’s browser comp table, all browsers support the newer alpha parameter and space separated syntax since 2020. And you already showed it under “What is HSL?”.

    Examples without transparency could be quickly changed to `hsl(211 96% 44%)`. “Adjusting transparency with HSLA” could then be shortened to “Adjusting transparency” and it’s CSS example from `background:hsla(11, 50%,50%, 0.473);` to `background: hsl(11 50% 50% / 0.473);`

    And a nitpick: “Cyan: 120 degrees” should be “Cyan: 180 degrees”.

    What do you think?

Leave a Reply