CSS Fundamentals: Working with Colors

There are many factors to consider when designing a website; font, UX flow, and much more. One very important design element is color. Even simple decisions like brand color, border color, and background color deliver a definite and noticeable impact.

In this article, we’ll cover the fundamentals of CSS colors and learn how to transform an HTML site into an impeccable-looking website.

Getting Started With CSS Colors

There's a certain way to describe colors in CSS that a computer can understand. It's typically done by breaking the color into various components, calculating a mixed set of primary colors to form the desired color. There are several different ways to describe a color in CSS.

Using color names as Keywords

There are approximately 140 CSS color names that most modern browsers support. It could be as simple as red or cyan for the color keyword. Though it helps with a moderate range of colors, you're limited to a few set colors with zero control on shades and tints. This is where you'll need to jump to the higher range of CSS color options.

        /*Syntax*/

color: red;

color: crimson;

color: slateblue;

Using RGB Values

While designing a website or an app, the color scheme matters a lot—it definitely shouldn't be the last thing you consider. In CSS, you can use three methods to represent an RGB color. These are 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 starts with the character #. Following this character, you specify the colors using hexadecimal digits of a specific color code. The string isn't case-sensitive, but it’s conventional to use lower case. Here are some use cases:

#rrggbb

It's the most common way to describe a numeric color. It's a fully opaque color with red, green, and blue components as 0xrr, 0xgg, and 0xbb respectively.

#rrggbbaa

It follows the RGB criteria outlined above with an alpha channel that handles the sheerness of the color. The lower the 0xaa value is, the more translucent the color becomes.

#rgb

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

#rgba

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

RGB Functional Notation

RGB functional notation represents colors using red, green, and blue components. It's defined using the rgb() function which accepts input parameters in the form of primary red, green, and blue components (and an optional alpha channel). The red, green, and blue values must be an integer between 0 to 255 (inclusive), or 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 percentage value from 0% ( same as 0.0) and 100% (same as 1.0).

        /*Syntax*/

color: rgb(rr,gg,bb);

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

HSL Functional Notation

HSL functional notation represents color using hue, saturation, and luminosity. It's very similar to the rgb() function in terms of usage. You can easily find the hex value of any color on your computer screen. In this color method, the hue defines the actual color according to the position on the color wheel. Saturation is the percentage of grey with the maximum possible hue. Luminosity transitions the color from its darkest to brightest possible appearance as it increases.

The hue value (H) is specified by the supported angle unit in CSS. It includes deg, rad, grad, and turn. Saturation (S) specifies the percentage of the final color made up of hue. The luminosity (L) component defines the grey level.

        /*Syntax*/

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

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

Applying Colors to HTML Elements

In CSS, the color property defines 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 property is used while drawing text and when you need any kind of text decorations. You can use the text-decoration-color property to render underlines, overlines, or strike-through lines of different colors. You can change the background color of text using the background-color property. You can apply a shadow effect on text using the text-shadow property. You can select text-emphasis-color while drawing emphasis symbols in text fields.

Color Property for Boxes

As you know, everything on a web page follows the box model. Thus, every element is a box with some sort of content and optional padding, border, and margin area. You can use the background-color property when there's no foreground content. When you're drawing a line in order to separate the columns of a text, you can use the column-rule-color property for it. There’s an 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 as border-top-color, border-right-color, border-bottom-color, and border-left-color to set the border color of corresponding sides. Using the shorthand property is good practice, though.

The border-inline-start-color property lets you color the edges of the border that are closest to the beginning. On the other hand, the border-inline-end-color property lets you color the end of the start of the lines of text within a box. Though it varies depending on your writing-mode, text-orientation, and direction.

Wrapping Up: Color and Accessibility

Though a beautifully designed website is heavily impacted by the color used, you should always make sure that it’s accessible. Improper use of color can result in the loss of significant traffic on your website.

Using hexadecimal string notations, color names, or RGB values is completely up to you. Just make sure that you're using colors to strengthen existing text, and have it follow a determined visual hierarchy. Learning more about color theory and creating your own palette is an outstanding idea if you're a budding web developer. Till then, happy and colorful coding!