CSS Tutorial - CSS Colors

CSS Colors

CSS Colors are used to specify the colors of HTML Elements, Text, and Borders etc. In order to specify the colors using CSS, we can use the predefined names or Color Code Values.

---

Red

White

Aqua

Aquamarine

Yello

Orange

Bisque

Black

Blue

BlueViolet

Gray

Green

---

We can specify the color value in various formats. Below defined table is a list of the formats with Syntax and Example.

Format	Syntax	Example
Color Name	Red, Green, Blue, Tomato, Orange	div{background-color:orange;}
HEX Color value	#RRGGBB	div{background-color:#0066FF;}
RGB (Absolute Value)	rgb(rrr,ggg,bbb)	div{background-color: rgb(255, 0,255);}
RGB (% Value)	rgb(rrr%, ggg%,bbb%)	div{background-color rgb(50%, 40%,60%);}
SHC (Short HEX Code)	#RGB	div{background-color:#06F;}
HSL (Hue, Saturation, Light)	hsl(hhh, sss%, lll%)	div{background-color: hsl(120, 40%, 60%);}
RBGA (Red, Green, Blue, Alfa)	rgb(rrr,ggg,bbb, a.a)	div{background-color rgb(255, 0,255, 0.5);}
HSLA (Red, Green, Blue, Alfa)	hsl(hhh, sss%, lll%, a.a )	div{background-color: hsl(120, 40%, 60%, 0.4);}

You have been introduced with CSS color formats with their syntax and short examples above. Now we will study them more descriptively but before start, we need to understand basic concept of color code. It gives lot of idea about how can we use colors in CSS easily.

Whats is RGB?

RGB stands for Red, Green and Blue respectively. All of the three colors are Primary Colors. Digital colors shades are result of all three primary colors lights mixing which is emitted by the device screen. There are two types of mixing shades. Color Shades and Gray Shades.

---

Red - RGB(255, 0, 0)

Green - RGB(0, 255, 0)

Blue - RGB(0, 0, 255)

---

Color Shades: When all three Primary Color Light sources output the three different values then colors shades are formed. You can better understand with below example.

<div style = "background-color:rgb(251,163,20);"></div>

Gray Shades: When all three Primary Color Light sources output equal values then gray shades are formed. Check in the example.

<div style = "background-color:rgb(160,160,160);"></div>

Colors Names

In HTML and CSS, color can be defined with their names. Like Red, Blue, Yellow, Green, Aqua, Magenta etc. You can find in below example that how to use the color in CSS with their names.

---

Red

Green

Blue

Yellow

Pink

Orange

---

<div style = "background-color:green;"></div>

RGB Color Code

In HTML and CSS, color can be defined as RGB values. How to use the RGB values, you can find in below syntax example.

<div style = "background-color:rgb(251,163,20);"></div>

In above example rgb is the key and inside the parenthesis three color parameters define the intensity of red, green and blue color respectively. Each parameter value varies from 0 to 255. Lesser value defines the low intensity and higher value defines high intensity. All three equal values define the gray shade and different values define the color shade.

RGB color can be defined with absolute value and % (percent) too.

<div style = "background-color:rgb(50%,20%,20%);"></div>

RBGA Color Code

RGBA is an extension of RGB color value where ‘a’ stands for ‘alpha’. ‘a’ is alpha key which defined the opacity for a color. Value of ‘a’ is tends from 0.0 (full Transparent) to 1.0(full Opaque).

---

Red-RGBA(255,0,0,0.3)

Green-RGBA(0,255,0,0.4)

Blue-RGBA(0,0,255,0.5)

---

<div style = "background-color:rgb(251,163,20,0.5);"></div>

HEX Color Code

In HTML and CSS colors also can be defined using Hexadecimal value, you can find in below syntax example.

---

Red- #FF0000

Green-#00FF00

Blue-#0000FF

---

<div style = "background-color:#EECC00;"></div>

Hexadecimal Numbers: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

In above example you can find alpha-numerical six digits followed by # (hash). ‘#’ is a key for using hexadecimal code, first two digits are red color value, next two digits are green color value and last two digits are blue color value. Hexadecimal value can be varied from ‘00’ to ‘ff’.  Seven figures together create hex color code. Lesser value defines the low intensity and higher value defines high intensity. All three equal values define the gray shade and different values define the color shade.

<div style = "background-color:#434343;"></div>

SHC (Short HEX Code)

SHC is shorter form of six digits HEX code. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #0C5 becomes #00CC55.

---

#2299bb = #29b

#EE99BB = #E9B

#EECC00 = #ECB

---

<div style = "background-color:#f90;"></div>

HSL Color Code

In HTML, a color can be also defined using HSL value. How to use the HSL values, you can find in below syntax example.

---

Red: hsl(0, 100%, 50%)

Green: hsl(120, 100%, 50%)

Blue: hsl(240, 100%, 50%)

---

<div style = "background-color:hsl(135, 94%, 30%);"></div>

In above example hsl is a key and inside the parenthesis three parameters (Hue, Saturation and Light) value are defined.

Hue is a degree on the color wheel from 0 to 360 where 0 is red, 120 is green and 240 is blue. Saturation can be described as intensity of color. 0% means no color only gray, 50% means 50% of gray and color both and 100% means only color no gray. The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades

<div style = "background-color:hsl(0, 0%, 30%);"></div>

HSLA Color Code

HSLA is an extension of HSL color value where ‘a’ stands for ‘alpha’. ‘a’ is alpha key which defined the opacity for a color. Value of ‘a’ is tends from 0.0 (full Transparent) to 1.0(full Opaque).

---

Red: hsl(0, 100%, 50%, 0.5)

Green: hsl(120, 100%, 50%, 0.4)

Blue: hsl(240, 100%, 50%, 0.3)

---

<div style = "background-color:hsla(0, 0%, 30%, 0.5);"></div>

Related Topics