The Rainbow of Colors

As a powerful form of communication, color is irreplaceable. The Xipidity palette adheres to the Google material design standards and colors may be applied to backgrounds, borders, and icons through the use of the font color and background toolbar buttons.

Xidipity WordPress Theme The Rainbow of Colors
Holi 2018 Google Doodle

Choosing an appropriate color combination in website design is considered one of the most important tasks in creating a successful website. Good color choices take careful planning and when done correctly can greatly influence site traffic.

 

Xidipity subscribes to the Google material design standards and the rule of three. The rule of three states the number of colors in the scheme should be three or less. Xidipity has a base, primary, and secondary colors.

 

 

black & white

 

What about black and white? Technically they are not colors because they do not have a specific wavelength. White is the combination of all colors and black is the absence thereof. They are available and are included as a part of the base. Black is used to style text and white is used to style backgrounds as this combination produces the best contrast ratio for reading (see Typography).

 

base color

 

Grey is the Xidipity base color and it is used for demming, tinting, and shading.

 

050
100
200
300
400
500
600
700
800
900

 

 

Base Foreground / White Background
050 – Aa large text / Aa normal text
100 – Aa large text / Aa normal text
200 – Aa large text / Aa normal text
300 – Aa large text / Aa normal text
400 – Aa large text / Aa normal text
500 – Aa large text / Aa normal text
600 – Aa large text / Aa normal text
700 – Aa large text / Aa normal text
800 – Aa large text / Aa normal text
Base Foreground / Black Background
050 – Aa large text / Aa normal text
100 – Aa large text / Aa normal text
200 – Aa large text / Aa normal text
300 – Aa large text / Aa normal text
400 – Aa large text / Aa normal text
500 – Aa large text / Aa normal text
600 – Aa large text / Aa normal text
700 – Aa large text / Aa normal text
800 – Aa large text / Aa normal text

 

White Foreground / Base Background
050 – Aa large text / Aa normal text
100 – Aa large text / Aa normal text
200 – Aa large text / Aa normal text
300 – Aa large text / Aa normal text
400 – Aa large text / Aa normal text
500 – Aa large text / Aa normal text
600 – Aa large text / Aa normal text
700 – Aa large text / Aa normal text
800 – Aa large text / Aa normal text
Black Foreground / Base Background
050 – Aa large text / Aa normal text
100 – Aa large text / Aa normal text
200 – Aa large text / Aa normal text
300 – Aa large text / Aa normal text
400 – Aa large text / Aa normal text
500 – Aa large text / Aa normal text
600 – Aa large text / Aa normal text
700 – Aa large text / Aa normal text
800 – Aa large text / Aa normal text

 

 

primary color

 

The primary color of Xidipity is deep orange. It is used to draw focus and attention.

 

050
100
200
300
400
500
600
700
800
900

 

Primary Foreground / White Background
050 – Aa large text / Aa normal text
100 – Aa large text / Aa normal text
200 – Aa large text / Aa normal text
300 – Aa large text / Aa normal text
400 – Aa large text / Aa normal text
500 – Aa large text / Aa normal text
600 – Aa large text / Aa normal text
700 – Aa large text / Aa normal text
800 – Aa large text / Aa normal text
Primary Foreground / Black Background
050 – Aa large text / Aa normal text
100 – Aa large text / Aa normal text
200 – Aa large text / Aa normal text
300 – Aa large text / Aa normal text
400 – Aa large text / Aa normal text
500 – Aa large text / Aa normal text
600 – Aa large text / Aa normal text
700 – Aa large text / Aa normal text
800 – Aa large text / Aa normal text

 

White Foreground / Primary Background
050 – Aa large text / Aa normal text
100 – Aa large text / Aa normal text
200 – Aa large text / Aa normal text
300 – Aa large text / Aa normal text
400 – Aa large text / Aa normal text
500 – Aa large text / Aa normal text
600 – Aa large text / Aa normal text
700 – Aa large text / Aa normal text
800 – Aa large text / Aa normal text
Black Foreground / Primary Background
050 – Aa large text / Aa normal text
100 – Aa large text / Aa normal text
200 – Aa large text / Aa normal text
300 – Aa large text / Aa normal text
400 – Aa large text / Aa normal text
500 – Aa large text / Aa normal text
600 – Aa large text / Aa normal text
700 – Aa large text / Aa normal text
800 – Aa large text / Aa normal text

 

 

secondary color

 

The secondary color of Xidipity is deep purple. It is used as a call for action.

 

050
100
200
300
400
500
600
700
800
900

 

Secondary Foreground / White Background
050 – Aa large text / Aa normal text
100 – Aa large text / Aa normal text
200 – Aa large text / Aa normal text
300 – Aa large text / Aa normal text
400 – Aa large text / Aa normal text
500 – Aa large text / Aa normal text
600 – Aa large text / Aa normal text
700 – Aa large text / Aa normal text
800 – Aa large text / Aa normal text
Secondary Foreground / Black Background
050 – Aa large text / Aa normal text
100 – Aa large text / Aa normal text
200 – Aa large text / Aa normal text
300 – Aa large text / Aa normal text
400 – Aa large text / Aa normal text
500 – Aa large text / Aa normal text
600 – Aa large text / Aa normal text
700 – Aa large text / Aa normal text
800 – Aa large text / Aa normal text

 

White Foreground / Secondary Background
050 – Aa large text / Aa normal text
100 – Aa large text / Aa normal text
200 – Aa large text / Aa normal text
300 – Aa large text / Aa normal text
400 – Aa large text / Aa normal text
500 – Aa large text / Aa normal text
600 – Aa large text / Aa normal text
700 – Aa large text / Aa normal text
800 – Aa large text / Aa normal text
Black Foreground / Secondary Background
050 – Aa large text / Aa normal text
100 – Aa large text / Aa normal text
200 – Aa large text / Aa normal text
300 – Aa large text / Aa normal text
400 – Aa large text / Aa normal text
500 – Aa large text / Aa normal text
600 – Aa large text / Aa normal text
700 – Aa large text / Aa normal text
800 – Aa large text / Aa normal text

 

 

notes

 

The business of color design can be complex but it really comes down to the following.

 

1
select primary & secondary color

 

The Google Material Design color palette contains the following colors.

 

  • Red
  • Pink
  • Purple
  • Deep Purple
  • Indigo
  • Blue
  • Light Blue
  • Cyan
  • Teal

 

  • Green
  • Light Green
  • Lime
  • Yellow
  • Amber
  • Orange
  • Deep Orange
  • Brown
  • Grey
  • Blue Grey

 

Each color has ten tints/shades. Tint is the mixture of a color with white, which increases lightness and a shade is the mixture of a color with black, which reduces lightness. In any case the tint/shade is identified with a number beginning with 050 (light) and ending with 900 (dark).

 

Once the primary color is defined the Google Material Design online tool can help with the secondary. Typically the relationship of the secondary to the primary color is one of the following.

 

  • Same
  • Complementary
  • Analogous
  • Triadic

 

The goal is to pick a harmonious color combination. Once this decision is made, modify the blog-var.css file and update the hex values with the hex value of the individual tints/shades. This includes both foreground (fg) and background (bg) colors.

 

2
set specific design element colors

 

There are a few specific items which will need you attention. The color should come from your base, primary, or secondary palette.

 

Site Title

If the decision is to go with the text WordPress title as defined in settings , the color is set by the “title-color” variable.

 

Site Description

If the answer to title is yes, then the site description color is defined by the “descr-color” variable.

 

Site Header / Body / Footer Background

The background color of the site header is set by the “sys-hdr-bg-color“, the body by “sys-bg-color“, and the footer by “sys-ft-bg-color” variables.

 

Text

It is absolutely critical text is legible and the color matrix above can help.

Base

The default color of text content is defined by the “sys-fnt-color” variable. Normally this color would be set to base 900 (#212121) but in the case of Xidipity.com, it is set to black (#000000). The reason for this is the default weight is set to light (300) and the darker color helps with readability.

 

Links

The default hyperlink color is defined by the “sys-lnk-pri-color” variable and the hover color is defined by the “sys-lnk-sec-color” variable. The hover background color is defined by the “sys-lnk-bak-color” variable.

 

Content Headers

Every detail of the content headers (h1-h6) are definable with the color attribute set by the “h1-6-color” variables.

 

custom colors

 

Colors can also be tweaked as content is created by using the foreground ( format_color_text ) and background ( format_color_text ) toolbar buttons. These tools are primarily design for text but can also be used with icons in most situations. Colors can be applied to table ( grid_on ) cells by adding a color styling option (eg. style=”color:#……“) to the cell properties.

 

The Xidipity.com color palette is available as a reference and contains swatches of the full Google material design palette.

 

If the decision becomes to use one of the many other color palette tools available, just update the hex values as needed in the blog-var.css file.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *