News Journal

For web developers

Web Safe Colors

There are over 160 named colors.

By Susana deOliveira

On digital screens, red, green, and blue combine to create color schemes. The use of the right color can increase brand recognition, attract attention, and create associations with a product or service. Colors are part of our lives, often conveying our own emotional state.

The web defines a set of standard color names that lets you use keywords instead of numeric representations to describe colors. Color keywords include standard primary and secondary colors (such as red, blue, or orange), shades of gray (from black to white, including colors like darkgray and lightgrey), and a variety of other blended colors, including lightseagreen, cornflowerblue, and rebeccapurple. You can see them through the following link within the w3Schools space: HTML Color Groups

A color model is a mathematical model that represents colors using numeric values. Color models describe how to create the available colors within a color space. RGB was the first color model for the web. The standard red, green, and blue color space of the RGB color model was created in 1996 for computer monitors and the web.

There are two primary ways of defining an RGB color by its red, green, and blue components in CSS — hexadecimal (#rrggbb) and rgb() values. Like named colors, however, they allow a much wider range of colors to be specified.

The HTML creates a box containing a color picker control, in which the color input's value is always a hexadecimal string. The selector offers several models, including grayscale sliders (achromatic colors), RGB sliders, CMYK sliders (which allow you to adjust the amount of cyan, magenta, yellow, and black to create or modify colors in graphic design programs), HSB sliders (hue, saturation, and brightness), and much more. A whole world within the color spectrum. It's awesome!

Computer screens display colors using RGB (Red, Green Blue) color values. Printers often presents colors using CMYK (Cian, Magneta, Yellow and Black) color values, although CMYK is not supported in HTML, it is suggested as a new standard in CSS4 and HWB (Hue, Whiteness, Blackness) too. The future of color!

Both HEXADECIMAL colors and RGB are supported in all browsers. And RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.


Colors HSL and HSLA

Hue, Saturation, Lightness.

The hsl() CSS color function was the first hue-based color function to be supported in browsers. HSL() is more intuitive than RGB() — it is easier to determine the effect of varying Hue (h), Saturation (s), and Lightness (l) values than it is to declare specific colors via red, green, and blue channel values. And, HSLA color values are an extension of HSL color values, with an Alpha channel - which specifies the opacity for a color.

From the moment I wrote a project, I used the color palette I'd used for the design as my personal signature. It was very intuitive! I still do it, but in a different way. I love looking for color schemes that work together without losing sight of the backgrounds having a good contrast with the text color.


Colors palette used on this page.

hsl(48, 38%, 95%) | background
hsl(48, 38%, 87%) | background
hsl(56, 38%, 58%) | DarkKhaki | buttons
hsl(54, 77%, 75%) | Khaki | buttons
hhsl(0, 100%, 25%) | Maroon | buttons
hsl(19, 56%, 40%) | Sienna | buttons
hsl(0, 0%, 26%) | HTML5 colors | buttons

[You can see some carefully designed color palettes from w3Schools via the following link: Color Palettes]

Many years ago, when computers supported maximum 256 different colors, a list of 216 "Web Safe Colors" was suggested as a Web standard (reserving 40 fixed system colors), but this is not important now, since most computers can display millions of different colors.


Antiquity palettes

On marble floors.

Color palettes that originate from the late Romanesque period and continued into the Gothic period. These are color combinations you can see when you visit Cathedrals from that period, decorating floors and walls. It was with the introduction of marble, color combinations began, spectacular designs.

Why? Because the marble comes in a wide range of colors, the most common being white, gray, black, beige, cream, green, brown, red, and blue, as well as other shades such as yellow and multicolor. The color of marble depends on the pigments present in the original limestone and can vary in pattern, displaying a uniform coloration, mottled, or veined. In the vast majority you will see the following range of colors:

[You can see examples of how ancient Cathedral builders used the materials Nature offered them and how they combined them. These works are often accompanied by paintings that create colorful and harmonious patterns. The following link takes you to a page with spherical videos, 360º VISIO]


Cassandre

The Art Deco graphic designer par excellence.

He revolutionized advertising with his geometric approach and innovative typography. His posters for brands like Dubonnet and Normandie are now icons of graphic design and continue to inspire creatives around the world. [When you hover over the discs, the link to the original poster opens.]

Painting is an end in itself, while the poster is a means to an end, a means of communication between the advertiser and the public, similar to a telegram.

Opacity or Alpha paremeter

Two seemingly similar properties but with different results.

An important concept when establishing color designs is to know the difference between using opacity or alpha parameter: When you use opacity you make the element and everything inside it transparent, whereas using RGB with an alpha parameter only makes the color you are specifying transparent and there is a key difference to use the opacity.

An image of a boat
Gainsboro
rgba(220,220,220, 0.3)
rgb(220,220,220) w/ opacity 0.3

[The technical information for writing this article has been extracted from the MDN Web Docs]


The world of color is fascinating. When you walk down the street, if you look around, you'll see people wearing excellent color combinations. You don't need expensive clothes; that's what used to be called, having good taste.

For a few years now, every new season, the shop windows have changed colors and shown you how to combine different wardrobe pieces with shoes and accessories. They're teaching people!

Car brands are the best examples of how the world of color is advancing. Today's new colors are truly incredible. I've already seen tomato and light yellow, among other truly beautiful colors.

There's a trilogy I've always loved, not because of the subject matter but because of the cinematography of each scene: The Godfather, and the third part is truly sublime. In fact, 1990's The Godfather Part III received seven Oscar nominations, including Best Editing, Best Cinematography, Best Art Direction, and Best Original Score. There are tons of films with carefully crafted staging.

There are countless examples; Nature itself is a showcase of incredible color combinations. For me, every time I write a project, it's a new opportunity to create. Each page is a blank canvas that inspires me to paint it, depending on what I want to write about.

You can't use up creativity. The more you use, the more you have.

_Maya Angelou