Le Koj Group LLC

Blog Post

white shape
blue shape
white shape

How To Define Font and Background Color With CSS

css mini scaled

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]