Transformative Website Style Guide: Style

Color Pairs that Do Not Work Well Together

Use colors that provide enough contrast to maintain clear legibility. Here are some color pairs that you should avoid (especially when referring to a background with text):

• Green + Purple

• Light Green + Yellow

• Yellow + White

• Black + Red

• Black + Blue

• Black + Purple

Color Blocking

Color can create visual separation (think blocks). Simply adding a background color can sometimes be just enough emphasis to direct your users to the information they are looking for. Think about signage; rarely do you see words simply hanging on a wall in a building. Often there is a background color to first draw attention to the sign.

Using Hex Codes

Hexadecimal (hex) codes are a great way to specify color in your web design. By matching the color code, you can be sure that the color you are selecting is an exact match. The first two letters/numbers refer to the red value, the next two refer to green value, and the last two refer to the blue value. These values are defined between 00 and FF (instead of from 0 to 255 in RGB).

How To Color Match

Use a browser extension (like Colorzilla) to select a color from anywhere on the page. The eyedropper tool will automatically copy the hex code for you to paste into your content management system.

Although you will first want to keep within your brand guidelines, when considering fonts for your website note the following: Remember to use a contrasting color for all text on your website. Keep your fonts to 2-3 different fonts to maintain a cohesive look.

Fonts not to use and why:

Comic Sans - appears childish and informal

Courier New - low resolution

Times New Roman - narrow spacing and can appear lazy since it is typically a default font

There are several other fonts to avoid using, these are just a few and are dependent on context of the design.