Lumo Color
Lumo defines a set of style modules and CSS custom properties you can use to apply a consistent color palette across your application.
|
Note
|
The default color palette is not fully WCAG 2.0 AA level compliant. Follow the issue on GitHub. |
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 sufficient contrast with it.
- --lumo-base-color:
#FFF
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.
- --lumo-primary-color-10pct:
hsla(214, 90%, 52%, 0.1) - --lumo-primary-color-50pct:
hsla(214, 90%, 52%, 0.5) - --lumo-primary-color:
hsl(214, 90%, 52%) - --lumo-primary-contrast-color:
#FFF
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.
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
- --lumo-tint-5pct:
hsla(0, 0%, 100%, 0.3) - --lumo-tint-10pct:
hsla(0, 0%, 100%, 0.37) - --lumo-tint-20pct:
hsla(0, 0%, 100%, 0.44) - --lumo-tint-30pct:
hsla(0, 0%, 100%, 0.5) - --lumo-tint-40pct:
hsla(0, 0%, 100%, 0.57) - --lumo-tint-50pct:
hsla(0, 0%, 100%, 0.64) - --lumo-tint-60pct:
hsla(0, 0%, 100%, 0.7) - --lumo-tint-70pct:
hsla(0, 0%, 100%, 0.77) - --lumo-tint-80pct:
hsla(0, 0%, 100%, 0.84) - --lumo-tint-90pct:
hsla(0, 0%, 100%, 0.9) - --lumo-tint:
#FFF
Shade
- --lumo-shade-5pct:
hsla(214, 61%, 25%, 0.05) - --lumo-shade-10pct:
hsla(214, 57%, 24%, 0.1) - --lumo-shade-20pct:
hsla(214, 53%, 23%, 0.16) - --lumo-shade-30pct:
hsla(214, 50%, 22%, 0.26) - --lumo-shade-40pct:
hsla(214, 47%, 21%, 0.38) - --lumo-shade-50pct:
hsla(214, 45%, 20%, 0.5) - --lumo-shade-60pct:
hsla(214, 43%, 19%, 0.61) - --lumo-shade-70pct:
hsla(214, 42%, 18%, 0.72) - --lumo-shade-80pct:
hsla(214, 41%, 17%, 0.83) - --lumo-shade-90pct:
hsla(214, 40%, 16%, 0.94) - --lumo-shade:
hsl(214, 35%, 15%)
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.
- --lumo-contrast-5pct:
hsla(214, 61%, 25%, 0.05) - --lumo-contrast-10pct:
hsla(214, 57%, 24%, 0.1) - --lumo-contrast-20pct:
hsla(214, 53%, 23%, 0.16) - --lumo-contrast-30pct:
hsla(214, 50%, 22%, 0.26) - --lumo-contrast-40pct:
hsla(214, 47%, 21%, 0.38) - --lumo-contrast-50pct:
hsla(214, 45%, 20%, 0.5) - --lumo-contrast-60pct:
hsla(214, 43%, 19%, 0.61) - --lumo-contrast-70pct:
hsla(214, 42%, 18%, 0.72) - --lumo-contrast-80pct:
hsla(214, 41%, 17%, 0.83) - --lumo-contrast-90pct:
hsla(214, 40%, 16%, 0.94) - --lumo-contrast:
hsl(214, 35%, 15%)
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.
- --lumo-error-color-10pct:
hsla(3, 100%, 60%, 0.1) - --lumo-error-color-50pct:
hsla(3, 100%, 60%, 0.5) - --lumo-error-color:
hsl(3, 100%, 61%) - --lumo-error-contrast-color:
#FFF
Success
Usually a green color, used for success messages and buttons that complete a certain task. Accompanying text and contrast colors are also defined.
- --lumo-success-color-10pct:
hsla(145, 76%, 44%, 0.12) - --lumo-success-color-50pct:
hsla(145, 76%, 44%, 0.55) - --lumo-success-color:
hsl(145, 80%, 42%) - --lumo-success-contrast-color:
#FFF
Text
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.
|
Note
|
Accessibility
The “tertiary” and “disabled” text colors do not have enough contrast to meet WCAG 2.0 AA level requirements (4.5:1). Only use them for text which is not crucial for the end user to see.
|
- --lumo-header-text-color:
hsl(214, 35%, 15%) - --lumo-body-text-color:
hsla(214, 40%, 16%, 0.94) - --lumo-secondary-text-color:
hsla(214, 42%, 18%, 0.72) - --lumo-tertiary-text-color:
hsla(214, 45%, 20%, 0.5) - --lumo-disabled-text-color:
hsla(214, 50%, 22%, 0.26) - --lumo-primary-text-color:
hsl(214, 90%, 52%) - --lumo-error-text-color:
hsl(3, 92%, 53%) - --lumo-success-text-color:
hsl(145, 100%, 32%) - --lumo-link-color:
var(--lumo-primary-text-color)
Dark palette
The custom properties are the same, but their values are different when using the dark palette.
Show dark palette values
Base color
- --lumo-base-color:
hsl(214, 35%, 21%)
Primary
- --lumo-primary-color-10pct:
hsla(214, 90%, 63%, 0.1) - --lumo-primary-color-50pct:
hsla(214, 86%, 55%, 0.5) - --lumo-primary-color:
hsl(214, 86%, 55%) - --lumo-primary-contrast-color:
#FFF
Tint
- --lumo-tint-5pct:
hsla(214, 65%, 85%, 0.06) - --lumo-tint-10pct:
hsla(214, 60%, 80%, 0.14) - --lumo-tint-20pct:
hsla(214, 64%, 82%, 0.23) - --lumo-tint-30pct:
hsla(214, 69%, 84%, 0.32) - --lumo-tint-40pct:
hsla(214, 73%, 86%, 0.41) - --lumo-tint-50pct:
hsla(214, 78%, 88%, 0.5) - --lumo-tint-60pct:
hsla(214, 82%, 90%, 0.6) - --lumo-tint-70pct:
hsla(214, 87%, 92%, 0.7) - --lumo-tint-80pct:
hsla(214, 91%, 94%, 0.8) - --lumo-tint-90pct:
hsla(214, 96%, 96%, 0.9) - --lumo-tint:
hsl(214, 100%, 98%)
Shade
- --lumo-shade-5pct:
hsla(214, 0%, 0%, 0.07) - --lumo-shade-10pct:
hsla(214, 4%, 2%, 0.15) - --lumo-shade-20pct:
hsla(214, 8%, 4%, 0.23) - --lumo-shade-30pct:
hsla(214, 12%, 6%, 0.32) - --lumo-shade-40pct:
hsla(214, 16%, 8%, 0.41) - --lumo-shade-50pct:
hsla(214, 20%, 10%, 0.5) - --lumo-shade-60pct:
hsla(214, 24%, 12%, 0.6) - --lumo-shade-70pct:
hsla(214, 28%, 13%, 0.7) - --lumo-shade-80pct:
hsla(214, 32%, 13%, 0.8) - --lumo-shade-90pct:
hsla(214, 33%, 13%, 0.9) - --lumo-shade:
hsl(214, 33%, 13%)
Contrast
- --lumo-contrast-5pct:
hsla(214, 65%, 85%, 0.06) - --lumo-contrast-10pct:
hsla(214, 60%, 80%, 0.14) - --lumo-contrast-20pct:
hsla(214, 64%, 82%, 0.23) - --lumo-contrast-30pct:
hsla(214, 69%, 84%, 0.32) - --lumo-contrast-40pct:
hsla(214, 73%, 86%, 0.41) - --lumo-contrast-50pct:
hsla(214, 78%, 88%, 0.5) - --lumo-contrast-60pct:
hsla(214, 82%, 90%, 0.6) - --lumo-contrast-70pct:
hsla(214, 87%, 92%, 0.7) - --lumo-contrast-80pct:
hsla(214, 91%, 94%, 0.8) - --lumo-contrast-90pct:
hsla(214, 96%, 96%, 0.9) - --lumo-contrast:
hsl(214, 100%, 98%)
Error
- --lumo-error-color-10pct:
hsla(3, 90%, 63%, 0.1) - --lumo-error-color-50pct:
hsla(3, 90%, 63%, 0.5) - --lumo-error-color:
hsl(3, 90%, 63%) - --lumo-error-contrast-color:
#FFF
Success
- --lumo-success-color-10pct:
hsla(145, 65%, 42%, 0.1) - --lumo-success-color-50pct:
hsla(145, 65%, 42%, 0.5) - --lumo-success-color:
hsl(145, 65%, 42%) - --lumo-success-contrast-color:
#FFF
Text
- --lumo-header-text-color:
hsl(214, 100%, 98%) - --lumo-body-text-color:
hsla(214, 96%, 96%, 0.9) - --lumo-secondary-text-color:
hsla(214, 87%, 92%, 0.7) - --lumo-tertiary-text-color:
hsla(214, 78%, 88%, 0.5) - --lumo-disabled-text-color:
hsla(214, 69%, 84%, 0.32) - --lumo-primary-text-color:
hsl(214, 100%, 70%) - --lumo-error-text-color:
hsl(3, 100%, 67%) - --lumo-success-text-color:
hsl(145, 85%, 47%) - --lumo-link-color:
var(--lumo-primary-text-color)
Examples
Base
<span class="base">Base color</span>
<custom-style>
<style>
.base {
background-color: var(--lumo-base-color);
color: var(--lumo-secondary-text-color);
}
</style>
</custom-style>Primary
<span class="primary-10pct">10%</span>
<span class="primary-50pct">50%</span>
<span class="primary">100%</span>
<custom-style>
<style>
.primary-10pct {
background-color: var(--lumo-primary-color-10pct);
color: var(--lumo-primary-text-color);
}
.primary-50pct {
background-color: var(--lumo-primary-color-50pct);
color: var(--lumo-primary-contrast-color);
}
.primary {
background-color: var(--lumo-primary-color);
color: var(--lumo-primary-contrast-color);
}
</style>
</custom-style>Error
<span class="error-10pct">10%</span>
<span class="error-50pct">50%</span>
<span class="error">100%</span>
<custom-style>
<style>
.error-10pct {
background-color: var(--lumo-error-color-10pct);
color: var(--lumo-error-text-color);
}
.error-50pct {
background-color: var(--lumo-error-color-50pct);
color: var(--lumo-error-contrast-color);
}
.error {
background-color: var(--lumo-error-color);
color: var(--lumo-error-contrast-color);
}
</style>
</custom-style>Success
<span class="success-10pct">10%</span>
<span class="success-50pct">50%</span>
<span class="success">100%</span>
<custom-style>
<style>
.success-10pct {
background-color: var(--lumo-success-color-10pct);
color: var(--lumo-success-text-color);
}
.success-50pct {
background-color: var(--lumo-success-color-50pct);
color: var(--lumo-success-contrast-color);
}
.success {
background-color: var(--lumo-success-color);
color: var(--lumo-success-contrast-color);
}
</style>
</custom-style>Grayscale
Tint
<span class="white-5pct">5%</span>
<span class="white-10pct">10%</span>
<span class="white-20pct">20%</span>
<span class="white-30pct">30%</span>
<span class="white-40pct">40%</span>
<span class="white-50pct">50%</span>
<span class="white-60pct">60%</span>
<span class="white-70pct">70%</span>
<span class="white-80pct">80%</span>
<span class="white-90pct">90%</span>
<span class="white">100%</span>
<custom-style>
<style>
.white-5pct {
background-color: var(--lumo-tint-5pct);
}
.white-10pct {
background-color: var(--lumo-tint-10pct);
}
.white-20pct {
background-color: var(--lumo-tint-20pct);
}
.white-30pct {
background-color: var(--lumo-tint-30pct);
}
.white-40pct {
background-color: var(--lumo-tint-40pct);
}
.white-50pct {
background-color: var(--lumo-tint-50pct);
}
.white-60pct {
background-color: var(--lumo-tint-60pct);
color: var(--lumo-shade-90pct);
}
.white-70pct {
background-color: var(--lumo-tint-70pct);
color: var(--lumo-shade-90pct);
}
.white-80pct {
background-color: var(--lumo-tint-80pct);
color: var(--lumo-shade-90pct);
}
.white-90pct {
background-color: var(--lumo-tint-90pct);
color: var(--lumo-shade-90pct);
}
.white {
background-color: var(--lumo-tint);
color: var(--lumo-shade-90pct);
}
</style>
</custom-style>Shade
<span class="black-5pct">5%</span>
<span class="black-10pct">10%</span>
<span class="black-20pct">20%</span>
<span class="black-30pct">30%</span>
<span class="black-40pct">40%</span>
<span class="black-50pct">50%</span>
<span class="black-60pct">60%</span>
<span class="black-70pct">70%</span>
<span class="black-80pct">80%</span>
<span class="black-90pct">90%</span>
<span class="black">100%</span>
<custom-style>
<style>
.black-5pct {
background-color: var(--lumo-shade-5pct);
}
.black-10pct {
background-color: var(--lumo-shade-10pct);
}
.black-20pct {
background-color: var(--lumo-shade-20pct);
}
.black-30pct {
background-color: var(--lumo-shade-30pct);
}
.black-40pct {
background-color: var(--lumo-shade-40pct);
}
.black-50pct {
background-color: var(--lumo-shade-50pct);
color: var(--lumo-tint-90pct);
}
.black-60pct {
background-color: var(--lumo-shade-60pct);
color: var(--lumo-tint-90pct);
}
.black-70pct {
background-color: var(--lumo-shade-70pct);
color: var(--lumo-tint-90pct);
}
.black-80pct {
background-color: var(--lumo-shade-80pct);
color: var(--lumo-tint-90pct);
}
.black-90pct {
background-color: var(--lumo-shade-90pct);
color: var(--lumo-tint-90pct);
}
.black {
background-color: var(--lumo-shade);
color: var(--lumo-tint-90pct);
}
</style>
</custom-style>Contrast
<span class="contrast-5pct">5%</span>
<span class="contrast-10pct">10%</span>
<span class="contrast-20pct">20%</span>
<span class="contrast-30pct">30%</span>
<span class="contrast-40pct">40%</span>
<span class="contrast-50pct">50%</span>
<span class="contrast-60pct">60%</span>
<span class="contrast-70pct">70%</span>
<span class="contrast-80pct">80%</span>
<span class="contrast-90pct">90%</span>
<span class="contrast">100%</span>
<custom-style>
<style>
.contrast-5pct {
background-color: var(--lumo-contrast-5pct);
}
.contrast-10pct {
background-color: var(--lumo-contrast-10pct);
}
.contrast-20pct {
background-color: var(--lumo-contrast-20pct);
}
.contrast-30pct {
background-color: var(--lumo-contrast-30pct);
}
.contrast-40pct {
background-color: var(--lumo-contrast-40pct);
}
.contrast-50pct {
background-color: var(--lumo-contrast-50pct);
}
.contrast-60pct {
background-color: var(--lumo-contrast-60pct);
color: var(--lumo-base-color);
}
.contrast-70pct {
background-color: var(--lumo-contrast-70pct);
color: var(--lumo-base-color);
}
.contrast-80pct {
background-color: var(--lumo-contrast-80pct);
color: var(--lumo-base-color);
}
.contrast-90pct {
background-color: var(--lumo-contrast-90pct);
color: var(--lumo-base-color);
}
.contrast {
background-color: var(--lumo-contrast);
color: var(--lumo-base-color);
}
</style>
</custom-style>Text
<div>
<div class="header-text">Header text</div>
<div class="body-text">Normal text</div>
<div class="secondary-text">Secondary text</div>
<div class="tertiary-text">Tertiary text</div>
<div class="disabled-text">Disabled text</div>
<div class="primary-text">Primary text</div>
<div class="error-text">Error text</div>
<div class="success-text">Success text</div>
</div>
<custom-style>
<style>
.header-text {
color: var(--lumo-header-text-color);
}
.body-text {
color: var(--lumo-body-text-color);
}
.secondary-text {
color: var(--lumo-secondary-text-color);
}
.tertiary-text {
color: var(--lumo-tertiary-text-color);
}
.disabled-text {
color: var(--lumo-disabled-text-color);
}
.primary-text {
color: var(--lumo-primary-text-color);
}
.error-text {
color: var(--lumo-error-text-color);
}
.success-text {
color: var(--lumo-success-text-color);
}
</style>
</custom-style>7547EEEC-86E1-4DF8-BAF6-5719BAA8ECBB