Documentation versions (currently viewingVaadin 23)
Check out the new styling guides

Lumo defines a set of CSS Custom Properties for colors. You can use these properties to apply a consistent color palette across your application.

Note that there are built-in Lumo light and dark mode variants that can be used to quickly switch the color palette of all components in your application.

This page lists the available color properties in Lumo.


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 provide sufficient contrast with it.

DescriptionCSS Custom Property




These colors form the foundation for your application colors. The grayscale colors are useful for dividing pages into sections with different backgrounds and borders, or to be used as text colors, for example.

DescriptionCSS Custom Property

Contrast 5%
Button background. Button toolbar. Secondary section background.


Contrast 10%
Input field background


Contrast 20%
Divider border color


Contrast 30%
Disabled text


Contrast 40%


Contrast 50%
Tertiary text


Contrast 60%


Contrast 70%
Secondary text


Contrast 80%


Contrast 90%
Body text


Contrast 100%
Heading text



This is 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.

DescriptionCSS Custom Property

Primary 10%
Badge background


Primary 50%
Focus outline color


Primary 100%
Primary button background


Primary Text
Secondary & tertiary button text


Primary Contrast
Primary button text



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

DescriptionCSS Custom Property

Error 10%
Error badge background


Error 50%


Error 100%
Primary error button background


Error Text
Secondary & tertiary error button text


Error Contrast
Primary error button text



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

DescriptionCSS Custom Property

Success 10%
Success badge background


Success 50%


Success 100%
Primary success button background


Success Text
Secondary & tertiary success button text


Success Contrast
Primary success button text



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

DescriptionCSS Custom Property

Heading text


Body text Contrast above 7:1


Secondary text
Contrast above 4.5:1


Tertiary text Contrast above 3:1. Use only for non-essential text. Suitable for graphical elements such as icons.


Disabled text Use only for non-essential text/elements