Color Palettes

A neutral palette along with a full color palette offer a wide array of color options for your project. By default, purple @purple is used across the Canvas UI kit as the primary color. You can see this carry across forms, buttons, and other components.

Neutral Palette

Black

@black

White

@white

Dark Grey

@grey-dark

Light Grey

@grey-light

Color Palette

Purple

@purple

Blue

@blue

Red

@red

Orange

@orange

Yellow

@yellow

Green

@green

Pink

@pink

Cyan

@cyan

Color Blending

If you are using LESS for your project, a function has been made available to allow you to easily blend white and black with a single color. This is useful in going lighter or darker with a specific color, while remaining in the same color spectrum. For example, you may want a purple button to become a slightly darker purple on mouse over.

// Lighten Purple by 50%
color: tint(@purple, 50%);

// Darken Purple by 50%
color: shade(@purple, 50%);