Additive RGB Model
- RGB (red, green, blue)
- All colors begin as black i.e. rgb(0,0,0)
Primary Colours
- Colors that, when combined create pure white
- Each color must be at its maximum intensity.
red
green
blue
Secondary Colours
- These are the colors you get when you combine primary colours
- red + green = yellow rgb (255, 255, 0)
- blue + green = cyan rgb (0, 255, 255)
- red + blue = magenta rgb (255, 0, 255)
yellow
cyan
magenta
Tertiary Colours
- These are the colors you get when you combine primary colour with a nearby secondary colour
-
orange
- red & yellow
- rgb (255, 127, 0)
-
spring green
- cyan & green
- rgb (127, 0, 255)
-
violet
- magenta & blue
- rgb (127, 0, 255)
orange
spring-green
violet
Other Tertiary Colors
-
chartreuse green
- green & yellow
- rgb (127, 255, 0)
-
azure
- blue & cyan
- rgb (0, 127, 255)
-
Rose
- red & magenta
- rgb (255, 0, 127)
chartreuse green
azure
rose
Complementary Colours
- Two colours that are on opposite sides of the colour wheel
- If two complementary colours are combined they produce grey
- When two complementary colours are placed side by side they provide string visual contrast and appear brighter
*** Notice that the red and cyan colors are very bright right next to each other. This contrast can be distracting if it's overused on a website, and can make text hard to read if it's placed on a complementary-colored background. It's better practice to choose one color as the dominant color, and use its complementary color as an accent to bring attention to certain content on the page. ***
We use complementary colours to attract the readers attention to certain parts of the webpage.
RED
CYAN
HSL Colour Model
Hue Saturation Lightness
HSL function hsl()
- It accepts three parameters(Hue, Saturation, Lightness
- Hue => its like a circle. Red is at 0 degrees, Green at 120 degrees and Blue at 240 degrees
- Saturation => its the intensity of the colour. 0% is low intensity or gray and 100% is full intensity or pure colour
- Lightness => How bright a colour appears. 0% is for complete Black, 100% is for complete white and 50% is neutral
