List of HTML & CSS Color Codes with Examples of Their Use

HTML Color Codes are an important part that you need to know when doing the web design and development process. Using these codes, you can define colors for various visual elements more precisely and consistently.

For web developers, designers, and anyone who creates digital content, this code is almost inseparable from everyday work. Whether it’s creating an HTML website, designing images, or working on a presentation, your work can be more professional by understanding this color code.

No need to look far, because we have prepared a list of HTML color codes in this article that you can use as a guide. We will also explain the types of digital colors that exist today, as well as share examples of their use.

HTML and CSS Color Codes List

Below is a complete table listing all HTML color codes along with their associated HEX and RGB colors:

Red and Pink Color Variations

Here are some variations of the HTML red color that you can use:

Yellow and Orange Color Variations

If you need the yellow color variations, here are the codes you can use:

Green Color Variations

For green color variations, here are the codes:

Blue Color Variations

Here is a list of blue color variations and the HTML codes you can use:

Purple Color Variations

Here are the purple color variations and their codes:

Brown Color Variations

For brown color variations, here is the HTML code that can be used:

Bright White Color Variations

Below is the HTML code for the white color variations:

Black, Gray, and Dark Color Variations

Here is the HTML code for the gray color variations:

In addition to the above options, you can also combine various other colors to produce the right combination. Because, there are so many possible colors that can be selected using HEX or RGB codes.

Here are examples of colors that do not have HTML color codes but can be produced using HEX and RGB codes:

Current Digital Color Representations

Currently, there are several digital color models used in visual design, each with its own ideal use cases.

For example, HTML color codes are easier and more practical because they directly write their names, HEX guarantees more precise colors, and RGB can be used for advanced color manipulation.

By learning these color codes, you can also create an attractive visual experience, ensuring that your designs can be displayed smoothly on various devices and platforms.

Here are some of the most popular digital color models today:

• • HTML Color Codes. Implemented using the color name, not the code. For example: red, antiquewhite, darkorange. The number of possibilities is more limited than other color models.
  • Hexadecimal (Hex) Color Codes. Uses a combination of 6 digits and letters to represent a color. For example, #FFFFFF represents white.
  • RGB Color Codes. Stands for Red, Green, Blue. Colors are displayed by specifying the intensity of the three primary colors, red, green, and blue. For example, rgb(255, 255, 255) for white. RGB has a variation, RGBA, which includes an Alpha value for opacity. For example, rgba(255, 255, 255, 1) represents opaque white.
  • CMYK Color Codes. Stands for Cyan, Magenta, Yellow, Key (Black). This model is mainly used in color printing. In its implementation, colors are mixed based on the percentage of the four colors. For example, a deep blue color can be represented as cmyk(100%, 80%, 0%, 20%).
  • HSV Color Codes. Stands for Hue, Saturation, Value. With this model, color properties are controlled intuitively based on hue, saturation, and value. For example, a bright yellow color can be represented using the code hsv(60°, 100%, 100%).
  • HSL Color Codes. Stands for Hue, Saturation, Lightness. This format represents colors in a way that is easier for humans to understand. For example, hsl(0, 0%, 100%) is white. HSL also has a variation that determines opacity, namely HSLA. For example, hsla(0, 0%, 100%, 1) will produce an opaque white color.

Example of How to Use HTML Color Codes

Okay, after understanding the colors that exist, you also need to know how to apply them to create a visually appealing and consistent design.

Below, we will share some practical examples of using HTML color codes using Hex. If you prefer to use HTML or RGB color codes, simply replace the Hex code with the appropriate value.

For example, to use HTML or RGB color codes for red, simply replace the code in the format #FF0000 with red or rgb(255, 0, 0), according to the list in the table.

Change Text Color

Below, we will show you how to change text color using Hex color codes to get the results as below:

This text example uses Hex color codes: #FF0000

This text example uses Hex color codes: #00FF00

This text example uses Hex color codes: #0000FF

To apply the color customization above, you can write code like this:

<p style="color: #FF0000; margin-bottom: 10px;">This text example uses Hex color codes: #FF0000</p>
<p style="color: #00FF00; margin-bottom: 10px;">This text example uses Hex color codes: #00FF00</p>
<p style="color: #0000FF; margin-bottom: 10px;">This text example uses Hex color codes: #0000FF</p>

Coloring Table Borders

The following example shows how to apply color to table borders using Hex code, which will produce an output like the following:

The codes you can use are:

<table style="border: 2px solid #FF0000; margin-bottom: 10px;">
    <tr>
        <td>Table Border Color Example 1</td>
    </tr>
</table>
<table style="border: 2px solid #00FF00; margin-bottom: 10px;">
    <tr>
        <td>Table Border Color Example 2</td>
    </tr>
</table>
<table style="border: 2px solid #0000FF; margin-bottom: 10px;">
    <tr>
        <td>Table Border Color Example 3</td>
    </tr>
</table>

Adding Background Color to Text

The example below shows how to add background color to text using Hex code. As a result, you will see text like below:

This example text is given a background color using the Hex color code: #F08080 (Light Coral)

This example text is given a background color using the Hex color code: #98FB98 (Pale Green)

This example text is given a background color using the Hex color code: #87CEFA (Light Sky Blue)

To make adjustments like the above, you can use the following code:

<p style="background-color: #F08080; color: #000000; margin-bottom: 10px;">This example text is given a background color using the Hex color code: #F08080 (Light Coral)</p>
<p style="background-color: #98FB98; color: #000000; margin-bottom: 10px;">This example text is given a background color using the Hex color code: #98FB98 (Pale Green)</p>
<p style="background-color: #87CEFA; color: #000000; margin-bottom: 10px;">This example text is given a background color using the Hex color code: #87CEFA (Light Sky Blue)</p>

Changing HTML Button Color

You can also change the color of buttons created using HTML code, as in the following example.

Hex Button Color Example 1 Hex Button Color Example 2 Hex Button Color Example 3

The codes you can write to get the above results are:

<button style="background-color: #FF0000; color: #ffffff; padding: 10px 20px; border: none; margin-bottom: 10px;">Hex Button Color Example 1</button>
<button style="background-color: #00FF00; color: #000000; padding: 10px 20px; border: none; margin-bottom: 10px;">Hex Button Color Example 2</button>
<button style="background-color: #0000FF; color: #ffffff; padding: 10px 20px; border: none; margin-bottom: 10px;">Hex Button Color Example 3</button>

In addition to setting the color, you can also space each button by setting the padding number (for example 10px, 20px, and so on).

Set the Color of a Div Element

This example will show you how to set the background color of a div element that can contain multiple elements, including text, images, or other HTML elements. The result will look like this:

<div style="background-color: #F08080; color: #000000; padding: 20px; margin-bottom: 10px;">Div with Hex background color: #F08080 (Light Coral)</div>
<div style="background-color: #98FB98; color: #000000; padding: 20px; margin-bottom: 10px;">Div with Hex background color: #98FB98 (Pale Green)</div>
<div style="background-color: #87CEFA; color: #000000; padding: 20px; margin-bottom: 10px;">Div with Hex background color: #87CEFA (Light Sky Blue)</div>

Alfin Dani

AUTHOR BIO

On my daily job, I am a software engineer, programmer & computer technician. My passion is assembling PC hardware, studying Operating System and all things related to computers technology. I also love to make short films for YouTube as a producer. More at about me…