Shwe Oak (Htet Thu Win)

CSS Basics: Color

Text Color

color: [color value]
Example: p { color: blue; }

Background Color

background-color: [color value]
Example: body { background-color: blue; }

Color Definitions

Color keyword. Example: blue, pink
Hex Value. Example: #ff0000
RGB Function. Example: rgb(255, 0, 0)
RGBA Function. Example: rgba(255, 0, 0, 1)
HSL Function. Example: hsl(0, 100%, 50%)
HSLA Function. Example: hsla(0, 100%, 50%, 1)

Keyword Value

Use color name
Case-Insensitive
Example:
- color: blue;
- color: black;
- color: white;
See the supported color names @ https://www.w3schools.com/colors/colors_names.asp

Hex Value

Defined color in hexadecimal value in form
- #rrggbb (rr: red, gg: green; bb: blue)
Each rr, gg, and bb value can be between 00 and ff (0 to 255 in decimal)
Example:
- color: #0000ff
- color: #000000
- color: #ffffff

Hex Value Shorthand

If both characters in each hex color value are the same, we can just use one character to represent repeated value.
Example:
- Instead of writing #ff0000, can use #f00
- Instead of writing #ff5533, can use #f53

RGB Value

Formula: rgb(red, green, blue)
Each color value range from 0 to 255
Example:
- color: rgb(0, 0, 255)
- color: rgb(0, 0, 0)
- color: rgb(255, 255, 255)

RGBA Value

Extension of rgb with alpha channel (opacity)
Formula: rgba(red, green, blue, opacity)
Opacity range from 0 to 1
- 0 - fully transparent
- 1 - not transparent / opaque
Example:
- Semi transparent => color: rgba(0, 0, 255, 0.5)
- Fully transparent => color: rgba(0, 0, 255, 0)
- Not transparent => color: rgba(0, 0, 255, 1)

HSL Value

Formula: hsl(hue, saturation, lightness)
Hue: Degree on color wheel from 0 to 360 degree.
- red: 0, Green: 120, Blue: 240
Saturation: Intensity of color in percentage
- No color: 0%, Full Color: 100%
Lightness: Light of the color in percentage
- Black: 0%, Neutral: 50%, White: 100%
Example:
- color: hsl(240, 100%, 50%)
- color: hsl(0, 0%, 0%)
- color: hsl(0, 0, 100%)

HSLA Value

Extension of hsl with alpha channel (opacity)
Formula: hsla(hue, saturation, lightness, opacity)
Opacity range from 0 to 1
- 0 - fully transparent
- 1 - not transparent / opaque
Example:
- Semi transparent => color: hsla(240, 100%, 50%, 0.5)
- Fully transparent => color: hsla(240, 100%, 50%, 0)
- Not transparent => color: hsla(240, 100%, 50%, 1)

Thank you