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:

how to measure round-trip time using cURL

How to measure round-trip time (RTT) using cURL

Learn how to measure round-trip time (RTT) using cURL, a helpful tool used to transfer data from or to a server.

David Omotayo
Feb 26, 2025 â‹… 10 min read

React.memo explained: When to use it (and when not to)

React.memo prevents unnecessary re-renders and improves performance in React applications. Discover when to use it, when to avoid it, and how it compares to useMemo and useCallback.

Emmanuel John
Feb 26, 2025 â‹… 9 min read
React useCallback: When And How To Use It For Better Performance

React useCallback: When and how to use it for better performance

Learn how React’s useCallback hook boosts performance by memoizing functions and preventing unnecessary re-renders with practical examples and best practices.

Emmanuel John
Feb 26, 2025 â‹… 6 min read
what is the virtual DOM in react

What is the virtual DOM in React?

Learn the characteristics of the virtual document object model (DOM), explore its benefits in React, and review a practical example.

Ibadehin Mojeed
Feb 26, 2025 â‹… 9 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