Home >> css >> CSS Colors

CSS Colors

Predefined color names or RGB, HSL, HEX, RGBA, and HSLA values are used for specifying the colors.

CSS Color Names

In CSS, you can specify a color by using a predefined color name:

RED
GREEN
BLUE
GREY
YELLOW
Etc.

CSS Background Color

To set the background color for HTML elements:

Example:

<!DOCTYPE html>
<html>
<head>
           <title>CSS Background Color</title>
</head>
<body>
           <h1 style="background-color:DodgerBlue;">Hello World</h1>
           <p style="background-color:red;">A CSS Example</p>
</body>
</html>

Try With Example

CSS Text Color

For setting the color of the text:

Example :

<!DOCTYPE html>
<html>
<head>
           <title>CSS Text Color</title>
</head>
<body>
           <h1 style="color:Red;">Hello World</h1>
           <p style="color:Blue;">CSS Text color example.</p>
           <p style="color:Green;">This is green Text</p>
</body>
</html>

Try With Example

CSS Border Color

To set the color of the borders:

Example:

<!DOCTYPE html>
<html>
<head>
           <title>CSS Text Color</title>
</head>
<body>
           <h1 style="border:2px solid red;">Hello World</h1>
           <h1 style="border:2px solid DodgerBlue;">Hello World</h1>
           <h1 style="border:2px solid Green;">Hello World</h1>
</body>
</html>

Try With Example

In CSS, you can also set colors by specifying the RGB values, HEX values, HSL values, RGBA values, and HSLA values:

Example :

<!DOCTYPE html>
<html>
<head>
           <title>CSS RGB values</title>
</head>
<body>
           <h1 style="background-color:rgb(255, 99, 71);">HTML</h1>
           <h1 style="background-color:#ff6347;">CSS</h1>
           <h1 style="background-color:hsl(9, 100%, 64%);">Java Script</h1>

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

Try With Example

CSS RGB Colors

An RGB color value denotes RED, GREEN, and BLUE light sources.

RGB Value

In CSS, the following formula is used to specify a color as an RGB value.

rgb(red, green, blue)

For example, rgb(255, 0, 0) is displayed as red since red is set to its maximum value (255) and green and blue values are set to 0.

For displaying black, you can set all color parameters to 0, like this: rgb(0, 0, 0).

For displaying white, you can set all color parameters to 255, like this: rgb(255, 255, 255).

RGBA Value

The extension of RGB color values with an alpha channel is called RGBA color values. It specifies the opacity for a color.

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all): Experiment by mixing the RGBA values below:

CSS HEX Colors

You can specify a hexadecimal color with: #RRGGBB, where the RR (red), GG (green), and BB (blue) hexadecimal integers define the components of the color.

HEX Value

In CSS, you can specify a color using a hexadecimal value in the form:

#rrggbb

Here rr (red), gg (green), and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red as red is set to its highest value (ff) here, and the others are set to the lowest value (00).

For displaying black, you can set all values to 00, like this: #000000.

For displaying white, you can set all values to ff, like this: #ffffff.

You can experiment by mixing the HEX values below:

3 Digit HEX Value

At times you may see a 3-digit hex code in the CSS source.

The 3-digit hex code is shorthand for some 6-digit hex codes.

The 3-digit hex code has the following form:

#rgb

Where r, g, and b represent the red, green, and blue components with values between 0 and f.

You can use a 3-digit hex code only when both the values (RR, GG, and BB) are the same for each component. So, if we have #ff00cc, it can be written like this: #f0c.

Here is an example:

Example:

<!DOCTYPE html>
<html>
<head>
           <title>CSS Color example</title>
 <style>
body {
  background-color: #fc9; /* same as #ffcc99 */
}

h1 {
  color: #f0f; /* same as #ff00ff */
}

p {
  color: #b58; /* same as #bb5588 */
}

</style>
</head>
<body>
           <h1>Hello World</h1>
           <p>CSS color example.</p>

</body>
</html>

Try With Example

-Advertisement-