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:

Using tsup To Bundle Your TypeScript Package

Using tsup to bundle your TypeScript package

Learn how to efficiently bundle your TypeScript package with tsup. This guide covers setup, custom output extensions, and best practices for optimized, production-ready builds.

Muhammad Ali
Feb 20, 2025 â‹… 7 min read
how to use react higher order components

How to use React higher-order components

Learn the fundamentals of React’s high-order components and play with some code samples to help you understand how it works.

Hussain Arif
Feb 20, 2025 â‹… 10 min read
dependency inversion principle

Understanding the dependency inversion principle (DIP)

Learn about the dependency inversion principle (DIP), its importance, and how to implement it across multiple programming languages.

Samuel Olusola
Feb 20, 2025 â‹… 8 min read
Building A Telegram Bot With GrammY

Building a Telegram bot with grammY

Build a Telegram bot with Node.js and grammY to automate text, audio, and image responses using the Telegram API and Google Gemini.

Amazing Enyichi Agu
Feb 20, 2025 â‹… 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