1. Intro To CSS Colors

CSS colors are the main component of CSS styling. Whenever we visit some website, we see colorful headers, menus, sidebars, colored buttons, attractive forms, stylish tables and lists and many more components. All these stylish components have CSS colors. There are many types of colors. See the list below:

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

Tutorial Contents:

  1. What are CSS Colors?
  2. Name Colors
  3. RGB Colors
  4. HEX Colors
  5. HSL Colors
  6. RGBA Colors
  7. HSLA Colors

2. CSS Colors By Name

We can specify colors by their names in CSS. The color name will be simple in word form, like Yellow, Orange etc. See the below colors for instance:

Colors By Name

Crimson
Cyan
DarkBlue
DarkOrange
DarkOrchid
DeepPink
DeepSkyBlue
FireBrick
ForestGreen
LightSeaGreen
Magenta
OrangeRed

Try in CodeLab

Note:

Above are some of the HTML colors by name values. Please visit the below link to find complete list of HTML colors by the name value.
HTML Color Names

3. CSS Colors By RGB Value

RGB stands for Red : Green : Blue. CSS allows us to use RGB value for colors. We can specify an RGB color as follows:

rgb(red, green, blue)

Following are some characteristics of RGB Colors:

  • In above representation of RGB colors, each parameter has a value within a range of 0-255
  • Each parameter defines its intensity from 0 to 255
  • Red has rgb value of rgb(255,0,0). Since red has its maximum value and green and blue parameters are at 0, therefore the color is red
  • Similarly, rgb(0, 255, 0) will denote green color and rgb(0, 0, 255) represent blue color
  • Likewise rgb(0,0,0) will represent black color and rgb(255,255,255) stands for white color
  • We can also define shades of grey by keeping all the three value equal, like rgb(120,120,120) etc

Colors By RGB Value

Red rgb(255,0,0)
Green rgb(0,255,0)
Blue rgb(0,0,255)
White rgb(255,255,255)
Black rgb(0,0,0)
rgb(255,120,120)
rgb(120,255,120)
rgb(120,120,255)
rgb(120,255,255)
rgb(120,120,120)

Try in CodeLab

4. CSS Colors By HEX Value

Likewise RGB color values, HEX colors can be specified by the following formula:

#rrggbb
  • Where rr stands for Red : gg stands for Green : and bb denotes Blue
  • The range of rr, gg and bb is 00-99 and aa upto ff
  • Also you can define colors by using capital letters, like AA, BB, CC, DD, etc
  • Which is similar to RGB color values i.e 0-255
  • For instance: #ff0000 will represent red color as rr is at highest value
  • Also equal values like #000000, #787878, #686868, #3a3a3a, #3f3f3f, can define shades of grey

Consider the below panel and try live in codelab to understand the HEX colors more precisely.

Colors By HEX Value

Red #ff0000
Green #00ff00
Blue #0000ff
White #ffffff
Black #000000
#909090
#3f3f3f
#979797
#a4a4a4
#4a4a4a

Try in CodeLab

5. CSS Colors By HSL Value

Furthermore to RGB and Hex colors, there is another way to select colors, which is called HSL color values.

hsl(hue, saturation, lightness)
  • Hue is the degree on the color wheel and it has range between 0 to 360
  • 0 degree hue value will denote Red color, 120 degree will display Green color and 240 will display Blue color
  • Saturation is the second parameter that has range in percentage from 0 to 100%
  • 0% means the color contains shades of grey whereas 100% means the color has its full intensity
  • Lightness being third parameter and has range similar to saturation i.e 0% – 100%
  • 0% means full black 50% will display neither black nor white and 100 will define white color
  • Most importantly, always write % character with saturation and lightness values, even if it is 0%

Look at the following examples to clear the prospective:
Since 0 degree and 360 degree are side by side on color wheel, therefore they have almost similar or matching color display.

Hue (0-360)

hsl(0, 100%, 50%)
hsl(30, 100%, 50%)
hsl(60, 100%, 50%)
hsl(90, 100%, 50%)
hsl(120, 100%, 50%)
hsl(150, 100%, 50%)
hsl(180, 100%, 50%)
hsl(210, 100%, 50%)
hsl(240, 100%, 50%)
hsl(270, 100%, 50%)
hsl(300, 100%, 50%)
#hsl(330, 100%, 50%)
hsl(360, 100%, 50%)

Try in CodeLab

Below are some color combinations for red, green and blue with saturation range from 0% to 100%.

Saturation (0%-100%)

hsl(0, 10%, 50%)
hsl(0, 20%, 50%)
hsl(0, 30%, 50%)
hsl(0, 40%, 50%)
hsl(0, 50%, 50%)
hsl(0, 60%, 50%)
hsl(0, 70%, 50%)
hsl(0, 80%, 50%)
hsl(0, 90%, 50%)
hsl(0, 100%, 50%)
hsl(120, 10%, 50%)
hs(120, 20%, 50%)
hsl(120, 30%, 50%)
hsl(120, 40%, 50%)
hsl(120, 50%, 50%)
hsl(120, 60%, 50%)
hsl(120, 70%, 50%)
hsl(120, 80%, 50%)
hsl(120, 90%, 50%)
hsl(120, 100%, 50%)
hsl(240, 10%, 50%)
hsl(240, 20%, 50%)
hsl(240, 30%, 50%)
hsl(240, 40%, 50%)
hsl(240, 50%, 50%)
hsl(240, 60%, 50%)
hsl(240, 70%, 50%)
hsl(240, 80%, 50%)
hsl(240, 90%, 50%)
hsl(240, 100%, 50%)

Try in CodeLab

Below are some color shades for red, blue and green with lightness values from 10% to 100%. As you can see 10% lightness is almost black and 100% lightness is complete white.

Lightness (0%-100%

hsl(0, 100%, 10%)
hsl(0, 100%, 20%)
hsl(0, 100%, 30%)
hsl(0, 100%, 40%)
hsl(0, 100%, 50%)
hsl(0, 100%, 60%)
hsl(0, 100%, 70%)
hsl(0, 100%, 80%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
hsl(120, 100%, 10%)
hsl(120, 100%, 20%)
hsl(120, 100%, 30%)
hsl(120, 100%, 40%)
hsl(120, 100%, 50%)
hsl(120, 100%, 60%)
hsl(120, 100%, 70%)
hsl(120, 100%, 80%)
hsl(120, 100%, 90%)
hsl(120, 100%, 100%)
hsl(240, 100%, 10%)
hsl(240, 100%, 20%)
hsl(240, 100%, 30%)
hsl(240, 100%, 40%)
hsl(240, 100%, 50%)
hsl(240, 100%, 60%)
hsl(240, 100%, 70%)
hsl(240, 100%, 80%)
hsl(240, 100%, 90%)
hsl(240, 100%, 100%)

By setting hue and saturation values to 0, you can define shades of grey.

hsl(0, 0%, 5%)
hsl(0, 0%, 10%)
hsl(0, 0%, 15%)
hsl(0, 0%, 20%)
hsl(0, 0%, 25%)
hsl(0, 0%, 30%)
hsl(0, 0%, 35%)
hsl(0, 0%, 40%)
hsl(0, 0%, 45%)
hsl(0, 0%, 50%)
hsl(0, 0%, 55%)
hsl(0, 0%, 60%)
hsl(0, 0%, 65%)
hsl(0, 0%, 70%)
hsl(0, 0%, 75%)
hsl(0, 0%, 80%)
hsl(0, 0%, 85%)
hsl(0, 0%, 90%)
hsl(0, 0%, 95%)
hsl(0, 0%, 100%)

Try in CodeLab

6. CSS Colors By RGBA Value

We can extend RGB colors to RGBA by another parameter called alpha channel, which defines the opacity of the color. We can denote an RGBA color as follows:

rgba(red, green, blue, alpha)
  • Where the alpha parameter has its values within the range from 0.0 to 1.0
  • 0.0 making the color fully transparent and 1.0 means not transparent at all

See the example below to understand:

Colors By RGBA Value

rgba(255, 0, 0, 0.0)
rgba(255, 0, 0, 0.2)
rgba(255, 0, 0, 0.4)
rgba(255, 0, 0, 0.6)
rgba(255, 0, 0, 0.8)
rgba(255, 0, 0, 1.0)
rgba(0, 255, 0, 0.0)
rgba(0, 255, 0, 0.2)
rgba(0, 255, 0, 0.4)
rgba(0, 255, 0, 0.6)
rgba(0, 255, 0, 0.8)
rgba(0, 255, 0, 1.0)
rgba(0, 0, 255, 0.0)
rgba(0, 0, 255, 0.2)
rgba(0, 0, 255, 0.4)
rgba(0, 0, 255, 0.6)
rgba(0, 0, 255, 0.8)
rgba(0, 0, 255, 1.0)

Try in CodeLab

7. CSS Colors By HSLA Value

We can extend HSL colors to HSLA by another parameter called alpha channel, which defines the opacity of the color. We can denote an RGBA color as follows:

hsla(hue, saturation, lightness, alpha)
  • Where the alpha parameter has its values within the range from 0.0 to 1.0
  • 0.0 making the color fully transparent and 1.0 means not transparent at all

See the example below to understand:

Colors By HSLA Value

hsla(0, 100%, 50%, 0.0)
hsla(0, 100%, 50%, 0.2)
hsla(0, 100%, 50%, 0.4)
hsla(0, 100%, 50%, 0.6)
hsla(0, 100%, 50%, 0.8)
hsla(0, 100%, 50%, 1.0)
hsla(120, 100%, 50%, 0.0)
hsla(120, 100%, 50%, 0.2)
hsla(120, 100%, 50%, 0.4)
hsla(120, 100%, 50%, 0.6)
hsla(120, 100%, 50%, 0.8)
hsla(120, 100%, 50%, 1.0)
hsla(240, 100%, 50%, 0.0)
hsla(240, 100%, 50%, 0.2)
hsla(240, 100%, 50%, 0.4)
hsla(240, 100%, 50%, 0.6)
hsla(240, 100%, 50%, 0.8)
hsla(240, 100%, 50%, 1.0)

Try in CodeLab

Give Us Your Feedback
OR
If You Need Any Help!
Contact Us