css – Use color names, RGB or hexa?

Question:

In this MDN documentation I find a huge list of color names that can be used in CSS with their values ​​in hexadecimal. For example:

--------------------------------------
| nome em En | nome em Pt |   hexa   |
--------------------------------------
| black      | preto      | #000000  |
--------------------------------------
| silver     | prata      | #c0c0c0  |
--------------------------------------
| white      | branco     | #ffffff  |
--------------------------------------
| red        | vermelho   | #ff0000  |
--------------------------------------

To apply a red background ( red ) to a div I could use:

usando o nome da cor:             usando valor hexadecimal:

div{                              div{
   background-color: red;   OU       background-color: #ff0000;
}                                 }

Or using RGB:

div{
   background-color: rgb(255, 0, 0);
}

Personally I find it much more practical to use red than #ff0000 , and apparently I've never run into problems using the names, but I'm not 100% sure if this is good practice or there is a cross-browser issue.

My question is whether I can just use the color names instead of the hexadecimal or RGB value, and whether that implies some sort of browser incompatibility. Which would be the most recommended to use and why?

Answer:

I'll leave some points in favor of both:

1. Ease of maintenance and modifications during development:

Changing the tone of a color to darker or lighter or even applying an opacity is simpler with hex and rgb, just increase or decrease the values ​​and add the alpha:

Maybe background-color: #ff0000; not quite what I wanted, maybe a darker red with a little opacity, just use rgba(200, 0, 0, 0.7) or #99000099 (RGBA hexadecimal notation (#RRGGBBAA, #RGBA) is not supported in all browsers)

2. Simpler to record

If you only want to use color names, you will need to look elsewhere all the time to find out what the name of that color is, or else record the name of several colors

Using RGB or HEX just understand that the colors are made up of three parts (4 if you use opacity):

#001122                        rgb(0, 1, 2)
00 -> vermelho      OU         0 -> vermelho
11 -> verde                    1 -> verde
22 -> azul                     2 -> azul

Knowing this is just mixing

3. "This is the color"

Maybe you are surfing the internet and suddenly look at a website, advertisement or something and "this is the color" you were looking for for your website, what do you do? at least what I do, I inspect the element and see the color used, if it's an image, the chromer allows passing the mouse over it and it tells you what that color is in HEX, RGBA and HSLA, but it doesn't say the name of the color, for that it would be a step further, look for a converter and see what the name of the color is.

But of course, using the names has its advantages:

1. It's more intuitive, at least for me

If you are making a simple and quick change probably the first thing to think about when adding a gray background is gray and not #808080 or rgb(128, 128, 128)

2. Help in English

If you want to learn, improve or even study for the test, using the color names will help

Note: it is possible to use opacity with color names but it is necessary to use one more attribute ( opacity ), but, in my opinion, with GRB or HEX it is much easier, since the opacity applied by opacity is, in all, background colors , of the text, border…, if you just want to apply it to one of these, it will take work

Scroll to Top