Secondary color

As explained in Design for Developers

A secondary color is a supporting palette color with less visual emphasis than the primary color.

A secondary color is created by mixing two primary colors. Purple, for example, combines red and blue. The color wheel makes this relationship easy to identify. section 9.2.1

In a user interface palette, a secondary color supports the primary color without competing with the main message or action. It can color a logo or other supporting element while keeping attention on the headline and call to action. section 9.5

Apply a secondary color deliberately:

• Choose a vibrant primary color for the main headline, principal call to action, and important states. section 9.5
• Use the secondary color for supporting identity, such as a logo, so it does not draw attention away from the primary action. section 9.5
• Reserve additional colors and gray swatches for secondary information, text hierarchy, and subtle interface contrast. section 9.5

A rental landing page

A rental landing page uses its most vibrant color for the headline, search button, and checked checkboxes. Its secondary color colors the logo, while another color highlights information tiles without distracting from the search action. section 9.5

Figure 9.8 The color wheel is divided to show primary, secondary, and tertiary colors.

Use the color-wheel figure to distinguish primary, secondary, and tertiary colors at a glance. section 9.2.1

Figure 9.16 The color palette I apply to my landing page

Use the applied palette figure to see how a secondary color fits into a complete landing-page color system. section 9.5

How Design for Developers covers it

How deep it goes

Defines secondary colors through color mixing and demonstrates their placement in a landing-page palette, without detailing implementation code.

Examples

Uses purple mixed from red and blue, a logo treatment, information tiles, and a rental landing-page palette.

What it assumes

Builds from primary colors and introduces the color-wheel categories before applying secondary colors to interface elements.

What you can do after

Apply it in a landing-page palette that preserves visual hierarchy between primary actions and supporting interface elements.

How it connects

Connects secondary colors to primary colors, tertiary colors, the color wheel, accent colors, and color palettes.

liveBookmanning.com

Read Design for Developers on liveBook Get the book at manning.com

Related concepts

• primary colorproduced by · A primary color is a foundational color in a particular color system that can be combined with other primary colors to produce additional colors.
• color palettepart of · A selected set of colors intended for coordinated use in visual design or representation.
• banded contentuses · Banded content is a web-page layout pattern that arranges text and images in horizontal strips spanning the full width of the browser window.
• tertiary colorcontrasts with · A tertiary color is a color produced by mixing a primary color with an adjacent secondary color on the color wheel.

This explainer was generated by Manning's knowledge graph from the text of Design for Developers. The section links point to the parts of the book it draws on.