Use color, RGB or hexa names?

Question

In this MDN documentation I find a huge list of color names which can be used in the CSS with their respective hexadecimal values. 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 convenient to use red than #ff0000, and apparently I’ve never encountered problems using the names, but I’m not 100% sure if that’s good practice or there’s some problem between browsers.

My question is whether I can use only names of colors instead of the hexadecimal or RGB value, and whether this implies some kind of incompatibility between browsers. Which would be the most recommended use and why?

Answer 1

I will make a few points in favour 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 alpha:

Maybe background-color: #ff0000; not quite what I wanted, maybe a darker red with a small 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 consult all the time elsewhere to find out what is the name of that color, or write the name of various colors

Using RGB or HEX just understand that the colors are formed by three parts (4 if using 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’re surfing the internet and suddenly you look at a website, ad or something and "this is the color" that you were looking for for your site, what do you do? at least what I do, inspect the element and see the color used, if it is an image, the chromer allows you to pass the mouse over it tells you what is that color in HEX, RGBA and HSLA, but does not say the name of the color, for that would be a step further, find some converter and see what color name

But of course, using names has its advantages:

1. It is more intuitive, at least for me

If you are making a simple and quick change probably the first thing you think about when putting 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 names of colors already helps

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

Answer 2

The biggest difference is in your color definition power, using HEX you can define color much more precisely which you want than using RGB and the literal name. In addition, even with browsers seeking a standardization, it can occur that, for the same color defined with the literal name, two browsers present slight differences.

An interesting point is to use HEX makes the page render a little faster, the difference is "more notavél" if you add RGBA in the list.

---

Outside the links added above these posts can complement reading:

https://www.quora.com/Which-one-is-better-to-use-HEX-or-RGB-color-property-in-CSS-to-make-less-server-source-consumption-and-make-the-CSS-load-faster

https://www.quora.com/How-many-colors-does-the-RGB-and-HEX-format-have-Which-is-better-for-screen-colors

Answer 3

Names in SVG 1.0 standard

I believe the answer lies in the very documentation you put as reference in the question. I put in the title the link to the Portuguese page for the part that talks about the use of color names, which seems to me to be your main question.

In short, you can use the names with some care.

• Use the names defined in the SVG standard (CSS 3)
• If rotate in IE < 8 take care of the names: grey, darkgrey, darkslategrey, dimgrey, lightgrey and lightslategrey because they are accepted or finished in "Gray" and not in "Grey" in these versions.
• Remember that some names are synonymous for the same color
• Named colors will not give you transparency feature
• Don’t use the color names related to S.O. because they were discontinued

So I see no problem in using the names of colors, but as Guilherme put, in his answer you have the advantages and disadvantages of using only the names.

If it’s a matter of standardization, it might be a good idea because you restrict the palette and do not miss in different shades, on the other hand depending on the project you may need a wider range of shades and colors and only with the names will not achieve your goal.

Answer 4

You can specify colors with at least 10 different shapes according to the last draft of the CSS Color Module.

This is a test that shows these shapes:

.colorName{
   color: red
}

.colorRGB{
  color: rgb(255, 0, 0)
}

.colorRGBA{
  color: rgb(255, 0, 0, 50%)
}

.colorRGBP{
  color: rgb(100% 0% 0%)
}

.colorHSL{
  color: hsl(0, 100%, 50%)
}

.colorHSLA{
  color: hsl(0, 100%, 50%, 50%)
}

.colorHWB{
  color: hwb(0  0%  0%)
}

.colorGray{
  color: gray(50)
}

.colorCMYK{
  color: device-cmyk(0 100% 100% 50%);
}

.colorHex{
   color: #ff0000
 }

<h2 class="colorName">O rato roeu a rolha da garrafa do rei da russia</h2>
<h2 class="colorRGB">O rato roeu a rolha da garrafa do rei da russia</h2>
<h2 class="colorRGBA">O rato roeu a rolha da garrafa do rei da russia</h2>
<h2 class="colorRGBP">O rato roeu a rolha da garrafa do rei da russia</h2>
<h2 class="colorHSL">O rato roeu a rolha da garrafa do rei da russia</h2>
<h2 class="colorHSLA">O rato roeu a rolha da garrafa do rei da russia</h2>
<h2 class="colorHWB">O rato roeu a rolha da garrafa do rei da russia</h2>
<h2 class="colorGray">O rato roeu a rolha da garrafa do rei da russia</h2>
<h2 class="colorCMYK">O rato roeu a rolha da garrafa do rei da russia</h2>
<h2 class="colorHex">O rato roeu a rolha da garrafa do rei da russia</h2>

Support for some of these forms (for example hwb) may be practically nonexistent. What I’ve seen so far is there are javascript libraries to provide the proper Suport. As you can see on example of W3schools

You can even consult the support of this specification in your browser. The specification includes a test set which allows you to check the support for your browser.

---

But to answer your question more specifically, you should use whatever you want. Eventually your choice may be related to the color scheme you are used to or the one that suits the circumstances best.

If Voce is used to an additive color scheme (RGB) then Voce will use RGB. If Voce is used to subtractive color scheme (CMYK) then Voce will use CMYK.

If Voce is a designer and works a lot with the HSL color scheme then Voce can use HSL.

The fact that the RGB scheme is widely used in the computer world is because the screens have a black background, so an additive color scheme, like the RGB, works better than a subtractive scheme. You can see the color subtractive scheme working on printers, since they print on white paper.^ref

Contundo I think a caveat can be made, but it’s something subtle and optional. You may want to associate a certain color to a common state in your web application. For example: red for error, yellow for warning, blue for information.

And humans are more used to recognizing names than numbers (that’s why there are DNS - but that’s another matter). So that at these times you may want to prefer the name of the color in relation to any other alternative.