Tertiary colors in CSS


Learn about tertiary colors: 

Computer monitors and device screens create different colors by combining amounts of red, green, and blue light.

 This is known as the RGB additive color model in modern color theory. 

Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B), and yellow (R + G). 

 These secondary colors happen to be the complement to the primary color not used in their creation and are opposite to that primary color on the color wheel.

 For example, magenta is made with red and blue and is the complement to green.

Tertiary colors are the result of combining a primary color with one of its secondary color neighbors.

 For example, within the RGB color model, red (primary) and yellow (secondary) make orange (tertiary). This adds six more colors to a simple color wheel for a total of twelve.

There are various methods of selecting different colors that result in a harmonious combination in design.

 One example that can use tertiary colors is called the split-complementary color scheme. 

This scheme starts with a base color, then pairs it with the two colors that are adjacent to its complement.

 The three colors provide strong visual contrast in a design but are more subtle than using two complementary colors.

Here are three colors created using the split-complement scheme:

COLOR                                                                                                                 HEX-CODE

orange                                                                                                                    #FF7F00

cyan                                                                                                                         #00FFFF

raspberry                                                                                                            #FF007F

Adjust the color of various elements to complementary colors:

The Complementary Colors challenge shows that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side.

 However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background.

 In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.

The syntax for this is;

body {
    background-color: #FFFFFF;
  }

No comments:

Post a Comment