Coloring Your Web World: A Guide to CSS Colors

Color is a form of electromagnetic radiation that is visible to the human eye. It is the way we perceive and experience different wavelengths of light. Colors can evoke emotions, convey meanings, and add depth and complexity to our experiences.
Color plays a significant role in many aspects of our day-to-day life. It helps to convey messages, express identity, influence mood, stimulate appetite, influence fashion trends, enhance artistic expression, etc.
For web developers, colors help to enhance user experiences, affect legibility, create appealing effects and aesthetics, indicate interactive elements, and evoke emotions. Web developers and designers must be very careful in choosing colors for their projects as it significantly affects how users interact with the page. Other reasons why developers must pay attention include;

1. Accessibility: some users may have visual impairment or color blindness. The colors should be used in such a way that there is enough contrast between the background and text. Also, different modes like light and dark modes or different color themes could be made available for the sake of users with color sensitivity.
2. Brand identity: colors are usually used to represent brand identity. When building for an organization, it is important to reflect the colors of the organization’s brand for consistency, and for reinforcing the brand's identity and recognition.
3. Also, take note of the cultural implications of colors and how to use colors to evoke the desired emotions.
4. Colors can also determine if the website/app will be visually appealing or repulsive to the users. It is important to ensure that beauty and aesthetics are taken into consideration.
5. Colors can also be used to direct the users on how to interact with the websites. Call-to-action buttons are usually made to stand out. Also, color red is usually used to warn users against deleting important data.

how to indicate colors in CSS

There are several color systems available in CSS. However, in this course, we shall discuss;
• Color keywords
• Hex color
• Hexa colors
• Rgb()
• Rgba()
• Hsl()
• Hsla()

Color keywords

One way of representing colors in CSS is obviously by their known names. Names like red, purple, green, blue, etc. are easily identifiable. There are also variations of those colors, like darkblue, cornflowerblue, darkgreen, darkorange, darkcyan, slateblue, slategrey, seagreen, hotpink etc.
Besides the fact that not all colors and shades have names, it is also a lot of work to memorize the colors by their various names. You may also know the name of the color you intend to use, but that name may not be a valid CSS color keyword or may look slightly different in CSS from what you know the color to look like.
Besides that, color keywords are only available for just 147 colors. Whereas, the human eye is said to see and distinguish approximately between 1 million to 1.5 million colors. And arguments are disputing this figure with claims that the eyes can see way more than that.
Also, the color keywords do not have alpha support, thereby making it difficult to add transparency to the colors.
In other to limit some of these challenges, CSS allows us to create colors, or mix colors with a couple of color systems. Some of them require mixing colors; others involve manipulating the lightness, transparency, and saturation of existing colors and hues.

Hexadecimal (hex) colors

The hexadecimal color system allows for a lot more flexibility with creating colors, and gives a lot more options to the designers/developers with colors to choose from. With the hex system, colors are created by mixing red, blue, and green.
The hexadecimal system starts with the # symbol and then followed by six digits. These digits range from 0-f. So, rather than have the numbers like
0 1 2 3 4 5 6 7 8 9,
as in decimal numbers, making up ten,
We have numbers

0 1 2 3 4 5 6 7 8 9 a b c d e f
Making up 16.

So to combine a hex color, you’ll have;

In decimal notation, each of these values corresponds to an integer between 00 and FF, or 0 and 255. The hexadecimal notation allows for the representation of 256 ^ 3 or 16,777,216 colors in total. Black represents the absence of all three colors; while white represents the full capacity of all three colors. To get various shades of grey, have all three colors in equal proportions.

You can also have as many shades of the same colors as you can imagine. A couple of blue shades for example.

We can make thousands of shades from blue alone, by ensuring that the value for blue is higher than that of red and green. You can also do the same with red and green. In most cases, a color picker will help with choosing colors.
Applying transparency
You can apply transparency to hexadecimal by adding an extra alpha value to the hex color. The closer the number is to zero, the higher the transparency while a higher number will be more opaque. For example,

(#000d or #fefe56dd will add a little transparency to the colors, and a color of say #0004 0r #fefe5644 will be much more transparent.)

Rgb() colors

rgb() colors are quite similar to the hexadecimal color system. They both represent a mixture of red, blue, and green with 255 possible values for each color. The difference here however is the syntax. The rgb() colors use decimal numbers of 0-255, separated by comma to represent each color.
Syntax;
rgb(red, green, blue);

Rgba()

Rgba() gives the opportunity to add opacity/transparency to the colors. The extra a there is called the alpha value and is a number between 0 and 1. The closer the number is to zero, the more transparent the color will be.

Hsl() colors

Hsl stand for
Hue: specifies the color. Represented by the degree along the color wheel. 0° is red,

Saturation: indicating the level of vividness of the color. 0 will give a gray color, whereas 100% will give the most vivid version of the color.
Lightness: in percentage indicating how light or dark the color would be;
Illustration
The image below illustrates the HSL hue. The saturation has been set to 100%, and lightness 50% for all cases.

2.
Now let’s take a hue of 0deg, and 50% lightness and see how different saturations look like

Now, let’s maintain the hue of 0deg, and saturation of 100% and see how the lightness plays out.

Conclusion

This text provides a comprehensive overview of colors in web development, including their importance, cultural implications, and how to represent them in CSS using various color systems.
Here is a summary of the color systems mentioned:
• Color Keywords: 147 predefined color names, e.g. "red", "blue", and "green".
• Hexadecimal (Hex): Six-digit code starting with #, e.g. #FF0000 for red.
• RGB: Decimal values for red, green, and blue, e.g. rgb(255, 0, 0) for red.
• RGBA: Adds alpha value for transparency, e.g. rgba(255, 0, 0, 0.5) for semi-transparent red.
• HSL: Hue, saturation, and lightness values, e.g. hsl(0, 100%, 50%) for red.
• HSLA: Adds alpha value for transparency, e.g. hsla(0, 100%, 50%, 0.5) for semi-transparent red.
The text also provides examples and illustrations to help understand how to work with colors in CSS.