Css media

CSS Fundamentals: Working with Colors

There are many factors that need to be taken into account when designing a website; font, UX streams, and more. A very important design element is color. Even simple decisions like brand color, border color and background color have a definite and noticeable impact.

In this article, we’ll cover the fundamentals of CSS colors and learn how to turn an HTML site into a crisp website.

Getting started with CSS colors

There is a certain way of describing colors in CSS that a computer can understand. This is usually done by dividing the color into various components, calculating a mixed set of primary colors to form the desired color. There are several ways to describe a color in CSS.

Getting started with CSS colors

Use color names as keywords

There are around 140 CSS color names supported by most modern browsers. It could be as simple as Red Where cyan for the keyword color. While it helps with a moderate color gamut, you’re limited to a few defined colors without any control over shades and tints. This is where you will need to upgrade to the higher range of CSS color options.

color: red;
color: crimson;
color: slateblue;

Using RGB Values

When designing a website or app, the color scheme matters a lot – it sure shouldn’t be the last thing on your mind. In CSS, you can use three methods to represent an RGB color. These are the hexadecimal string notation, RGB functional notation, and HSL functional notation. Here’s a closer look at each of them.


Hexadecimal string notation

Hexadecimal string notation always begins with the character #. After this character, you specify colors using hexadecimal digits of a specific color code. The string is not case sensitive, but it is conventional to use lowercase. Here are some use cases:


This is the most common way to describe a digital color. It is a fully opaque color with red, green and blue components like 0xrr, 0xgg, and 0xbb respectively.


It follows the RGB criteria described above with an alpha channel that manages the transparency of the color. The more the 0xaa value is, the more the color becomes translucent.


If you have color # 556677, you can just write it as # 567 since it represents 0xrr, 0xgg, and 0xbb respectively. For example, # 000 (Where # 000000) is black while #fff (Where #ffffff) is white.


It follows the above criteria with an alpha channel specified by 0xaa to control the opacity.

RGB functional notation

RGB functional notation represents colors using red, green, and blue components. It is defined using the rgb () function which accepts input parameters in the form of red, green, and blue primary components (and an optional alpha channel). Red, green, and blue values ​​must be an integer between 0 at 255 (included), i.e. a percentage varying from 0% to 100%. On the other hand, the alpha channel accepts values ​​from 0.0 (completely transparent) to 1.0 (completely opaque). It also accepts a percentage value of 0% (same as 0.0) and 100% (same as 1.0).

color: rgb(rr,gg,bb);
color: rgba(rr,gg,bb,a);

HSL functional notation

HSL functional notation represents color using hue, saturation, and lightness. It is very similar to RGB () function in terms of use. You can easily find the hex value of any color on your computer screen. In this color method, hue defines the actual color based on the position on the color wheel. Saturation is the percentage of gray with the maximum possible hue. Brightness changes the color from its darkest appearance to the brightest possible as it increases.

The tint value (H) is specified by the angle unit supported in CSS. He understands degrees, rad, diploma, and tower. Saturation (S) specifies the percentage of the final color that is made up of hue. The brightness component (L) defines the gray level.

color: hsl(XXdeg, XX%, XX%);
color: hsl(XXturn, XX%, XX%);

Applying Colors to HTML Elements

In CSS, the Color the property sets the foreground color of the content, and Background color defines the background color of the content structured by HTML. When an element is rendered, you can use the color properties to style it.

Color property for texts

the Color The property is used when drawing text and when you need any kind of text decoration. You can use the text-decoration-color property to make underlines, highlights, or strikethrough lines different colors. You can change the background color of the text using the Background color property. You can apply a shadow effect on the text by using the text shadow property. You can select text-accent-color while drawing emphasis symbols in text fields.

Color property for boxes

As you know, everything on a web page follows the box model. So each element is a box with some kind of content and optional padding, border and margin area. You can use the Background color property when there is no foreground content. When you draw a line to separate columns in text, you can use the color-ruler-column property for that. There is a outline-color property to color the outline. Note that an outline is different from the border: it acts as a focus indicator.

Color property for borders

Any HTML element can have a border. You can set the border color property like border-top-color, border-right-color, border-bottom-color, and border-left-color to set the border color of the corresponding sides. However, it is good practice to use the shorthand property.

the border-inline-start-color The property allows you to color the edges of the border closest to the start. On the other hand, the border-inline-end-color The property allows you to color the end of the start of lines of text in an area. Although this varies depending on your writing mode, text orientation, and direction.

Conclusion: Color and accessibility

While a beautifully designed website is heavily influenced by the color used, you still need to make sure that it is accessible. Improper use of color can lead to a loss of significant traffic to your website.

Whether you use hexadecimal string notations, color names, or RGB values ​​is entirely up to you. Just make sure that you use colors to reinforce existing text and that it follows a set visual hierarchy. Learning more about color theory and creating your own palette is a great idea if you are a budding web developer. Until then, happy and colorful coding!

A collection of art supplies in different colors arranged in a circle
How to Use Color Theory to Elevate Your Creative Projects

By using the right colors in the right way, you can take your creative projects to a whole new level.

Read more

About the Author