HTML Colours
HTML colors are specified with
predefined color names, or with RGB,
HEX, HSL, RGBA, or HSLA values.
HTML Colours
Colour Names
TASK
HTML Colours
Background Colours
TASK
HTML Colours
TEXT Colours
TASK
HTML Colours
Border Colours
TASK
HTML Colours
Colour Values
In HTML, colors can also be specified
using RGB values, HEX values, HSL
values, RGBA values, and HSLA values
The following two <div> elements have their
background color set with RGBA and HSLA
values, which add an Alpha channel to the color
(here we have 50% transparency):
TASK
HTML Colours
HTML RGB Colors
• An RGB color value represents RED, GREEN, and
BLUE light sources.
• In HTML, a color can be specified as an RGB
value, using this formula:
rgb(red, green, blue)
• Each parameter (red, green, and blue) defines
the intensity of the color with a value between
0 and 255.
• This means that there are 256 x 256 x 256 =
16777216 possible colors!
• For example, rgb(255, 0, 0) is displayed as red,
because red is set to its highest value (255), and
the other two (green and blue) are set to 0.
• To display black, set all color parameters to 0, like
this: rgb(0, 0, 0).
• To display white, set all color parameters to 255,
like this: rgb(255, 255, 255).
• Shades of Grey
• Shades of gray are often defined using equal
values for all three parameters:
TASK
HTML Colours
HTML RGBA Colors
An RGBA color value is an extension of RGB with
an Alpha channel (opacity).
• 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):
An RGBA color value is an extension of RGB with
an Alpha channel (opacity).
TASK
HTML Colours
HTML HEX Colours
A hexadecimal color is specified with: #RRGGBB, where the
RR (red), GG (green) and BB (blue) hexadecimal integers
specify the components of the color
• In HTML, a color can be specified using a hexadecimal value in
the form:
#rrggbb
• Where rr (red), gg (green) and bb (blue) are
hexadecimal values between 00 and ff (same as
decimal 0-255).
• For example, #ff0000 is displayed as red, because red is set to
its highest value (ff), and the other two (green and blue) are set
to 00.
HTML Colours
HSL Color Values
HSL stands for hue, saturation, and lightness.
• In HTML, a color can be specified using hue, saturation,
and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is
red, 120 is green, and 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 value. 0% is black, and
100% is white.
Saturation
• Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray.
50% is 50% gray, but you can still see the color.
0% is completely gray; you can no longer see the color.
Lightness
The lightness of a color can be described as how much light
you want to give the color, where 0% means no light (black),
50% means 50% light (neither dark nor light), and 100% means
full lightness (white).
TASK
HTML Colours
HSLA Color Values
• HSLA color values are an extension of HSL color values,
with an Alpha channel - which specifies the opacity for a
color.
• 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):
TASK
