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

HTML

  1. <span class="base">Base color</span>
  3. <custom-style>
  4.   <style>
  5.     .base {
  6.       background-color: var(--lumo-base-color);
  7.       color: var(--lumo-secondary-text-color);
  8.     }
  9.   </style>
  10. </custom-style>

Primary

HTML

  1. <span class="primary-10pct">10%</span>
  2. <span class="primary-50pct">50%</span>
  3. <span class="primary">100%</span>
  5. <custom-style>
  6.   <style>
  7.     .primary-10pct {
  8.       background-color: var(--lumo-primary-color-10pct);
  9.       color: var(--lumo-primary-text-color);
  10.     }
  11.     .primary-50pct {
  12.       background-color: var(--lumo-primary-color-50pct);
  13.       color: var(--lumo-primary-contrast-color);
  14.     }
  15.     .primary {
  16.       background-color: var(--lumo-primary-color);
  17.       color: var(--lumo-primary-contrast-color);
  18.     }
  19.   </style>
  20. </custom-style>

Error

HTML

  1. <span class="error-10pct">10%</span>
  2. <span class="error-50pct">50%</span>
  3. <span class="error">100%</span>
  5. <custom-style>
  6.   <style>
  7.     .error-10pct {
  8.       background-color: var(--lumo-error-color-10pct);
  9.       color: var(--lumo-error-text-color);
  10.     }
  11.     .error-50pct {
  12.       background-color: var(--lumo-error-color-50pct);
  13.       color: var(--lumo-error-contrast-color);
  14.     }
  15.     .error {
  16.       background-color: var(--lumo-error-color);
  17.       color: var(--lumo-error-contrast-color);
  18.     }
  19.   </style>
  20. </custom-style>

Success

HTML

  1. <span class="success-10pct">10%</span>
  2. <span class="success-50pct">50%</span>
  3. <span class="success">100%</span>
  5. <custom-style>
  6.   <style>
  7.     .success-10pct {
  8.       background-color: var(--lumo-success-color-10pct);
  9.       color: var(--lumo-success-text-color);
  10.     }
  11.     .success-50pct {
  12.       background-color: var(--lumo-success-color-50pct);
  13.       color: var(--lumo-success-contrast-color);
  14.     }
  15.     .success {
  16.       background-color: var(--lumo-success-color);
  17.       color: var(--lumo-success-contrast-color);
  18.     }
  19.   </style>
  20. </custom-style>

Grayscale

Tint

HTML

  1. <span class="white-5pct">5%</span>
  2. <span class="white-10pct">10%</span>
  3. <span class="white-20pct">20%</span>
  4. <span class="white-30pct">30%</span>
  5. <span class="white-40pct">40%</span>
  6. <span class="white-50pct">50%</span>
  7. <span class="white-60pct">60%</span>
  8. <span class="white-70pct">70%</span>
  9. <span class="white-80pct">80%</span>
  10. <span class="white-90pct">90%</span>
  11. <span class="white">100%</span>
  13. <custom-style>
  14.   <style>
  15.     .white-5pct {
  16.       background-color: var(--lumo-tint-5pct);
  17.     }
  18.     .white-10pct {
  19.       background-color: var(--lumo-tint-10pct);
  20.     }
  21.     .white-20pct {
  22.       background-color: var(--lumo-tint-20pct);
  23.     }
  24.     .white-30pct {
  25.       background-color: var(--lumo-tint-30pct);
  26.     }
  27.     .white-40pct {
  28.       background-color: var(--lumo-tint-40pct);
  29.     }
  30.     .white-50pct {
  31.       background-color: var(--lumo-tint-50pct);
  32.     }
  33.     .white-60pct {
  34.       background-color: var(--lumo-tint-60pct);
  35.       color: var(--lumo-shade-90pct);
  36.     }
  37.     .white-70pct {
  38.       background-color: var(--lumo-tint-70pct);
  39.       color: var(--lumo-shade-90pct);
  40.     }
  41.     .white-80pct {
  42.       background-color: var(--lumo-tint-80pct);
  43.       color: var(--lumo-shade-90pct);
  44.     }
  45.     .white-90pct {
  46.       background-color: var(--lumo-tint-90pct);
  47.       color: var(--lumo-shade-90pct);
  48.     }
  49.     .white {
  50.       background-color: var(--lumo-tint);
  51.       color: var(--lumo-shade-90pct);
  52.     }
  53.   </style>
  54. </custom-style>

Shade

HTML

  1. <span class="black-5pct">5%</span>
  2. <span class="black-10pct">10%</span>
  3. <span class="black-20pct">20%</span>
  4. <span class="black-30pct">30%</span>
  5. <span class="black-40pct">40%</span>
  6. <span class="black-50pct">50%</span>
  7. <span class="black-60pct">60%</span>
  8. <span class="black-70pct">70%</span>
  9. <span class="black-80pct">80%</span>
  10. <span class="black-90pct">90%</span>
  11. <span class="black">100%</span>
  13. <custom-style>
  14.   <style>
  15.     .black-5pct {
  16.       background-color: var(--lumo-shade-5pct);
  17.     }
  18.     .black-10pct {
  19.       background-color: var(--lumo-shade-10pct);
  20.     }
  21.     .black-20pct {
  22.       background-color: var(--lumo-shade-20pct);
  23.     }
  24.     .black-30pct {
  25.       background-color: var(--lumo-shade-30pct);
  26.     }
  27.     .black-40pct {
  28.       background-color: var(--lumo-shade-40pct);
  29.     }
  30.     .black-50pct {
  31.       background-color: var(--lumo-shade-50pct);
  32.       color: var(--lumo-tint-90pct);
  33.     }
  34.     .black-60pct {
  35.       background-color: var(--lumo-shade-60pct);
  36.       color: var(--lumo-tint-90pct);
  37.     }
  38.     .black-70pct {
  39.       background-color: var(--lumo-shade-70pct);
  40.       color: var(--lumo-tint-90pct);
  41.     }
  42.     .black-80pct {
  43.       background-color: var(--lumo-shade-80pct);
  44.       color: var(--lumo-tint-90pct);
  45.     }
  46.     .black-90pct {
  47.       background-color: var(--lumo-shade-90pct);
  48.       color: var(--lumo-tint-90pct);
  49.     }
  50.     .black {
  51.       background-color: var(--lumo-shade);
  52.       color: var(--lumo-tint-90pct);
  53.     }
  54.   </style>
  55. </custom-style>

Contrast

HTML

  1. <span class="contrast-5pct">5%</span>
  2. <span class="contrast-10pct">10%</span>
  3. <span class="contrast-20pct">20%</span>
  4. <span class="contrast-30pct">30%</span>
  5. <span class="contrast-40pct">40%</span>
  6. <span class="contrast-50pct">50%</span>
  7. <span class="contrast-60pct">60%</span>
  8. <span class="contrast-70pct">70%</span>
  9. <span class="contrast-80pct">80%</span>
  10. <span class="contrast-90pct">90%</span>
  11. <span class="contrast">100%</span>
  13. <custom-style>
  14.   <style>
  15.     .contrast-5pct {
  16.       background-color: var(--lumo-contrast-5pct);
  17.     }
  18.     .contrast-10pct {
  19.       background-color: var(--lumo-contrast-10pct);
  20.     }
  21.     .contrast-20pct {
  22.       background-color: var(--lumo-contrast-20pct);
  23.     }
  24.     .contrast-30pct {
  25.       background-color: var(--lumo-contrast-30pct);
  26.     }
  27.     .contrast-40pct {
  28.       background-color: var(--lumo-contrast-40pct);
  29.     }
  30.     .contrast-50pct {
  31.       background-color: var(--lumo-contrast-50pct);
  32.     }
  33.     .contrast-60pct {
  34.       background-color: var(--lumo-contrast-60pct);
  35.       color: var(--lumo-base-color);
  36.     }
  37.     .contrast-70pct {
  38.       background-color: var(--lumo-contrast-70pct);
  39.       color: var(--lumo-base-color);
  40.     }
  41.     .contrast-80pct {
  42.       background-color: var(--lumo-contrast-80pct);
  43.       color: var(--lumo-base-color);
  44.     }
  45.     .contrast-90pct {
  46.       background-color: var(--lumo-contrast-90pct);
  47.       color: var(--lumo-base-color);
  48.     }
  49.     .contrast {
  50.       background-color: var(--lumo-contrast);
  51.       color: var(--lumo-base-color);
  52.     }
  53.   </style>
  54. </custom-style>

Text

HTML

  1. <div>
  2.   <div class="header-text">Header text</div>
  3.   <div class="body-text">Normal text</div>
  4.   <div class="secondary-text">Secondary text</div>
  5.   <div class="tertiary-text">Tertiary text</div>
  6.   <div class="disabled-text">Disabled text</div>
  7.   <div class="primary-text">Primary text</div>
  8.   <div class="error-text">Error text</div>
  9.   <div class="success-text">Success text</div>
  10. </div>
  12. <custom-style>
  13.   <style>
  14.     .header-text {
  15.       color: var(--lumo-header-text-color);
  16.     }
  17.     .body-text {
  18.       color: var(--lumo-body-text-color);
  19.     }
  20.     .secondary-text {
  21.       color: var(--lumo-secondary-text-color);
  22.     }
  23.     .tertiary-text {
  24.       color: var(--lumo-tertiary-text-color);
  25.     }
  26.     .disabled-text {
  27.       color: var(--lumo-disabled-text-color);
  28.     }
  29.     .primary-text {
  30.       color: var(--lumo-primary-text-color);
  31.     }
  32.     .error-text {
  33.       color: var(--lumo-error-text-color);
  34.     }
  35.     .success-text {
  36.       color: var(--lumo-success-text-color);
  37.     }
  38.   </style>
  39. </custom-style>