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.

Gray Shades HEX Codes RGB Values
#111111 rgb(17, 17, 17)
#121212 rgb(18, 18, 18)
#161618 rgb(22, 22, 24)
#181818 rgb(24, 24, 24)
#212121 rgb(33, 33, 33)
#212124 rgb(33, 33, 36)
#242526 rgb(36, 37, 38)
#282828 rgb(40, 40, 40)
#2F4F4F rgb(47,79,79)
#333333 rgb(51, 51, 51)
#36454F rgb(54, 69, 79)
#3A3B3C rgb(58, 59, 60)
#3B3B3B rgb(59, 59, 59)
#3D3D3D rgb(61, 61, 61)
#404040 rgb(64, 64, 64)
#494848 rgb(73, 72, 72)
#525252 rgb(82, 82, 82)
#555555 rgb(85, 85, 85)
#6082B6 rgb(96, 130, 182)
#616161 rgb(97, 97, 97)
#636363 rgb(99, 99, 99)
#6D6D64 rgb(109, 109, 100)
#696969 rgb(105, 105, 105)
#708090 rgb(112, 128, 144)
#71797E rgb(113, 121, 126)
#7393B3 rgb(115, 147, 179)
#777777 rgb(119, 119, 119)
#778899 rgb(119,136,153
#7E7E7E rgb(126, 126, 126)
#808080 rgb(128, 128, 128)
#818181 rgb(129, 129, 129)
#818589 rgb(129, 133, 137)
#848884 rgb(132, 136, 132)
#888888 rgb(136, 136, 136)
#899499 rgb(137, 148, 153)
#8A9A5B rgb(138, 154, 91)
#8B8B81 rgb(139, 139, 129)
#8C8C8C rgb(140, 140, 140)
#909090 rgb(144, 144, 144)
#979797 rgb(151, 151, 151)
#999999 rgb(153,153,153)
#A9A9A9 rgb(169, 169, 169)
#AAAAAA rgb(170, 170, 170)
#AEAEAE rgb(174, 174, 174)
#B0B3B8 rgb(176, 179, 184)
#B2BEB5 rgb(178, 190, 181)
#B3B3B3 rgb(179, 179, 179)
#B4B4B4 rgb(180, 180, 180)
#BBBBBB rgb(187, 187, 187)
#BFBFBF rgb(191, 191, 191)
#C0C0C0 rgb(192, 192, 192)
#C5C5C5 rgb(197, 197, 197)
#CCCCCC rgb(204, 204, 204)
#D3D3D3 rgb(211, 211, 211)
#D4D4D4 rgb(212, 212, 212)
#DCDCDC rgb(220,220,220)
#DDDDDD rgb(221, 221, 221)
#E4E6EB rgb(228, 230, 235)
#E5E4E2 rgb(229, 228, 226)
#EEEEEE rgb(238, 238, 238)
#F2F2F2 rgb(242, 242, 242)
#F5F5F5 rgb(245, 245, 245)


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!