Creating color palettes with CSS Sass variables

CSS (Sass) Color palette

Colors on this page are distributed using the 60/30/10 ratio and divided into three categories: primary, secondary, and accent. To provide variety, these categories are further used to generate different tints and shades.

Primary Color

The body background of this page takes the primary color which covers nearly the 60% of the total UI.

primary

primaryDark500

primaryDark600

Secondary Color

A sample paragraph demonstrating the default body text color. Anything that doesn't carry or inherit any text color style will be shown in this color by default.

secondary

secondaryLight500

secondaryLight900

secondaryDark500

Accent Color

The accent color constitutes about 10% of small but vital details of a UI based on the 60/30/10 rule. Hyperlinks are the most common example where accent is used.

accentV1

accentV1Light900

accentV2

accentV2Light900

Kitchen Sink

Our sweet and simple, regular paragraph element that adopts the secondary color by default.

A text fragment with a lighter tone of the secondary color. It is generated by using the same hue as the secondary color but adjusting saturation and lightness.

A highlighted box-like element that uses variations of the primary color as its background and border.

Another box element themed using variations of the secondary color.

CTA example
Pure color

This is the base hue for the primary color

pure color