Css Color palette with Sass

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 Colors

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

primary with saturation at 40% & lightness at 40%

primary100 with saturation at 20% & lightness at 95%

primary300 with saturation at 20% & lightness at 70%

primary500 with saturation at 20% & lightness at 50%

primary700 with saturation at 20% & lightness at 30%

primary900 with saturation at 20% & lightness at 10%

Complement Colors

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 with saturation at 40% & lightness at 40%

secondary100 with saturation at 20% & lightness at 95%

secondary300 with saturation at 20% & lightness at 70%

secondary500 with saturation at 20% & lightness at 50%

secondary700 with saturation at 20% & lightness at 30%

secondary900 with saturation at 20% & lightness at 10%

Analogous Colors

The analogous 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.

rightAnalogous with saturation at 40% & lightness at 40%

rightAnalogous100 with saturation at 40% & lightness at 90%

leftAnalogous with saturation at 40% & lightness at 40%

leftAnalogous100 with saturation at 40% & lightness at 90%

Grey Colors

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.

grey100 with saturation at 5% & lightness at 95%

grey300 with saturation at 5% & lightness at 70%

grey500 with saturation at 5% & lightness at 50%

grey700 with saturation at 5% & lightness at 30%

grey900 with saturation at 5% & lightness at 10%

Kitchen Sink

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

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.