Color Shades – Hex Code and RGB for Gray Color Palette

Colors play an integral role in how usable and accessible your web design projects are.

At times, they can even make or break a project.

Having a color palette comprised of different shades and hues of a specific color can be really helpful. It helps you visualize how you can combine the colors you want to add to your designs to create a harmonious effect.

This article briefly goes over how to add colors in HTML and shows a table with different hues of the color gray.

If you're interested in only viewing the table with the different shades of gray,here is the link to that.

How to write colors in HTML

HTML (or HyperText Markup Language) lets you add different content to a page and create structure.

The headings, paragraphs, images, and links you see on a webpage are all HTML code.

All HTML code is written in its own file. That file has an .html extension.

When you want to style the content you added with HTML, you use CSS (or Cascading Style Sheets).

It is best practice to keep the content and the styles separate, and write HTML and CSS code in different files. This is what is called separation of concerns.

So, you'll add your CSS code in a file with the .css extension.

To change the color of text, or the foreground color of elements, you use the color property.

When you want to change the background color of an element, you use the background-color property.

Hex Codes

There are a few different options you can choose from to add the color you want.

Some of those are either using the color name, the HEX code or the RGB value that corresponds to a specific color.

HEX codes are alphanumeric characters.

A hexadecimal digit can be one of 16 possible values, ranging from 0 - 9 and a - f.

The codes are preceded by a #, like for example: #ffffff, which is the color white.

RGB Colors

The RGB color values are among the most popular and widely used color models.

Each color is a combination of Red, Green, and Blue, with each color ranging from 0 (the lowest) to 255 (the highest).

The general syntax looks something like this: rgb(red, green, blue), like this example: rgb(0, 0, 255).

Because the numbers for the Red and Green places are 0 (meaning there is no color there), and the highest number is the the Blue place, it means that the color is pure Blue.

Here is an example using all three to change paragraph text to have a red color.

All three rules will have the exact same result visually:

/* using the color name */
p {
color: red;
}

/* using the HEX code for red */
p {
color:	#FF0000;
}

/* using the RGB value for red */
p {
color: rgb(255,0,0);
}

You can learn more about HEX codes here and RGB colors here.

The gray color palette

Below is a table with a wide spectrum of some of the shades of gray recognized in HTML, ranging from darkest to lighest, with their respective HEX codes and RGB values.

Look through and choose any of the colors to use in your next web design project.

Conclusion

I hope you found this article helpful and found some inspiration for your next design project.

If you're interested in learning more about CSS and front-end web development, check out freeCodeCamp's responsive web design certification. In it, you'll build 5 projects for your portfolio while learning web development fundamentals.

Thanks for reading and happy coding!