Color Charter 

Design Color Palette Tool
i

Color Relationships


Complementary

Show Complementary Colors

Split Complementary

Show Split Complementary Colors

Analogous

Show Analogous Colors

Triads

Show Triad Colors

Tetrads

Show Tetrad Colors

Monochromes

Show Monochromatic Colors

Additional Features


Secondary Color

Add Secondary Color

Accents


Tints and Shades

Show Tints and Shades

Grayscales

Show Grayscales

Key Color

Select Color

How to use Color Charter

With the click of a couple of buttons, a palette can be selected and then demonstrated. Either pick a color from the color input or enter a hex, rgb, or hsl value into it, then click the button. Color Charter will generate a variety of color palettes and related color data automatically. Any of the 6 palettes can be demonstrated by selecting them from the menu. To include a key color in the Palette Bar, you can either click the Add button or select any of the color blocks that appear. If you want to remove a color from the Palette Bar, simply click the button that appears beside the Palette Bar. The colors will be removed in the opposite order in which they were added.

Click the button to copy all palettes of the current key color setting. The copy will be in style declaration block format and is ready to be pasted directly into a CSS file.

The color wheel used by Color Charter is based on the RGB color model, which uses an additive process. This means the palettes generated by Color Charter are determined by 30° intervals. So, for example, if red (rgb(255, 0, 0)) is the key color, cyan will be the complementary and the analogous colors wil be orange and fuchsia.

Complementary

Split Complementary

Analogous

Triads

Tetrads

Monochromes

Tints

Shades

Warm Grayscales

Cool Grayscales

Secondary Color

Gradients from Key toward Secondary

Gradients from Secondary toward Key

An example of white text on your key


An example of black text on your key


An example of black text shadow on your key


An example of white text shadow on your key


An example of the key color text on a color from your palette


An example of text using a color from your palette