Blog Post

How To Define Font and Background Color With CSS

The following steps will show you how to set the font and background color with css

6 DIFFERENT METHODS TO SET COLOR WITH CSS

Named Color

You apply the color property by naming the color.
There are around 147 named colors recognized by browsers.

									 element {  
    color:  colorName;  
    }								

[codepen_embed height="300" default_tab="html,result" slug_hash="wvyWoVa" user="le_koj"]See the Pen css color by Kojo Amoako (@le_koj) on CodePen.[/codepen_embed]

Hexadecimal Color (Hex Colors)

A total of 7 characters represent the hex colors..
Declaration starts with a pound sign [ # ]
Followed by any combination of numbers between [0 to 9], and any letters [A to F] or [a to f]
The first two values after the [ # ] represents the RED value
The second two values represents the GREEN value
The third two values represents the BLUE value

									element {  
    color: #F8f8f8; 
    background: #4C004C; 
        }								

[codepen_embed height="300" default_tab="html,result" slug_hash="bGLegqw" user="le_koj"]See the Pen hex-colors by Kojo Amoako (@le_koj) on CodePen.[/codepen_embed]

RGB Color

RGB stands for Red, Green, Blue.
You specify the color in terms of how much red, green, and blue you want.
All 3 values are expressed with numbers between 0 and 255.

									element {  
    color: rgb(amountOfRed, amountOfGreen, amountOfBlue);  
        }								

[codepen_embed height="300" default_tab="html,result" slug_hash="XWZKMNL" user="le_koj"]See the Pen rgb color by Kojo Amoako (@le_koj) on CodePen.[/codepen_embed]

RGBA Color

RGBA stands for Red, Green, Blue, Alpha.
You specify the color in terms of how much red, green, and blue you want
The Alpha specifies the opacity of the color
- It takes a value from 0.0 to 1.0:
- 0.0 means 0% opacity
- 1.0 means 100% opacity
All 3 values are expressed with numbers between 0 and 255

									element {  
    color: rgb(amountOfRed, amountOfGreen, amountOfBlue, alpha);  
        }								

[codepen_embed height="300" default_tab="html,result" slug_hash="bGLeqRM" user="le_koj"]See the Pen rgba color by Kojo Amoako (@le_koj) on CodePen.[/codepen_embed]

HSL Color

HSL stands for Hue, Saturation, Lightness
Hue represents the color wheel in 360 degrees
- 0 degrees is Red
- 120 degrees is Green
- 240 degrees is Blue
Saturation is the percentage amount of gray in the color
- 0% is the shade of Gray
- 100% is the color itself
Lightness is the percentage amount of darkness and lightness
- 0% is Black
- 100% is White

									element {  
    color: hsl(colorDegree, saturationDegree, lightnessDegree);  
        }								

[codepen_embed height="300" default_tab="html,result" slug_hash="oNELWzo" user="le_koj"]See the Pen hsl color by Kojo Amoako (@le_koj) on CodePen.[/codepen_embed]

HSLA Color

HSLA uses the same syntax as HSL, with the addition of the Alpha value
The Alpha value specifies the opacity of the color.
- It takes a value from 0.0 to 1.0
- 0.0 means 0% opacity
- 1.0 means 100% opacity

									element {  
    color: hsla(colorDegree, saturationDegree, lightnessDegree, alpha);  
        }								

[codepen_embed height="300" default_tab="html,result" slug_hash="wvyWdJZ" user="le_koj"]See the Pen hsla color by Kojo Amoako (@le_koj) on CodePen.[/codepen_embed]

Blog Post

How To Define Font and Background Color With CSS

The following steps will show you how to set the font and background color with css

6 DIFFERENT METHODS TO SET COLOR WITH CSS

Named Color

Hexadecimal Color (Hex Colors)

RGB Color

RGBA Color

HSL Color

HSLA Color

Popular Category

Tags:

Related

Have Any Project In Mind?

Subscribe To Our Newsletter!

Subscribe to our newsletter and stay updated.

Company

Solution

Resources