This is a link to the original post. I know it's too long, so I split it into smaller posts and made them into a series, so it may be easier to follow.
There are plenty of great articles online that explain colors in CSS. They focus on RGB, HEX, HSL, and named colors and give detailed descriptions of each of them. So, if those articles are great... why should you read this one? How is it different?
One of the beauties of HTML, CSS, and Javascript is that they are in a state of continuous change and improvement: things that were broken are fixed, new standards are added, old ones are removed... And the colors in CSS are no exception.
CSS colors have gone through many changes over time and, although the core remains, new changes were introduced over the past few months that may shape CSS differently in the future and we should know.
For example:
You have used the comma-separated syntax
rgb(255, 255, 255)... but did you know that it is considered legacy, and the notation moving forward should be space-separated:rgb(255 255 255)?You know the functions
rgb()andrgba()... but did you know that those functions are synonyms? So you can dorgb(255, 0, 0, 1)orrgba(255, 0, 0)and get the same result.You know about RGB, HEX, and HSL colors... but have you heard about HWB, LAB, LCH, or CMYK colors in CSS?
The idea of this article is not only to review the basics for colors in CSS –there are already great articles like these from CSS-Tricks or DEV–, but also to explore new additions, format changes, or peculiarities that happened over the past few months and became available in the latest CSS Color Module Level 4 Editor's Draft.
For this article, I ran color tests on the following browsers:
- Chrome and Chromium-based browsers (Brave, Edge) on Mac and Windows
- Firefox on Mac
- Safari on Mac
- Edge (not Chromium) on Windows
- Chrome on Android
- Safari on iOS
Let's start with the classics: RGB, HEX, and HSL.