Colour Codes
Hexadecimal colour codes are six-digit codes that represent colors in the RGB colour model.
They start with a hash symbol # followed by six characters, which can be numbers 0-9 or letters A-F upper or lower case.
A hexadecimal (hex) colour code is a 6 symbol code made of up to three 2 symbol elements.
Each of the 2 symbol elements expresses a colour value from ...
0 to 255 → decimal
00 to FF → hexadecimal
The format for a hexadecimal colour code is #RRGGBB
The first two characters RR denote the intensity of the red colour 00-FF
The next two characters GG denote the intensity of the green colour 00-FF
The last two characters BB denote the intensity of the blue colour 00-FF
The smallest value is #000000 which has a decimal equivalent of 0
The largest value is #FFFFFF which has a decimal equivalent of 16777215
#000000 → black
#FF0000 → red
#00FF00 → green
#0000FF → blue
#FFFFFF → white
rgb() is a colour model that represents colours as mixtures of three underlying components (or channels) of red, green, and blue.
An rgb colour value is specified with the functional notation rgb()
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the primary colours' different intensities with a value between 0-255
rgb(0, 0, 0) → black
rgb(255, 0, 0) → red
rgb(0, 255, 0) → green
rgb(0, 0, 255) → blue
rgb(255, 255, 255) → white
hsl() is a colour model that represents colours in the rgb colour space according to its hue, saturation, and lightness components.
An hsl colour value is specified with the functional notation hsl()
hsl(hue, saturation, lightness)
colour wheel
A colour wheel, or a colour circle, represents a palette of colours in chart form, arranged in a circle.
A colour wheel can display colours identified by two polar coordinates, the angle and the distance from the origin, the circle's centre.
hsl represents colours in terms of three components hue, saturation, and lightness.
hue Type of colour, represented as a degree on the colour wheel 0°-360°
0° & 360° → red
120° → green
240° → blue
saturation: How intense the colour is (0% is grayscale, 100% is full colour).
lightness: How light or dark the colour is (0% is black, 100% is white).
hsl(0, 0%, 0%) → black
hsl(0, 100%, 50%) → red
hsl(120, 100%, 50%) → green
hsl(240, 100%, 50%) → blue
hsl(0, 0%, 100%) → white