Updated: November 11, 2016

Chart – UI Theme Designer for Color Palettes

Intro

The only way to change the HEX values is to create a completely new visual design theme using the theme designer. If you’re undertaking such a project, here are some things to consider to ensure everything works correctly.

Qualitative Palette  

Each color must be visually distinct from each other while carrying the same saturation and brightness.

Qualitative Palette (e.g. Blue Crystal, Belize, Belize Plus)
Qualitative Palette (e.g. Blue Crystal, Belize, Belize Plus)

Sequential Palette Color Hues

The first three colors in your sequential palette should be the same color hue as the first three colors in your qualitative palette so they work together.

Three hues for Sequential palette
Three hues for Sequential palette

Sequential and Semantic Colors

The colors in your sequential and semantic palettes should have the same saturation and brightness as each shade for each hue.

Equal weight and saturation between the shades on the same row
Equal weight and saturation between the shades on the same row

Semantic Colors

Your semantic palette should contain four hues that represent good, bad, critical and neutral.