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:

Build A React AI Image Generator With Hugging Face Diffusers

Build a React AI image generator with Hugging Face Diffusers

Build a React-based AI image generator app offline using the Hugging Face Diffusers library and Stable Diffusion XL.

Andrew Baisden
May 29, 2025 â‹… 10 min read
Gemini 2.5 and the future of AI reasoning for frontend devs

Gemini 2.5 and the future of AI reasoning for frontend devs

Get up to speed on Google’s latest breakthrough with the Gemini 2.5 model and what it means for the future of frontend AI tools.

Chizaram Ken
May 29, 2025 â‹… 5 min read
Exploring The Top Rust Web Frameworks

Exploring the top Rust web frameworks

In this article, we’ll explore the best Rust frameworks for web development, including Actix Web, Rocket, Axum, warp, Leptos, Cot, and Loco.

Abiodun Solomon
May 28, 2025 â‹… 11 min read
How To Use The CSS Cursor Property

How to use the CSS cursor property

A single line of CSS can change how users feel about your UI. Learn how to leverage the cursor property to signal intent, improve interaction flow, and elevate accessibility.

Chizaram Ken
May 28, 2025 â‹… 6 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