The Rainbow of Xidipity 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.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

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

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

 

050
100
200
300
400
500
600
700
800
900
Tint Hex Typical Use
050 fafafa backgrounds
100 f5f5f5 backgrounds
200 eeeeee header background, menus
300 e0e0e0 borders
400 bdbdbd horizontal rule
500 9e9e9e dimmed text
600 757575 dimmed text
700 616161 none
800 424242 pagination
900 212121 blog description

 

 Primary

 

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

 

Tint Hex Typical Use
050 fbe9e7 none
100 ffccbc blockquote
200 ffab91 sticky icon
300 ff8a65 read more icon
400 ff7043 none
500 ff5722 link hover
600 f4511e none
700 e64a19 none
800 d84315 none
900 bf360c none

 

 Secondary

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

 

Tint Hex Typical Use
050 ede7f6 sandbox editor
100 d1c4e9 none
200 b39ddb none
300 9575cd none
400 7e57c2 none
500 673ab7 link | toc/src btn
600 5e35b1 blog title
700 512da8 none
800 4527a0 none
900 311b92 none
chat_bubble_outline See how this looks in the material design toolkit.

 

 Custom Colors

Custom colors may be applied to text by using the foreground ( format_color_text ) and background ( format_color_text ) toolbar buttons. Custom colors may be applied to table ( grid_on ) cell properties and to templates by adding a color styling options (eg. style=”color:#……”) prior to embedding. 

 

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

 

 

Leave a Reply

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