{"id":386735,"date":"2025-06-19T09:01:18","date_gmt":"2025-06-19T15:01:18","guid":{"rendered":"https:\/\/css-tricks.com\/?p=386735"},"modified":"2025-06-26T07:42:10","modified_gmt":"2025-06-26T13:42:10","slug":"css-color-functions","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-color-functions\/","title":{"rendered":"CSS Color Functions"},"content":{"rendered":"\n
\n
\n

If you asked me a few months ago, \u201cWhat does it take for a website to stand out?\u201d I may have said fancy animations, creative layouts, cool interactions, and maybe just the general aesthetics, without pointing out something in particular. If you ask me now, after working on color for the better part of the year, I can confidently say it’s all color. Among all the aspects that make a design, a good color system will make it as beautiful as possible.<\/p>\n\n\n\n

However, color in CSS can be a bit hard to fully understand since there are many ways to set the same color, and sometimes they even look the same, but underneath are completely different technologies. That’s why, in this guide, we will walk through all<\/em> the ways you can set up colors in CSS and all<\/em> the color-related properties out there!<\/p>\n\n\n\n

\n\n\n

Colors are in everything<\/h2>\n\n\n

They are in your phone, in what your eye sees, and on any screen you look at; they essentially capture everything. Design-wise, I see the amazing use of colors on sites listed over at awwwards.com<\/a>, and I\u2019m always in awe.<\/p>\n\n\n\n

Not all color is the same. In fact, similar colors can live in different worlds, known as color spaces. Take for example, sRGB, the color space used on the web for the better part of its existence and hence the most known. While it’s the most used, there are many colors that are simply missing in sRGB that new color spaces like CIELAB<\/a> and Oklab<\/a> bring, and they cover a wider range of colors sRGB could only dream of<\/a>, but don’t let me get ahead of myself.<\/p>\n\n\n\n

\n\n\n

What’s a color space?<\/h2>\n\n\n

A color space is the way we arrange and represent colors that exist within a device, like printers and monitors. We have different types of color spaces that exist in media (Rec2020, Adobe RGB, etc), but not all of them are covered in CSS. Luckily, the ones we have are sufficient to produce all the awesome and beautiful colors we need. In this guide, we will be diving into the three main color spaces available in CSS: sRGB, CIELAB, and OkLab.<\/p>\n\n\n\n

\n\n\n

The sRGB Color Space<\/h2>\n\n\n

The sRGB is one of the first color spaces we learn. Inside, there are three color functions, which are essentially notations to define a color: rgb()<\/code>, hsl()<\/code>, and hwb()<\/code>.<\/p>\n\n\n\n

sRGB has been a standard color space for the web since 1996<\/a>. However, it’s closer to how old computers represented color, rather than how humans understand it, so it had some problems like not being able to capture the full gamut of modern screens. Still, many modern applications and websites use sRGB, so even though it is the \u201cold way\u201d of doing things, it is still widely accepted and used today.<\/p>\n\n\n\n

\n \n

The rgb()<\/code> function<\/h3>\n <\/summary>\n \n\n
\"Diagram<\/figure>\n\n\n\n

rgb()<\/code> uses three values, r<\/code>, g<\/code>, and b<\/code> which specifies the redness, greenness, and blueness of the color you want.<\/p>\n\n\n\n

All three values are non-negative, and they go from 0<\/code> to 255<\/code><\/strong>.<\/p>\n\n\n\n

.element {\n  color: rgb(245 123 151);\n}<\/code><\/pre>\n\n\n\n
It also has an optional value (the alpha<\/em> value) preceded by a forward slash. It determines the level of opacity for the color, which goes from 0<\/code> (or 0%<\/code>) for a completely transparent color, to 1<\/code> (or 100%<\/code>) for a fully opaque one.<\/p>\n\n\n\n
.element {\n  color: rgb(245 123 151 \/ 20%);\n}<\/code><\/pre>\n\n\n\n
There are two ways you can write inside rgb()<\/code>. Either using the legacy syntax<\/strong> that separates the three values with commas<\/strong> or the modern syntax<\/strong> that separates each with spaces<\/strong>.<\/p>\n\n\n\n
You want to combine the two syntax formats, yes? That’s a no-no. It won’t even work.<\/p>\n\n\n\n
\/* This would not work *\/\n.element {\n  color: rgb(225, 245, 200 \/ 0.5);\n}\n\n\/* Neither will this *\/\n.element {\n  color: rgb(225 245 200, 0.5);\n}\n\n\/* Or this *\/\n.element {\n  color: rgb(225, 245 200 \/ 0.5);\n}<\/code><\/pre>\n\n\n\n
But, following one<\/em> consistent format will do the trick, so do that instead. Either you’re so used to the old syntax and it’s hard for you to move on, continue to use the legacy syntax<\/strong>, or you’re one who’s willing to try and stick to something new, use the modern syntax<\/strong>.<\/p>\n\n\n\n
\/* Valid (Modern syntax)  *\/\n.element {\n  color: rgb(245 245 255 \/ 0.5);\n}\n\n\/* Valid (Legacy syntax)  *\/\n.element {\n  color: rgb(245, 245, 255, 0.5);\n}<\/code><\/pre>\n\n\n\n