CSS Fundamentals: Working with Colors

There are various aspects to consider when developing a website, including layout, UX flow, and many others. Color is an important design element. Simple factors like brand color, border color, and background color have a huge and visible impact.

In this post, we’ll go through the principles of CSS colors and CSS Fundamentals Working with Colors.

CSS Fundamentals Working with Colors

Getting Started With CSS Colors

A computer will understand a certain technique to describe colors in CSS. It’s usually done by deconstructing the color and calculating a mixed set of primary colors to generate the desired color. In CSS, there are various ways to describe a color.

Using color names as Keywords

Most modern web browsers support around 140 CSS color names. The color keyword could be as simple as red or cyan. Though it helps in a moderate variety of colors, you are limited to a few predefined colors with no control over shades and tints. This is when you’ll need to move on to the more advanced CSS color settings.

<!-- CSS Fundamentals Working with Colors -->

color: Red;
color: Green;
color: Blue;

Using RGB Values

The color scheme is quite important when building a website or an app—it should not be the last thing you think about. To express an RGB color in CSS, there are three options. Hexadecimal string notation, RGB functional notation, and HSL functional notation are the three. Each of them is looked at in more detail below.

For Hexadecimal Strings

The number sign (#) is always used to begin a hexadecimal string notation. Hexadecimal digits of a given color code are used to identify the colors after this character. Although the string is not case-sensitive, lowercase is usually recommended. Here are a few examples of use:


It is used as the most typical description of a numeric color. Red, green, and blue elements of the color are represented by the values 0xrr, 0xgg, and 0xbb, respectively.


It adheres to the aforementioned RGB specifications and includes an alpha channel to control the color’s sheerness. The color becomes more translucent the lower the value of 0xaa is.


If you have the color #556677, you may just write it as #567 because it stands for the hex values 0xrr, 0xgg, and 0xbb. For instance, the numbers 0000 (or #00000000) and #fff (or #ffffff) are both white.


It complies with the aforementioned requirements and uses an alpha channel with opacity controlled by 0xaa.

Functional RGB

Red, green, and blue variables are used to represent colors in the RGB functional notation. The rgb() function, which takes as input parameters the primary red, green, and blue elements as well as an optional alpha channel, is used to define it. The red, green, and blue values must each be an integer with a range of 0 to 255, or a percentage between 0% and 100%. The alpha channel, on the other hand, allows values between 0.0 and 1.0 (totally transparent to fully opaque). The percentage values 0% (the same as 0.0) and 100% (the same as 1.0) are also accepted.

<!-- CSS Fundamentals Working with Colors -->

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

Functional Notation in HSL

Hue, oversupply, and brightness are used in HSL functional notation to represent color. In terms of usage, it is very similar to the rgb() function. On your computer screen, you may quickly find the hex value of any color. According to the position on the color wheel, the hue in this color scheme determines the actual color. The fraction of grey that has the most color is called saturation. As brightness rises, the color looks brighter and moves from its darkest potential state.

The supported angle unit in CSS specifies the hue value (H). Deg, rad, grad, and turn are all part of it. Saturation (S) indicates the proportion of hue in the final color. The level of grey is determined by the brightness (L) component.

<!-- CSS Fundamentals Working with Colors -->
color: hsl(XXdeg, XX%, XX%);
color: hsl(XXturn, XX%, XX%);

Applying Color to HTML Elements

In CSS, the foreground color of the content is defined by the color property, and the background color of HTML-structured content is defined by the background-color property. The color properties can be used to customize an element after it has been displayed.

Textual Color Properties

When drawing text or when you need any type of text decoration, the color attribute is used. The text-decoration-color attribute can be used to generate different colored underlines, overlines, or strikethrough lines. The background-color property can be used to change the color of the text’s background. The text-shadow property can be used to apply a shadow effect to the text. Drawing emphasis symbols in text fields allows you to choose the text-emphasis-color setting.

You can also check –  What is the CSS Box Model: Explaination with Examples

Boxes’ Color Property

As you are aware that a web page’s layout is box-based. As a result, each element is a box with possible padding, border, and margin areas and some form of content. When there is no background content, you can utilize the background color attribute. The column-rule-color property can be used when creating a line to separate the columns of a text. To color the outline, use the outline-color attribute. An outline, as opposed to a border, acts as a focus indicator.

Color Property for Borders

A border can be added to any HTML element. To set the border color of similar sides, use the border-color property as border-top-color, border-right-color, border-bottom-color, and border-left-color. However, using the shorthand property is good practice.

The border-inline-start-color attribute allows you to color the border’s edges that are closest to the beginning. The border-inline-end-color attribute, on the other hand, allows you to color the end of the first line of text within a box. It depends on your writing style, text direction, and writing direction. This type of CSS Fundamentals Working with Colors.

Color and Accessibility

Though color has an important effect on a wonderfully designed website, you should always ensure that it is accessible. Improper color use can result in considerable user loss for your website. In this post, you learned CSS Fundamentals Working with Colors.

It is totally up to you whether to use hex text notations, color names, or RGB values. Just make sure you’re employing colors to support existing content and that it follows a specified visual structure. I hope From this post, you learned the CSS Fundamentals Working with Colors. If you’re a new web developer, learning more about color theory and developing your own palette is an excellent plan. Until then, have a nice and colorful coding experience! 

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!