Color draws attention, sets the right mood, and even helps manage the behavior of visitors to your web page. It's a vivid and especially important part of web design, so we can't just go past this topic.
In CSS, colors can be defined in several different ways, each having its own benefits. In this topic, we'll take a look at the most common ones.
Color Names
The easiest and most intuitive way to set colors is literally calling them by their names: there is a list of special keywords that can be used to identify colors. The most common among them are:
black | green | ||
silver | lime | ||
gray | olive | ||
white | yellow | ||
maroon | navy | ||
red | blue | ||
purple | teal | ||
fuchsia | aqua |
Setting the color by its name will look like this:
color: red;As you remember, we've already tried this method in previous lessons. Color names are not case-sensitive. Frequently used names are easy to remember, but the choice is limited, so it is not always possible to find the right combination of shades. For bright colors and subtle tones, other ways of specifying the color will work better. Let's talk about them.
RGB color model
Another way to specify the color in CSS is by using decimal RGB values (Red, Green, and Blue). An RGB value is a color code that is set using the rgb() function. This function takes on three values: one for red, one for green, and one for blue. The value can be an integer from 0 to 255 or a percentage.
Below is an example that shows several colors using their RGB values:
white | rgb(255, 255, 255) | |
black | rgb(0, 0, 0) | |
red | rgb(255, 0, 0) | |
lime | rgb(0, 255, 0) | |
blue | rgb(0, 0, 255) | |
yellow | rgb(255, 255, 0) | |
brown | rgb(150, 70, 0) |
Setting the color using the RGB model will look as follows:
color: rgb(255, 255, 255);The RGB value of the desired color can be easily calculated with the help of external resources or taken directly from Photoshop. This method is especially handy if we need to make a web page using a ready-made layout with a beautiful design.
RGBA
The RGBA (Red Green Blue Alpha) color scheme complements RGB with another number responsible for color transparency. Its value can be specified from 0 to 1. 0 means complete transparency, and 1 means complete opacity.
Let's try to make the color from the previous example semi-transparent.
color: rgba(255, 255, 255, 0.5);HEX
Another form of recording color values, also easy to take from Photoshop, is HEX. HEX is essentially the same as RGB, but it is recorded in the hexadecimal notation. Each pair of characters means the same sequence of colors: red, green, and blue in the range from 00 to FF. The resulting color is a combination of these three colors:
white | #FFFFFF | |
black | #000000 | |
red | #FF0000 | |
green | #00FF00 | |
blue | #0000FF | |
yellow | #FFFF00 | |
brown | #964600 |
If you're not a Photoshop type, you can also refer to a HEX color code generator.
Setting the color using HEX will look like this:
color: #FFFF00;Hex values for colors are not case-sensitive. You can use both capital and small letters according to your own preference.
Some hexadecimal color values can be written in a short form. To do this, turn the #RRGGBB record into #RGB. This can be done when both digits of the red, green, and blue values are the same.
Shortening is a common practice, so we will give you some examples:
HEX code | Short record | Color |
#FFDD77 | #FD7 | |
#6633FF | #63F | |
#000000 | #000 | |
#FFFFFF | #FFF |
The shortened record looks much better, doesn't it?
HSL
HSL is a color model in which color is defined by three parameters: Hue, Saturation and Lightness. Let's take a look at what these parameters are.
Hue is an angle on the color wheel:
Each color corresponds to a certain number of degrees, but it is not necessary to specify the units of measurement for a shade.
The second value of the HSL color model determines the saturation of the selected shade and is indicated as a percentage in the range from 0% to 100%. The closer this value is to 100%, the more saturated the color looks.
And finally, the last parameter means lightness. Lightness, like saturation, is measured as a percentage. The closer the value is to 100%, the lighter the color is.
Setting the background color for an element using HSL looks like this:
background-color: hsl(0, 100%, 50%);HSLA
HSLA is an extension of the HSL color values. "A" stands for alpha channel, which determines the opacity of the color. The opacity is defined by numbers from 0 to 1:
background-color: hsla(0, 100%, 50%, 0.5);Conclusion
Hopefully, that puts an end to all confusion in the face of strange color designations: it's really not that complicated at all. Now you'll be able to make your web pages even more stylish and attractive. Keep up the good work!