Supercharge your color palette with CSS color spaces!

Supercharge your color palette with CSS color spaces!

Understand basic difference between all color spaces in CSS

TheWasmFrontier's photo
TheWasmFrontier
·

2 min read

In this micro-blog, I'll introduce you to all 16 CSS color spaces. With these superpowers, you'll be able to access a wider range of colors than ever before and create truly stunning visuals.

  • sRGB Linear - It is sRGB but in a linear version.

  • LCH - It is perceptually accurate color space, which means the amount of distance moved in color space accurately represents the change in perceived color by humans, while in sRGB change in distance doesn't need to accurately represent the change in perceived color.

  • okLCH - It is a more accurate version of LCH and easy to encode and decode.

  • LAB - It is another perceptually accurate color space the only difference is how we represent the color.

  • okLAB - It is a more accurate version of LAB.

  • Display p3 - It offers 50% more color than the sRGB color gamut, supported by newer devices.

  • Rec2020 - This color space is designed for ultra-HD videos and it has a wider range of colors than Display p3 but it is not currently supported by any major browser.

  • a98 RGB - It offers more color than Display p3, but not widely supported.

  • ProPhoto RGB - It supports the widest range of colors in any space

  • XYZ - it is device-independent color space which means color will be represented in the same way on any device. It is used to convert color from one space to another and comprises all colors visible to the average human eye.

  • XYZ d50 - A variant of XYZ which is used in photography and printing

  • XYZ d65 - A variant of XYZ which is used in designing and video

  • Hex - hexadecimal representation of colors

  • RGB - colors are represented using Red, Green and Blue, the most widely used color space right now.

  • HSL - colors are represented using Hue, Saturation and Lightness

  • HWB - colors are represented using Hue, Whiteness and Blackness. Designed to be more perceptually accurate.

here are the examples of red color in all color spaces in css

.color-spaces{
--display-p3:color(display-p3 1 0 0);
--rec2020:color(rec2020 1 0 0);
--a98:color(a98-rgb 1 0 0);
--prophoto:color(prophoto-rgb 1 0 0);
--xyz:color(xyz 1 0 0);
--lab:color(lab 53.23 80.09 67.20);
--lch:color(lch 53.23 104.55 39.99);
--oklab:color(oklab 0.62 0.22 0.12);
--oklch:color(oklch 0.62 0.25 29.23);
--srgb:color(srgb 1 0 0);
--hsl:hsl(0 100% 50%);
--hex:#FF0000;
--hwb:hwb(0, 0%, 0%);
--rgb:rgb(255,0,0);
}

If there are any corrections then please let me know, Thanks for reading

CSSCSS3webdevcolors