CSS HEX Colors

In this article, you will learn-

1 CSS HEX Colors
2 CSS Colors
3 HEX Value
4 #ff0000
5 #0000ff
6 #3cb371
7 #ee82ee
8 #ffa500
9 #6a5acd
10 #000000
11 #3c3c3c
12 #787878
13 #b4b4b4
14 #f0f0f0
15 #ffffff
16 3 Digit HEX Value

CSS HEX Colors: A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.

CSS Colors

Colors are specified using predefined colors names, or RGB, HEX, HSL, RGBA, HSLA values.

The color property in CSS is used to set the color of HTML elements. Commonly, this property is used to set the background color or the font color of an element.

In CSS, we use color values for specifying the color. We can likewise use this property for the border-color and other decorative effects.

We can define the color of an element by using the accompanying ways:

RGB format.
RGBA format.
Hexadecimal notation.
HSL.
HSLA.
Built-in color.

HEX Value

In CSS, a color can be specified using a hexadecimal value in the form:

#rrggbb

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

For instance, #ff0000 is shown as red, since red is set to its highest value (ff) and the others are set to the least value (00).

Experiment by mixing the HEX values underneath:

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>

<p>In HTML, you can specify colors using Hex values.</p>

</body>
</html>

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

In HTML, you can specify colors using Hex values.

Shades of gray are often defined using equivalent values for all the 3 light sources:

Example

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:#000000;">#000000</h2>
<h2 style="background-color:#3c3c3c;">#3c3c3c</h2>
<h2 style="background-color:#787878;">#787878</h2>
<h2 style="background-color:#b4b4b4;">#b4b4b4</h2>
<h2 style="background-color:#f0f0f0;">#f0f0f0</h2>
<h2 style="background-color:#ffffff;">#ffffff</h2>

<p>By using equal values for red, green, and blue, you will get different shades of gray.</p>

</body>
</html>

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

By using equal values for red, green, and blue, you will get different shades of gray.

3 Digit HEX Value

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

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

The 3-digit hex code has the accompanying form:

#rgb

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

The 3-digit hex code can only be used when both the values (RR, GG, and BB) are something similar for each parts. Along these lines, on the off chance that we have #ff00cc, it can be written like this: #f0c.

Here is an example:

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

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

p {
  color: #b58; /* same as #bb5588 */
}
</style>
</head>
<body>

<h1>CSS 3-digit Hex Code</h1>
<p>This is a paragraph.</p>

</body>
</html>

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.