I don't even need to open a color picker. With a bit of practice, you'll be able to immediately picture any color when you see the hsl() value.Īnd that means we can easily tweak values, on the fly. It aligns closely with how we tend to think about color.

The wonderful thing about HSL is that it's intuitive. Quick: What color is #0F52B7? How about #F3E248? But those benefits come with some pretty hefty tradeoffs.Įven if you're comfortable with hexadecimal notation, it's still pretty tough to decipher. They're terse, easy to copy/paste between design software and our code, and universal. I know a lot of devs like using hex codes. At least until LCH gains widespread browser support. Which one should you actually use in your work? So, we've completed our tour, and seen lots of different color formats *.

Link to this headingPicking the right color format So, if we want to use the P3 color space, we need to use a different color format. If I choose to use the rgb() syntax (or hex codes, or hsl()), I can only ever specify colors in the sRGB color space. Unfortunately in CSS, the color space is linked to the color format. I really like this image, from a wonderful WebKit blog post: P3 extends the standard sRGB color space, giving us access to brighter and more vibrant colors.

You might have better luck checking on your mobile device! iPhones in particular have supported wide-gamut color for a few years now.) If so, it likely means that your monitor or browser doesn't support wide-gamut color formats. (There's a good chance these two squares look identical to you. On the right, however, I'm using the P3 color space. It's the reddest red possible in the sRGB color space. Take a look at the following two red squares: There are millions of possible colors in sRGB, but it doesn't come close to capturing the full range of colors the human eye is capable of seeing. All of the true color formats we've seen so far - rgb(), hex codes, and hsl() - are all bound by the “standard RGB color space”, commonly abbreviated as sRGB.Ī color space is a collection of available colors, the palettes we have to pick from. So, this blog post is about color formats, the syntaxes we use to specify colors.

Chrome beat lab