Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Follow publication

CSS colors

Patta__
Bootcamp
Published in
3 min readNov 2, 2022

When learning web technologies, CSS is an essential language to master. Cascading Style Sheets help define styles for a website’s presentation, both for the entire application and its individual elements. In this article, we’ll focus on one of the most crucial aspects of CSS: colors.

At first glance, assigning color elements to a project may seem simple. We assign colors to fonts, backgrounds, and borders. However, there are several ways to specify colors in CSS, and it’s important to know which practices are best.

Color names
CSS supports 140 standard color names, and a full list of these names can be found on https://www.w3schools.com/colors/colors_names.asp. While this method is straightforward, it’s not recommended for professional development. Instead, it’s best to learn and use other methods.

Basic color palette with names.

RGB/RGBA
RGB and RGBA values are commonly used in CSS. An RGB color value is specified with rgb(RED, GREEN, BLUE), where each parameter is an integer between 0 and 255. An RGBA value is similar, but includes an additional parameter for transparency.

Basic color palette with RGB notation.

Hexadecimal
The hexadecimal method is the most common way to specify colors in web development. In design software, this method is often the most supported. A hexadecimal color is specified with #RRGGBB, where RR (red), GG (green), and BB (blue) are hexadecimal integers between 00 and FF.

Basic color palette with hexadecimal notation.

HSL
HSL is another way to specify colors in CSS, using values for hue, saturation, and lightness. While this method is rarely used, it’s worth knowing. Hue is a degree on the color wheel from 0 to 360, saturation is a percentage value between 0% and 100%, and lightness is also a percentage between 0% and 100%.

Basic color palette with HSL notation.

It’s a good practice to assign colors in your project to CSS variables and use these variables throughout your project. This saves time and effort when changing the colors of your website’s theme in the future. Assigning colors to variables is more professional and consistent, making it easier for co-developers to read and understand your code.

In conclusion, colors are an essential part of CSS and web development. By understanding the different methods of specifying colors in CSS and using best practices, you can ensure that your code is consistent, professional, and easy to read.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Patta__
Patta__

Written by Patta__

Self-taught programmer who values work-life balance. Eager to share knowledge and passions. No hoodie necessary!

No responses yet

Write a response