CSS Color: Names, HEX, RGB, RGBA, HSL

« Prev Next »

CSS allows colors to be specified in several different ways, the most common being:

  • Color Names
  • HEX Values
  • RGB
  • RGBA
  • HSL

css-color-names

CSS Color Names

CSS supports 147 standard color names like red, blue, green, etc.

 

selector {
  property: color-name;
}

Example

<html>
<head>
<title>Onlinetpoint - CSS Name</title>
</head>
<body>

<h1 style="color: blue;">This is Blue</h1>

<p style="background-color: yellow;">Yellow Background</p>
</body>
</html>
Run ›

CSS HEX Colors

HEX color codes are 6-digit codes representing red, green, and blue in hexadecimal (00 to FF).

 

selector {
  property: #RRGGBB;
}

Example

<html>
<head>
<title>Onlinetpoint - CSS Name</title>
</head>
<body>

<div style="color: #FF5733;">This is an orange-red color</div>

<p style="background-color: #ADD8E6;">Light Blue Background</p>
</body>
</html>
Run ›

CSS RGB Colors

Defines colors using the Red, Green, and Blue channels with values from 0 to 255

 

selector {
  property: rgb(red, green, blue);
}

Example

<html>
<head>
<title>Onlinetpoint - CSS Name</title>
</head>
<body>

<h2 style="color: rgb(0, 128, 0);">Green Text</h2>

<div style="background-color: rgb(255, 255, 0);">Yellow Background</div>
</body>
</html>
Run ›

CSS RGBA Colors

Same as RGB but includes Alpha, which defines the opacity/transparency (from 0.0 to 1.0).

 

selector {
  property: rgba(red, green, blue, alpha);
}

Example

<html>
<head>
<title>Onlinetpoint - CSS Name</title>
</head>
<body>

<p style="background-color: rgba(255, 0, 0, 0.5);">
  Semi-transparent red background
</p>
</body>
</html>
Run ›

CSS HSL Colors

  • H → Hue (0–360 degrees on the color wheel)
  • S → Saturation (%)
  • L → Lightness (%)
selector {
  property: hsl(hue, saturation%, lightness%);
}

Example

<html>
<head>
<title>Onlinetpoint - CSS Name</title>
</head>
<body>
<h3 style="color: hsl(240, 100%, 50%);">Blue Color using HSL</h3>

<div style="background-color: hsl(120, 100%, 75%);">
  Light Green Background
</div>

</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.