Color Principles

Each color row contains 10 color gradations. These color gradations are made from a base color and are calculated according to a formula so that all related color values (e.g., all those named ‘500’) have the same brightness.

The base color must be a solid color at ‘500‘. Each color step below 500 is 10% brighter, and each color step above 500 is 10% darker. The color value at 50 is an exception and only has a difference of 5% to the color value at 100. This allows a finer gradation in the bright color range.

The brightness is determined in HSL color space. HSL stands for COLOR, SATURATION, and LIGHT. The light value determines the brightness for each color. The base color must always have a light value of 53.

Example of Lighter Color (400): hsl(100, 55, 63) – light value offset +10

Example of Base Color (500): hsl(100, 55, 53) – light value offset is 0

Example of Darker Color (600): hsl(100, 55, 43) – light value offset -10

Color contrast is important for users to distinguish various text and non-text elements. Higher contrast makes the imagery easier to see. A low-contrast image may be hard for some users to differentiate in bright or low light conditions, such as on a very sunny day or at night.

Contrast ratios represent how different one color is from another color, commonly written as 1:1 or 21:1. The greater the difference is between the two numbers in the ratio, the greater the difference in relative luminance between the colors. The contrast ratio between a color and its background ranges from 1-21 based on its luminance (the intensity of light emitted) according to the World Wide Web Consortium (W3C).

The W3C recommends the following contrast ratios for body text and image text: 3:1

Check your color contrast ratio with the tool below.

In general, the Lecturio color palette can be expanded with new colors. To add a new color, drop us an email (metro@lecturio.com)