Comments on: A Whistle-Stop Tour of 4 New CSS Color Features https://css-tricks.com/new-css-color-features-preview/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Thu, 21 Apr 2022 19:54:17 +0000 hourly 1 https://wordpress.org/?v=6.1.1 By: Joe Borg https://css-tricks.com/new-css-color-features-preview/#comment-1795492 Thu, 21 Apr 2022 19:54:17 +0000 https://css-tricks.com/?p=362285#comment-1795492 Seems like color attribute requires a standard colour profile that defines a colour space. Having srgb as an attribute confuses things but it is grandathered in.

Hsl, rgb, lab… those are methods to describe a point in a colour space not the profile in itself.

]]>
By: Andrea https://css-tricks.com/new-css-color-features-preview/#comment-1794899 Thu, 10 Mar 2022 07:27:29 +0000 https://css-tricks.com/?p=362285#comment-1794899 “Stefan expressed some doubt that this is any easier to understand than HSL, and I tend to agree. I probably just need to get more used to it, but it seems to be more abstract than simply changing the lightness or saturation.”

It might help to think of HWB as if you were a child playing with tempera colors.

Which color do you like? Pick a color tube (H).
Do you want it lighter? Add more white (W).
Do you want it darker? Add more black (B).
Did you mix white and black together in equal parts? Well, now you have to paint your cute rabbit grey, I’m sorry.

Compared to HSL, I feel HWB is actually more concrete, and thus easier to grasp.

]]>
By: NS https://css-tricks.com/new-css-color-features-preview/#comment-1794886 Wed, 09 Mar 2022 08:56:55 +0000 https://css-tricks.com/?p=362285#comment-1794886 I think it would be awesome to have an article explaining why we need display-p3, and why we can’t express all colors with RGB anymore.

Why do we have color profiles, and why can’t we all just expect #FFF to be the whitest white, and #F00 to be the reddest red, etc.

]]>
By: Victoria https://css-tricks.com/new-css-color-features-preview/#comment-1789674 Sat, 12 Feb 2022 17:44:21 +0000 https://css-tricks.com/?p=362285#comment-1789674 In reply to Eduard Mattner.

I discovered this accidentally. I was frustrated and wanted a transparency without having to convert HEX to rgb and add the A so I just added 44 at the end of my hex and Bam! transparency! Quickly, I discovered it works with short code too! #fff8 works the same as #ffffff88. I don’t know when this began, but I have been using it ever since!

]]>
By: jae https://css-tricks.com/new-css-color-features-preview/#comment-1789641 Sat, 12 Feb 2022 05:45:02 +0000 https://css-tricks.com/?p=362285#comment-1789641 In reply to Eduard Mattner.

Also note that you can use shorthand, e.g. #fc08 (rgba), which comes out like #ffcc0088 (rrggbbaa)

]]>
By: jae https://css-tricks.com/new-css-color-features-preview/#comment-1789640 Sat, 12 Feb 2022 05:42:04 +0000 https://css-tricks.com/?p=362285#comment-1789640 In reply to Eduard Mattner.

That confused me too. I’ve been using RGBa for aeons. Am I misinterpreting something?

]]>
By: Ben https://css-tricks.com/new-css-color-features-preview/#comment-1789634 Sat, 12 Feb 2022 01:02:15 +0000 https://css-tricks.com/?p=362285#comment-1789634 In reply to Eduard Mattner.

Yes, using the four-byte hex has been around for a while. But there has been no way to add alpha to a declared hex color in, say, a custom property before the new relative syntax. You could with the rgb/hsl color functions and custom properties.

]]>
By: Will Anderson https://css-tricks.com/new-css-color-features-preview/#comment-1789608 Fri, 11 Feb 2022 16:14:44 +0000 https://css-tricks.com/?p=362285#comment-1789608 In reply to Eduard Mattner.

wow this is crazy

]]>
By: Eduard Mattner https://css-tricks.com/new-css-color-features-preview/#comment-1789603 Fri, 11 Feb 2022 15:16:45 +0000 https://css-tricks.com/?p=362285#comment-1789603 “There is literally no other way to apply alpha to an existing HEX color…”

I think we’ve been able to use an implied 4th channel for a long time:
#f06d0688 will give you the colour with a transparency. With 00 being fully transparent, and ff being fully opaque.

]]>
By: Cadje https://css-tricks.com/new-css-color-features-preview/#comment-1789588 Fri, 11 Feb 2022 10:09:35 +0000 https://css-tricks.com/?p=362285#comment-1789588 very informative, thx

]]>
By: Jake Montgomery https://css-tricks.com/new-css-color-features-preview/#comment-1789580 Fri, 11 Feb 2022 04:58:31 +0000 https://css-tricks.com/?p=362285#comment-1789580 Personally I am extremely excited for lch() and would start using it as soon it gets wider browser support. Also, oklab() and oklch are not only specced but they are also supported in Safari since TP 137.

And.

]]>