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.
The default color palette is WCAG 2.0 AA level compliant unless otherwise noted.
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.
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.
This example doesn’t work in Internet Explorer 11 or EdgeHTML 14. Read the browser compatibility instructions if you need to support those browsers.
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.
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.
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.
Usually a green color, used for success messages and buttons that complete a certain task. Accompanying text and contrast colors are also defined.
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.
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.
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.
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.
The following text colors have the desired contrast with the Base color.
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.
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.
var(--lumo-primary-text-color)You will see the light palette colors here on Internet Explorer 11 and Edge 14. See Browser compatibility for more info.
var(--lumo-primary-text-color)