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.
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 range of colors, you’re limited to a few defined colors with no control over shades and tints. This is where you’ll need to upgrade to the higher range of CSS color options.
/*Syntax*/
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:
#rrggbb
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.
#rrggbbaa
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.
#rgb
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.
#rgba
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 To 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).
/*Syntax*/
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, the hue defines the actual color based on the position on the color wheel. Saturation is the percentage of gray with the maximum hue possible. 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 turn. Saturation (S) specifies the percentage of the final color made up of hue. The brightness component (L) defines the gray level.
/*Syntax*/
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 goods. You can apply a shadow effect on the text using the text shadow goods. 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 item 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 of 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!
Read more
About the Author