Color

Use shorthand color utility classes to quickly apply or remove colors.

Icon color

Change icon colors with contextual classes.

Brand #

Brand icon colors reinforce Lumen's brand. Use primary and secondary as accents, and dark, grey, and light as neutrals.


Semantic #

Use semantic text colors to communicate meaning to users. Examples include displaying alerts, form field validation, user status, application state and more. Use green (success) for positive, blue (info) for informative, red (danger) for negative, yellow (warning) for needs attention, and grey (muted) for neutral. Semantic colors should never be used for decorative purposes.


Brand complimentary #

More icon colors that can be used to compliment the primary brand palette.


Background-color

Define background-color classes using the format -bg-{breakpoint}--{value}. Breakpoints supported are sm, md, lg, and xl.

Brand

More background-colors that can be used to compliment the primary brand palette.

Color ClassValueResult
-bg--primarybackground-color: #0075C9
-bg--secondarybackground-color: #38C6F4
-bg--blackbackground-color: #000000
-bg--whitebackground-color: #FFFFFF

Brand complimentary

More background-colors that can be used to compliment the primary brand palette.

ClassValueResult
-bg--navybackground-color: #083176
-bg--greybackground-color: #3F4145

Neutral

Neutral background-colors provide low-contrast backgrounds for application containers, cards, and more.

Color ClassValueResult
-bg--grey-20background-color: #EDF0F2
-bg--grey-15background-color: #F4F5F6
-bg--grey-25background-color: #DADEE2
-bg--grey-30background-color: #D0D4D9

Semantic

Use semantic background-colors to communicate meaning to users. Examples include displaying alerts, form field validation, user status, application state and more. Use green (success) for positive, blue (info) for informative, red (danger) for negative, yellow (warning) for needs attention, and grey (muted) for neutral. Semantic colors should never be used for decorative purposes.

Color ClassValueResult
-bg--successbackground-color: #007E44
-bg--success-lightbackground-color: #DBFAEE
-bg--success-lighterbackground-color: #F1FEF8
-bg--infobackground-color: #0075C9
-bg--info-lightbackground-color: #F5F9FC
-bg--info-lighterbackground-color: #E0F3FF
-bg--warningbackground-color: #A15C00
-bg--warning-lightbackground-color: #FAECD9
-bg--warning-lighterbackground-color: #FFF8ED
-bg--dangerbackground-color: #D62015
-bg--danger-lightbackground-color: #FFE8E5
-bg--danger-lighterbackground-color: #FFF5F5
-bg--mutedbackground-color: #53565A
-bg--muted-lightbackground-color: #EDF0F2
-bg--muted-lighterbackground-color: #F8F9F9

None

Use to render an element with no background-color.

Color ClassValueResult
-bg---bg--nonebackground-color: none

Target specific breakpoints

To target a specific breakpoint, add the breakpoint abbreviation to the class.

ClassValue
-bg--sm--none
Visible only from sm
-bg--sm--primary
Visible only from sm
-bg--sm--secondary
Visible only from sm
-bg--sm--white
Visible only from sm
-bg--sm--black
Visible only from sm
-bg--sm--muted
Visible only from sm
-bg--sm--grey
Visible only from sm
-bg--sm--grey-20
Visible only from sm
-bg--sm--grey-30
Visible only from sm
-bg--sm--success
Visible only from sm
-bg--sm--info
Visible only from sm
-bg--sm--warning
Visible only from sm
-bg--sm--danger
Visible only from sm
-bg--md--none
Visible only from md
-bg--md--primary
Visible only from md
-bg--md--secondary
Visible only from md
-bg--md--white
Visible only from md
-bg--md--black
Visible only from md
-bg--md--muted
Visible only from md
-bg--md--grey
Visible only from md
-bg--md--grey-20
Visible only from md
-bg--md--grey-30
Visible only from md
-bg--md--success
Visible only from md
-bg--md--info
Visible only from md
-bg--md--warning
Visible only from md
-bg--md--danger
Visible only from md
-bg--lg--none
Visible only from lg
-bg--lg--primary
Visible only from lg
-bg--lg--secondary
Visible only from lg
-bg--lg--white
Visible only from lg
-bg--lg--black
Visible only from lg
-bg--lg--muted
Visible only from lg
-bg--lg--grey
Visible only from lg
-bg--lg--grey-20
Visible only from lg
-bg--lg--grey-30
Visible only from lg
-bg--lg--success
Visible only from lg
-bg--lg--info
Visible only from lg
-bg--lg--warning
Visible only from lg
-bg--lg--danger
Visible only from lg
-bg--xl--none
Visible only from xl
-bg--xl--primary
Visible only from xl
-bg--xl--secondary
Visible only from xl
-bg--xl--white
Visible only from xl
-bg--xl--black
Visible only from xl
-bg--xl--muted
Visible only from xl
-bg--xl--grey
Visible only from xl
-bg--xl--grey-20
Visible only from xl
-bg--xl--grey-30
Visible only from xl
-bg--xl--success
Visible only from xl
-bg--xl--info
Visible only from xl
-bg--xl--warning
Visible only from xl
-bg--xl--danger
Visible only from xl

Responsive background-color examples #

-bg--primary
-bg-sm--secondary
-bg-md--warning
-bg-lg--danger
-bg-xl--black
-bg--none