Branding Color Variables

Branding Color Variables

This page collects some of the ideas that are being discussed and also collects resources (such as branding guidelines) to help the WebBlocks Team think about how color will be used by potential users.

This page references Issues #33 and #124

1. Brand colors are often systems of colors.

To illustrate - brand guidelines often state a set of color combinations (hues) and hierarchy (which are the primary or dominant colors). Designers take these core colors and treat them like variables to create their color palettes for a given design.

For an example, see the Android color system: http://developer.android.com/design/style/color.html . Note that while the core set of colors are 5 basic hues, in reality, the extended swatch contains 14 shades per hue.

Thus while working on the WebBlocks color specifications, it became clear that some solution would need to be created to accommodate a wider set of colors than simply 4 colors: "primary", "secondary", "tertiary" and "neutral".

2. Brand colors are specific to each organization.

Branding Color Systems convey both unity and distinction. Thus in the UC system you'll notice that all share some commitment to "blue and gold" but each interpret these factors in their own unique takes. Thus, the nature of brand colors is to be specific and unique and the problem arises - how do we best allow each user to set their specific brand colors ?

UC Brand Color Systems

UCLA: (source: UCLA Style Guide updated 3/23/12, p21 -color usage)

/Primary: UCLA Blue/ #3399cc;

/Secondary: Gold/ #ffb300;

/Secondary: Yellow/ #ffe800;

/Secondary: Dark Blue/ #0055a6;

/Secondary: Light Blue/ #00a5e5;

/Tertiary: Neon Yellow/ #ffff00;

/Tertiary: Neon Green/ #00ff87;

/Tertiary: Neon Purple/ #8237ff;

/*Tertiary: Magenta */ #ff00a5;

/*Tertiary: Cyan */ #00ffff;

/*Tertiary: Black */ #000000;

UCSD

UCSB (source: http://www.ucsb.edu/webguide/graphic-identity.shtml)

UCSF (source: http://www.ucsf.edu/sites/default/files/documents/ucsf_id_sec10_mar12.pdf)

/* Primary Teal */ #88bbbb;

/* Primary Warm Grey */ #bbbbaa;

/* Primary Black */ #000000;

/* Primary Dark Blue */ #003366;

/* Secondary Olive Green */ #999933;

/* Secondary Light Blue */ #7799bb;

/* Secondary Periwinkle */ #666699;

/* Secondary Red */ #990000;

/* Secondary Gold */ #cc6600;

/* Secondary Yellow */ #cc9933;

/* Greys Palette */ (Neutral)

/* Pastels Palette */ (Tertiary Colors)

UC Irvine (source: http://www.uci.edu/graphic_identity/colors.php)

UC Riverside (source: http://creativedesign.ucr.edu/ism/colors.html )

UC Berkeley (source: http://www.berkeley.edu/misc/colors.shtml)

UC Santa Cruz (sources: http://www.ucsc.edu/identity/print/logo-colors.html and here: http://www.ucsc.edu/identity/web/templates-example.html )

UC Merced (source: http://communications.ucmerced.edu/2.asp?uc=1&lvl2=183&lvl3=183&lvl4=187&contentid=152)

UC Davis (source: http://identitystandards.ucdavis.edu/graphic-standards/colors.html see section for web use)

Notes RE color contrast (accessibility) and SASS Vars for colors and Base Branding Colors