Week 2
Week 2
CSS Colors
BACKGROUND INFORMATION FOR LEARNERS
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values.
Color Names
In CSS, a color can be specified by using a predefined color name. All modern browsers support the following 140
color names.
Example:
HEXADECIMAL COLORS
A hexadecimal color is specified with: #RRGGBB.
RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity
of the color.
Example:
HSL Colors
HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.
HSL stands for hue, saturation, and lightness.
HSL color values are specified with: hsl(hue, saturation, lightness).
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.
Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
Lightness is also a percentage; 0% is black, 100% is white.
Example:
RGBA Value
An RGBA color value is specified with: rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Example:
HSLA Value
An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Example:
TEXT COLOR
Text color property
The color property is used to set the color of the text. The color is specified by:
a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
Example:
BACKGROUND COLOR
The background-color property specifies the background color of an element.
Example:
OPACITY/TRANSPARENCY
The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0
- 1.0. The lower value, the more transparent.
Example:
LEARNING COMPETENCY
Applying color to HTML elements using CSS Color property and background-color property.
REFLECTION:
_______________________________________________________________
_______________________________________________________________
_______________________________________________________________
REFERENCES
https://www.w3schools.com