Juan R Labrada

Harmonic Colors Palette

hue:
hueComplement: 300
hueRightAnalogous: 230
hueLeftAnalogous: 170
primary: #eff3f5

primaryDark500: #d1dbe0

primaryDark600: #b3c3cc

secondary: #3d4143

secondaryLight500: #504950

secondaryLight900: #f3f2f3

secondaryDark500: #363036

accentV1: #3d4b8f

accentV1Light900: #edeff7

accentV2: #3d8f81

accentV2Light900: #dbf0ec

Palette Demo

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
© 2023 production