CSS Color Introduction

Chapter 10 2 mins

Learning outcomes:

  1. Brief introduction to colors

A colorful era!

Color is an important part of any design be it web, package, poster, logo or whatever. It is one of the foundations of designing. If used correctly it can flourish a piece of design by building a sense of trust and emotion in it.

On the other side it can also break a design by simply jumbling it up in an array full of colors of which none connects to another.

Theories on colors originate from early, ancient times and it is only today that we have a serious heck of information on colors - their relationships with our emotions, their impact on our eyes and so on.

Now it is important for you to understand that all this theory and ideology comes under the learning curves of designing, not CSS. It's not in the scope of CSS to teach you how colors work with one another, which ones do work and why, what is the color wheel etc.

In CSS what we learn in colors is only how to work with them - the functions used, the notations used, the filters applied and stuff like that. And this is what we will learn in the coming chapters. We will look at different ways of writing colors in CSS using rgb(), hsl() and hexadecimal notations and different opacity filters applied to these forms.

It makes sense to first learn how something is done before moving on to exploring why it is done that way. Similarly it makes a lot more sense to first learn colors in CSS and then how to apply them in actual designs.

If you specifically want to learn color theories and history you should consider a design course that takes you through the different aspects of colors in real designs.

Moving on..

So with a fairly good introduction on colors, in general, we can now move on to the actual code part. Remember that knowing CSS will never always mean that you also know web designing - CSS is just a language for styling web pages - web designing is a century-full of work on how to approach styling web pages.