Home

Building color palette

Article describing the process of building a color palette for a website.

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.

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.

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.

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