> For the complete documentation index, see [llms.txt](https://codingzonebd.gitbook.io/html-elements/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codingzonebd.gitbook.io/html-elements/html-colors.md).

# HTML Colors

### Color Names

**`Tomato , Orange , DodgerBlue , MediumSeaGreen , Gray , SlateBlue , Violet , LightGray`**

{% code overflow="wrap" lineNumbers="true" %}

```html
<!DOCTYPE html>
<html>
    <body>
        <h1 style="background-color:Tomato;">Tomato</h1>
        <h1 style="background-color:Orange;">Orange</h1>
        <h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
        <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
        <h1 style="background-color:Gray;">Gray</h1>
        <h1 style="background-color:SlateBlue;">SlateBlue</h1>
        <h1 style="background-color:Violet;">Violet</h1>
        <h1 style="background-color:LightGray;">LightGray</h1>
    </body>
</html>
```

{% endcode %}

### Background Color

{% code overflow="wrap" lineNumbers="true" %}

```html
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
```

{% endcode %}

### Text Color

You can set the color of text:

#### <mark style="color:orange;">Hello World</mark>

<mark style="color:green;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</mark>

<mark style="color:purple;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</mark>

{% code overflow="wrap" lineNumbers="true" %}

```markup
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
```

{% endcode %}

### Border Color

{% code overflow="wrap" lineNumbers="true" %}

```html
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
```

{% endcode %}

### Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three \<div> elements have their background color set with RGB, HEX, and HSL values:

**`rgb(255, 99, 71)`**&#x20;

**`#ff6347`**&#x20;

**`hsl(9, 100%, 64%)`**

**`rgba(255, 99, 71, 0.5)`**

**`hsla(9, 100%, 64%, 0.5)`**

{% code overflow="wrap" lineNumbers="true" %}

```html
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
```

{% endcode %}

HTML RGB and RGBA Colors

`rgb(red, green, blue)`

**HTML HEX Colors**

`#rrggbb`

HTML HSL and HSLA Colors

`hsl(hue, saturation, lightness)`
