Lumo Source code

Colors

Lumo defines a set of style modules and CSS custom properties you can use to apply a consistent color palette across your application.

Import color.html to use them.

Accessibility

The default color palette is WCAG 2.0 AA level compliant unless otherwise noted.

Style module

Include the color style module to easily apply basic colors for any style scope (e.g. index.html for global scope). It will set the background, text and link colors and enable you to use the dark palette colors inside that style scope.

Dark palette

The dark color palette is available when you include the main style module.

You can apply the theme="dark" attribute on any element inside the style scope where you include the main style module.

If you include the main style module in the global scope (i.e. index.html), you can apply the theme="dark" attribute on the html element directly, to make the whole page adopt the dark color palette.

Browser compatibility

This example doesn’t work in Internet Explorer 11 or EdgeHTML 14. Read the browser compatibility instructions if you need to support those browsers.

Base

The base color is used as the main background color for the system. The grayscale colors are designed to be used on top of it, and the text colors are designed to have proper contrast with it.

Primary

The most prominent color in the system. It is used to bring attention to certain elements in the interface. Accompanying text and contrast colors are also defined.

Error

Usually a red color, used for error indicators, error messages and buttons that can cause permanent data loss. Accompanying text and contrast colors are also defined.

Success

Usually a green color, used for success messages and buttons that complete a certain task. Accompanying text and contrast colors are also defined.

Accessibility

The --lumo-success-color does not have enough contrast by default to meet WCAG 2.0 AA level requirements (3:1). Use hsl(144, 82%, 38%) for compliant contrast.

The --lumo-success-text-color is compliant by default.

Grayscale

These colors form the foundation for your application colors. The grayscale colors consist of 11 different shades of “black” and “white”, each with a degree of transparency.

The tint and shade colors not always pure grayscale by default, but tinted slightly with the primary color.

The grayscale colors are useful for dividing pages into sections with different backgrounds and borders, or used as text colors, for example.

Accessibility

The default text colors are tested to have enough contrast on top of the Base color and “Base + 5–20% Contrast color”. Avoid using a a higher Contrast color as a background color for any important content.

Tint

Shade

Contrast

The contrast colors work automatically for both light and dark variations. For the light palette the shade colors are used, and for the dark palette the tint colors are used.

Text

The following text colors have the desired contrast with the Base color.

Separate text colors

Note, that --lumo-primary-text-color is not necessarily the same as --lumo-primary-color. Use the main color for backgrounds and the “text” version for text.

The same applies for the “error” and “success” colors as well.

Accessibility

The “tertiary” and “disabled” text colors do not have enough contrast by default to meet WCAG 2.0 AA level requirements (3:1). Only use them for text which is not crucial for the end user to see.


Custom properties

Light palette

Base color
--lumo-base-color
Primary
--lumo-primary-color-10pct
--lumo-primary-color-50pct
--lumo-primary-color
--lumo-primary-contrast-color
Tint
--lumo-tint-5pct
--lumo-tint-20pct
--lumo-tint-30pct
--lumo-tint-40pct
--lumo-tint-50pct
--lumo-tint-60pct
--lumo-tint-70pct
--lumo-tint-80pct
--lumo-tint-90pct
--lumo-tint
Shade
--lumo-shade-5pct
--lumo-shade-20pct
--lumo-shade-30pct
--lumo-shade-40pct
--lumo-shade-50pct
--lumo-shade-60pct
--lumo-shade-70pct
--lumo-shade-80pct
--lumo-shade-90pct
--lumo-shade
Contrast
--lumo-contrast-5pct
--lumo-contrast-20pct
--lumo-contrast-30pct
--lumo-contrast-40pct
--lumo-contrast-50pct
--lumo-contrast-60pct
--lumo-contrast-70pct
--lumo-contrast-80pct
--lumo-contrast-90pct
--lumo-contrast
Error
--lumo-error-color-10pct
--lumo-error-color-50pct
--lumo-error-color
--lumo-error-contrast-color
Success
--lumo-success-color-10pct
--lumo-success-color-50pct
--lumo-success-color
--lumo-success-contrast-color
Text
--lumo-header-text-color
--lumo-body-text-color
--lumo-secondary-text-color
--lumo-tertiary-text-color
--lumo-disabled-text-color
--lumo-primary-text-color
--lumo-error-text-color
--lumo-success-text-color
--lumo-link-color: var(--lumo-primary-text-color)

Dark palette

You will see the light palette colors here on Internet Explorer 11 and Edge 14. See Browser compatibility for more info.

Base color
--lumo-base-color
Primary
--lumo-primary-color-10pct
--lumo-primary-color-50pct
--lumo-primary-color
--lumo-primary-contrast-color
Tint
--lumo-tint-5pct
--lumo-tint-10pct
--lumo-tint-20pct
--lumo-tint-30pct
--lumo-tint-40pct
--lumo-tint-50pct
--lumo-tint-60pct
--lumo-tint-70pct
--lumo-tint-80pct
--lumo-tint-90pct
--lumo-tint
Shade
--lumo-shade-5pct
--lumo-shade-10pct
--lumo-shade-20pct
--lumo-shade-30pct
--lumo-shade-40pct
--lumo-shade-50pct
--lumo-shade-60pct
--lumo-shade-70pct
--lumo-shade-80pct
--lumo-shade-90pct
--lumo-shade
Contrast
--lumo-contrast-5pct
--lumo-contrast-10pct
--lumo-contrast-20pct
--lumo-contrast-30pct
--lumo-contrast-40pct
--lumo-contrast-50pct
--lumo-contrast-60pct
--lumo-contrast-70pct
--lumo-contrast-80pct
--lumo-contrast-90pct
--lumo-contrast
Error
--lumo-error-color-10pct
--lumo-error-color-50pct
--lumo-error-color
--lumo-error-contrast-color
Success
--lumo-success-color-10pct
--lumo-success-color-50pct
--lumo-success-color
--lumo-success-contrast-color
Text
--lumo-header-text-color
--lumo-body-text-color
--lumo-secondary-text-color
--lumo-tertiary-text-color
--lumo-disabled-text-color
--lumo-primary-text-color
--lumo-error-text-color
--lumo-success-text-color
--lumo-link-color: var(--lumo-primary-text-color)