8 Ways to Declare Colors in CSS: Detailed Guide + Examples

8 Ways to Declare Colors in CSS: Detailed Guide + Examples
Comments Off on 8 Ways to Declare Colors in CSS: Detailed Guide + Examples, 01/06/2022, by , in Wordpress

CSS offers several different ways to declare colors, each with its own syntax, benefits, and drawbacks. It can get a bit confusing especially since they are still adding new ways.

If you are not always sure how you should go about and declare your colors in CSS, in this post we want to shine a light on this issue. In the following, we will go over different ways for assigning colors to website elements, how to use them, the pros and cons, and when to use what.

Assigning Colors in CSS

Declaring colors in CSS is generally not very hard. There are a whole bunch of CSS properties that take colors as values including color, background-color, border, box-shadow, and more. For example, here’s how you would change the text color for a paragraph element (learn other ways to customize text via CSS here).

p
color: #999;

However, there are a whole bunch of different ways you can set a color value, which is what we will talk about now.

1. HTML Color Names

The most basic way to assign a color in CSS is to simply put in a color name. If you want something to be blue, red, or green, you can simply put this in your CSS and the browsers will display it.

declare colors in css with html color names examples

Here’s what the accompanying code looks like:

#div-one
background-color: red;

#div-two
background-color: green;

#div-three
background-color: blue;

#div-four
background-color: black;

This works because there is a long list of HTML color codes that everyone agreed on back in the day and that still work.

html color codes examples

What Options Are There?

When using color names, there are lots of options too. All the base colors that you can think of are available including black, white, and lots of shades of gray. At the same time you can also choose from more exotic options like mistyrose, navajowhite, honeydew, moccasin, or mintcream.

additional html color names examples

Note that in CSS, color names are case insensitive, so you can write them however you want. Also, some colors are synonyms, such as fuchsia and magenta or darkgray/darkgrey.

The downside is that they are all plain, solid, colors without the possibility to add transparency. There is also the transparent keyword, which makes an element fully transparent, however, there is no way to make gradual changes to this. So, if transparency is something you need, assigning colors via color names is definitely not the right choice.

Should You Use HTML Color Names in CSS?

If you want, can learn all of the available color names by heart and use them to declare colors in your web projects. As mentioned, there are a lot of choices.

However, this is probably not the most economical approach and it’s also unlikely that you will always have colors that fit your particular project or use case. In truth, you rarely see CSS color declarations with color names outside of example code and pretty much never in production environments.

What you can do, of course, is to use them for inspiration and as a basis for finding the right colors for your web project. You can easily find them in other color notations as well, so they are easy to customize to your needs.

Color Names – Browser Compatibility

The good news about HTML color names is that have been around for quite a while so all browsers should be able to handle them.

2. HEX Values

HEX values are the most common way to declare colors in CSS when you have no need for controlling opacity. What do they look like? Six to eight numbers in hexadecimal format preceded by #.

declare colors in css with hex values examples

This is how to achieve the above in CSS markup:

#div-one
background-color: #46f2e1;

#div-two
background-color: #f25752;

#div-three
background-color: #f2a93a;

#div-four
background-color: #3af278;

How HEX Color Values Work

This color notation is based on RGB (red, green, blue) values. Hexadecimal numbers describe the share of each color.

Basically, the format is like this: #RRGGBB (R=red, G=green, B=blue, if you didn’t already come up with that yourself). The hexadecimal system uses values from 0 to 255 represented by the numbers 0-9 and letters a-f. The lowest is 00, highest ff. This allows you to mix the three color shares via their respective values to create all kinds of different colors.

For example, red is #ff0000 (red has the highest value, the others are not present), green #00ff00, and blue #0000ff. Black is #000000 and white #ffffff both often shortened to three-digit values #000 and #fff. Shortening also works for other colors where the two values for each color are the same, e.g. #ee88cc can become #e8c or #f0a is the same as #ff00aa.

You can also control transparency by adding two extra digits at the end that control the alpha channel:

declare colors in css with hex values including alpha channel examples

This, too, has to be between 00 (fully transparent) and ff (fully opaque) to determine the amount of transparency.

#div-one
background-color: #7f1ba6ff;

#div-two
background-color: #7f1ba6bf;

#div-three
background-color: #7f1ba67f;

#div-four
background-color: #7f1ba63f;

However, using hex values in this way is not very common. As mentioned above, they are mostly used to create solid colors in CSS, such as for text.

One of the downsides of this way of writing colors is that you don’t understand from the hex code what the color is (unless you have a lot of experience working with them). They are also hard to manipulate and create shades of without other tools that visualizes them. That’s something you can more easily do with other methods, as you will see below.

HEX Color Values – Browser Compatibility

Compatibility for hexadecimal color notation is available in pretty much every browser.

hex color notation browser compatibility

Be aware, however, that it becomes spottier when you include the transparency value.

hex color notation with alpha channel browser compatibility

3. rgb() and rgba()

The RGB system works pretty much the same way as HEX colors in that the color notations are made up of values for red, green, and blue.

declare colors in css with rgb examples

However, instead of using the hexadecimal system, in this case you write out their share in decimals or percentages and inside brackets of the rgb() CSS property.

#div-one
background-color: rgb(25, 31, 52);

#div-two
background-color: rgb(60, 63, 77);

#div-three
background-color: rgb(61, 76, 128);

#div-four
background-color: rgb(98, 121, 204);

Note that you can write it comma separated and, for modern browsers, also divided by space. So, when before red was #ff0000, now it is rgb(255, 0, 0), white is rgb(255, 255, 255) and black rgb(0, 0, 0). Instead of numbers 0-255, you can also write percentages from 0% to 100%.

Not so hard, is it?

Use rgba() to Add Transparency

What’s special about rgb() is that it also has its own functional property for adding the alpha channel for opacity. This works the same way as rgb() but you have to write rgba() instead and add a fourth value between 0.0 (fully transparent) and 1.0 (no transparency, fully opaque).

declare colors in css with rgba examples

Here, too, you can also use percent instead of numbers between 0 and 1. It’s also possible to omit the number before the decimal point and just write something like .3.

#div-one
background-color: rgba(25, 31, 52, 1.0);

#div-two
background-color: rgba(25, 31, 52, 0.8);

#div-three
background-color: rgba(25, 31, 52, 0.6);

#div-four
background-color: rgba(25, 31, 52, 0.2);

rgba() has long been go-to solution for adding transparency to site elements. It’s also more readable than hex colors. However, again, unless you are really good at color theory, you probably still have a hard time intentionally creating colors with this method.

rgb() and rgba() – Browser Compatibility

Before we move on, a quick check for browser compatibility. It’s no surprise that rgb() and rgba() are widely supported.

rgb browser compatibility

4. hsl() and hsla()

HSL color notation uses a different system to create colors. Instead of mixing red, green, and blue, it declares values for Hue, Saturation, and Lightness. Something that designers might find more intuitive and might be more familiar with. It also makes it easier to create shades of the same color because you can control saturation and lightness.

The notation in CSS is similar in format to rgb() only using hsl() instead. However, when declaring colors like this, it’s important to know that hue is defined as an angle value, which can be degrees, radians, gradians, or turns. The most common is degrees though, which is also what it defaults to when you only provide a number.

As a consequence, it usually takes a number from 0 to 360 (think of a color wheel where 0° is red, 120° green, and 240° blue) while saturation and lightness both take percentages. The less saturated a color is, the more of a shade of gray it is. When fully saturated you have the full color chosen in the hue value. At 50%, lightness is neutral, lower takes it further to black, higher closer to fully white.

Sounds confusing? Maybe this schematic will help:

hsv colorspace schematicImage: SharkD/Wikimedia

How to Use hsl() to Declare CSS Colors

Alright, enough theory, what does this look like in practice?

declare colors with hsl in css examples

If you want to achieve the above, here is how to do so in CSS:

#div-one
background-color: hsl(227, 33%, 22%);

#div-two
background-color: hsl(314, 63%, 41%);

#div-three
background-color: hsl(27, 100%, 77%);

#div-four
background-color: hsl(27, 8%, 46%);

You can also write it in different syntax, e.g. leave out the commas and separate the values only by space. If you do, make sure to be consistent for the sake of code legibility.

Again, Take Advantage of hsla() for Transparency

Similar to rgb(), you can also add the alpha channel to hsl() by using hsla() allowing you to control the opacity. It’s used the same as above with numbers between 0.0 and 1.0 or in percent.

declare colors in css with hsla examples

As a consequence, here’s is the accompanying markup for the example image above:

#div-one
background-color: hsla(314, 63%, 41%, 100%);

#div-two
background-color: hsla(314, 63%, 41%, 75%);

#div-three
background-color: hsla(314, 63%, 41%, 50%);

#div-four
background-color: hsla(314, 63%, 41%, 25%);

hsl() and hsla() are also great for automatically calculating colors with the use of CSS custom properties. If you are interested in that, this post is a good place to start.

hsl() and hsla() – Browser Compatibility

Finally, both CSS color value methods are very compatible with modern browsers. You shouldn’t run into any trouble using them to define colors in your CSS.

hsl browser compatibility

5. hwb()

Moving on to the next method, hwb() is similar to hsl(), only here the acronym stands for Hue, Whiteness, and Blackness. Hue is specified the same way as in hsl() and whiteness and blackness take percentage values.

declare colors in css with hwb examples

For the syntax, take note that, unlike earlier examples, in hwb() values are never separated by commas but only by space.

#div-one
background-color: hwb(222 22% 9%);

#div-two
background-color: hwb(353 6% 16%);

#div-three
background-color: hwb(44 7% 7%);

#div-four
background-color: hwb(135 0% 40%);

Another thing to keep in mind is that whiteness and blackness mix. So, if you want full white or black, you have to set one to 100% and the other to 0%. Otherwise, you will create a shade of the specified hue.

In addition, hwb() also takes an alpha channel, however, it does not come with it’s own property (e.g. hwba()). Instead, if you want to modify transparency, you have to add it at the end separated by a forward slash like so:

background-color: hwb(222 22% 9% / 25%);

Aside from that, it’s the same as always, use 0.0 to 1.0 or percent to control it.

hwb() – Browser Compatibility

Denoting CSS colors with hwb() is relatively new, therefore, support in browsers is a bit more spotty. At the moment, only Firefox and Safari are able to render it.

hwb browser compatibility

6. lab()

Now we get to one of the first properties that was made to create device-independent colors. lab() is supposed to be able to display the entirety of human vision. The RGB and HSL systems have the problem that they are not uniform and in HSL, depending on the hue you choose, lightness can have a very different effect.

inconsistent lightness level in hsl examples

For example, the colors above all have the same lightness value. Would you think they all have the same level of lightness when looking at them?

lab() is given in the CIE L*a*b* color space (also written CIELAB). It is a color space that is available in tools like Photoshop and a good choice if you want your colors to look the same on screen and in print.

l stands for lightness, a and b stand for axes of the Lab colorspace, which go from green to red and blue to yellow respectively. Negative values on a go toward green, positive toward red. The same is true for the b axis with blue and yellow.

When creating colors in CSS using lab(), you give lightness in percent (0% being black 100% white) and a/b as distances.

declare colors in css with lab examples

The values are not separated by commas.

#div-one
background-color: lab(74.19% -20.68 -29.03);

#div-two
background-color: lab(66.50% -36.52 17.13);

#div-three
background-color: lab(48.41% 60.86 15.95);

#div-four
background-color: lab(75.97% 10.26 57.64);

In theory, lightness can be more than 100%, in fact up to 400% and values for a and b are unbounded. However, in actuality, there are limits, not least because of what screens are able to display. For that reason values for a and b are limited to +/-160. In addition, can also add an alpha channel with a slash as we have already seen for hwb().

background-color: lab(74.19% -20.68 -29.03 / 43%);

Browser Compatibility

lab() color definitions are currently only supported by Safari because they are still a bit of an experimental feature.

lch lab browser compatibility

7. lch()

Colors in the LCH space are similar to LAB but they use Chroma and Hue as coordinates. l is again lightness in percent that can go past one hundred, h is again the angle on a color wheel between 0 and 360 degrees, and c is the amount of color, similar to saturation.

declare colors in css with lch examples

Theoretically there is no limit to c but browsers can only display values between 0 and 230. Beyond that, adding more saturation will not make a difference. The syntax is otherwise basically identical with lab() the including ability to add an alpha value at the end via forward slash.

#div-one
background-color: lch(59.65% 68.2 22.81);

#div-two
background-color: lch(61.53% 62.73 12.84);

#div-three
background-color: lch(66.54% 63.91 46);

#div-four
background-color: lch(73.64% 76.75 70.1);

/* example for use of alpha channel

background-color: lch(59.65% 68.2 22.81 / 67%);

*/

Browser Compatibility

Since lab() and lch() are based on the same color space, the latter is also currently only supported in Safari.

8. color()

The final method to declare colors in CSS is using color(). It is another experimental feature that’s not really available for production yet. It allows you to display colors in a specified space that you can define via @color-profile and check for with the color-gamut media query.

All of these are not yet adopted, so this is more of a theoretical thing. With color(), you define a color space, then include parameters or names for the color you want to use plus an optional alpha value.

#div
background-color: color(display-p3 0.75 0.5 0.523);

You don’t really have to worry about this yet, I just wanted to tell you that it’s on the books.

Browser Compatibility

As the examples before, currently only Safari knows what you are talking about if you try to use this.

color browser compatibility

Final Thoughts: CSS Color Declarations

Knowing how to declare colors in CSS is a crucial thing if you want to do anything related to web or front-end design. Especially since there are different methods to do so.

Above, we have gone over the most important approaches, their benefits and drawbacks, and how to use them. We have also taken a look at some things to come.

If you are a normal user, you will most likely use hex values plus rgba() whenever you need something transparent. hsl() is a great option for designers. Everything else will become more important over time, especially as screens get better.

What’s your favorite way to declare colors in CSS? Any thoughts on the above? Let us know in the comment section below.

About Vikram Rout

Vikram Rout has been a blogger, digital marketer and an SEO expert at Pixxelznet.com, one of the fastest growing custom design crowdsourcing platforms. Over the years, he has been helping small businesses and startups improve website design and SEO strategy, content marketing and user experience. You can engage with him on here.