{"id":359759,"date":"2022-01-03T07:50:47","date_gmt":"2022-01-03T15:50:47","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=newsletters&p=359759"},"modified":"2022-01-03T07:50:49","modified_gmt":"2022-01-03T15:50:49","slug":"284-new-year-new-color-newsletter","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/284-new-year-new-color-newsletter\/","title":{"rendered":"284: New Year, New Color, Newsletter"},"content":{"rendered":"\n

[Robin]<\/strong>: Happy new year, folks! Chris wrote his annual thank you<\/a> and end of year wrap-up which breaks down everything that\u2019s happened on CSS-Tricks this year. I love starting the year reading these things, digging into the analytics, and learning about how the site is doing (considering that data often is hidden or never available on other similar websites). <\/p>\n\n\n\n

Chris writes:<\/p>\n\n\n\n

Thanks for stopping by and reading this site. If you didn\u2019t, I\u2019d be out of a job around here, and I quite like this job so I owe it all to you. Like a family holiday card, allow me to share how the year went from our perspective, both with numbers and feelings, and then do a review of our goals.<\/p><\/blockquote>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n\n\n

? Upcoming color features in CSS<\/h3>\n\n\n

I keep hearing about all the new and upcoming cool things we\u2019ll be able to do with colors in CSS soon but I haven\u2019t dug into it yet. Let me just take a look at the spec<\/a>, please hold\u2026<\/p>\n\n\n\n

Ah, I see\u2026 Huh. Interesting\u2026very interesting. Of course!<\/p>\n\n\n\n

Okay, so: there\u2019s a lot of color values in CSS: RGB, HEX, HSL, etc. And, if you\u2019re like me and work on big codebases then you likely use a combination of them. Sometimes you reach for HEX or RGBA or whatever depending on the situation even in the same codebase. Now, the problem is that if we have a HEX value we can\u2019t take that value and change it into a HSL color (with CSS alone at least). There are a few reasons why we might want to do this, perhaps the main one being that you probably have your colors stored in variables like this:<\/p>\n\n\n\n

:root {\n  --color-background: #fff;\n  --color-text: #333;\n}<\/code><\/pre>\n\n\n\n
You can use those properties like this\u2026<\/p>\n\n\n\n
.card {\n  background: var(--color-background);\n}<\/code><\/pre>\n\n\n\n
\u2026but now what happens if we want to add opacity to that HEX value we\u2019re using above? With CSS we just\u2026can\u2019t convert it RGBA or HSLA today. The best thing to do is probably convert those variables to a different format. But that kinda sucks and isn\u2019t always possible.<\/p>\n\n\n\n
This is one of many problems that the CSS Color Module 5 hopes to resolve, as Mattia Astorino mentioned a while back<\/a>:<\/p>\n\n\n\n
With the new #css Color module 5 we can define relative colors starting from a var, and manipulate the values. In this example, we take the HSL values from black, we return h s l channels untouched, and we change the transparency to be 80%.<\/p><\/blockquote>\n\n\n\n
html { \n  --bg-color: black; \n}\n\n.overlay {\n  background: hsl(from var(--bg-color) h s l \/ 80%;\n}<\/code><\/pre>\n\n\n\n
That second to last line is pretty strange to me! But that\u2019s called the relative color syntax<\/a> and it\u2019s how we convert one color value to another or do wild manipulation on that same color (it\u2019s only now dawning on me just how much manipulation is possible with these new superpowers). Note that you can manipulate\/replace those h<\/code>, s<\/code>, and l<\/code> values with calc()<\/code> and such. <\/p>\n\n\n\n
Jim Nielsen wrote about relative colors<\/a> a while ago and I read his post then and said “haha! yes!” but I didn\u2019t really understand what was happening. But now after looking at the spec, it\u2019s all coming together.<\/p>\n\n\n\n
Here, look at this future CSS:<\/p>\n\n\n\n
:root {\n  --color: #ff0000;\n}\n.selector {  \n  color: hsl(from var(--color) h calc(s - 10%) l);\n}<\/code><\/pre>\n\n\n\n
We start by defining a variable that\u2019s a HEX color. Then we set up a class name called .selector<\/code>, use the hsl()<\/code> function to create a hsl color, then we take that hex value in the variable, until finally we decrease the saturation of that new color by 10%. That\u2019s\u2026magic! I sort of can\u2019t quite comprehend how much this reconstruction of colors unlocks.<\/p>\n\n\n\n
So can we use them yet? Well, no. Relative colors are only supported in Safari Technology Preview<\/a> for now but my hunch is that this stuff will ship in other browsers soon.<\/p>\n\n\n\n
\n\n\n
? Other things that caught my eye this week<\/h3>\n\n\n