Skip to main content

HTML Colors | Color Codes in HTML - Hexadecimal, RGB, and More

HTML Colors​

HTML Colors are a way to define the color of text, backgrounds, borders, and other elements on a web page.

There are several ways to specify colors in HTML:

  • Color names: HTML has a list of predefined color names that you can use to specify colors. For example, red, green, blue, yellow, black, and white are all valid color names.

  • RGB values: You can also specify a color using RGB (Red, Green, Blue) values. This involves specifying the amount of red, green, and blue in a color using a scale of 0-255. For example, rgb(255, 0, 0) represents pure red, rgb(0, 255, 0) represents pure green, and rgb(0, 0, 255) represents pure blue.

  • Hexadecimal values: Another way to specify colors is to use hexadecimal values. Hexadecimal values use a combination of numbers and letters to represent the amount of red, green, and blue in a color. For example, #FF0000 represents pure red, #00FF00 represents pure green, and #0000FF represents pure blue.

Here is an example of how to set the background color of a web page using each of these methods:

Editor

Loading...

Background Color​

You can set the background color of an element using the background-color property in CSS (Cascading Style Sheets).

As an example:

Editor

Loading...

Text Color​

You can set the color of text within an element using the color property in CSS (Cascading Style Sheets).

As an example:

Editor

Loading...

Border Color​

You can set the color of an element's border using the border-color property in CSS (Cascading Style Sheets).

As an example:

Editor

Loading...

Color Values​

Color values can be specified using a variety of methods.

Here are some common ways to specify color values:

Color names​

You can use color names to specify the color of an element. For example, red, green, and blue are all valid color names in HTML.

<p style="color: red;">This text is red.</p>
<p style="color: blue;">This text is blue.</p>
<p style="color: green;">This text is green.</p>

RGB values​

You can specify a color using RGB (Red, Green, Blue) values. RGB values range from 0 to 255 for each color component. For example, rgb(255, 0, 0) specifies pure red.

<p style="color: rgb(255, 0, 0);">This text is pure red.</p>
<p style="color: rgb(0, 255, 0);">This text is pure green.</p>
<p style="color: rgb(0, 0, 255);">This text is pure blue.</p>

Hexadecimal values​

You can specify a color using a hexadecimal value. A hexadecimal color value is a six-digit code that represents the amount of red, green, and blue in a color. For example, #FF0000 is pure red.

<p style="color: #FF0000;">This text is pure red.</p>
<p style="color: #00FF00;">This text is pure green.</p>
<p style="color: #0000FF;">This text is pure blue.</p>

RGBA values​

You can specify a color using RGBA (Red, Green, Blue, Alpha) values. RGBA values are similar to RGB values, but they also include an alpha channel, which represents the opacity of the color. Alpha values range from 0 to 1, with 0 being completely transparent and 1 being completely opaque. For example, rgba(255, 0, 0, 0.5) specifies semi-transparent red.

<p style="color: rgba(255, 0, 0, 0.5);">This text is semi-transparent red.</p>
<p style="color: rgba(0, 255, 0, 0.5);">This text is semi-transparent green.</p>
<p style="color: rgba(0, 0, 255, 0.5);">This text is semi-transparent blue.</p>

HSL values​

You can specify a color using HSL (Hue, Saturation, Lightness) values. HSL values describe the color using three components: hue (the color itself), saturation (the intensity of the color), and lightness (the brightness of the color). Hue values range from 0 to 360, while saturation and lightness values range from 0% to 100%. For example, hsl(0, 100%, 50%) specifies pure red.

<p style="color: hsl(0, 100%, 50%);">This text is pure red.</p>
<p style="color: hsl(120, 100%, 50%);">This text is pure green.</p>
<p style="color: hsl(240, 100%, 50%);">This text is pure blue.</p>

HSLA values​

You can specify a color using HSLA (Hue, Saturation, Lightness, Alpha) values. HSLA values are similar to HSL values, but they also include an alpha channel, which represents the opacity of the color. Alpha values range from 0 to 1, with 0 being completely transparent and 1 being completely opaque. For example, hsla(0, 100%, 50%, 0.5) specifies semi-transparent red.

<p style="color: hsla(0, 100%, 50%, 0.5);">
  This text is semi-transparent red.
</p>
<p style="color: hsla(120, 100%, 50%, 0.5);">
  This text is semi-transparent green.
</p>
<p style="color: hsla(240, 100%, 50%, 0.5);">
  This text is semi-transparent blue.
</p>