Skip to docs navigation

Colors

  • #037C4D
    rgba(3,124,77,1.0)
    $green
    $primary
  • #EFA900
    rgba(239,169,0,1.0)
    $yellow
    $secondary
    $warning
  • #2ED477
    rgba(46,212,119,1.0)
    $lime
    $success
  • #D85951
    rgba(216,89,81,1.0)
    $red
    $danger
  • #4B99FF
    rgba(75,153,255,1.0)
    $blue
    $info
  • #F9F9F9
    rgba(249,249,249,1.0)
    $light
    $nw-white
  • #878AA3
    rgba(135,138,163,1.0)
    $gray
  • #353745
    rgba(53,55,69,1.0)
    $dark
    $nw-black
Dealing with specificity

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Color shading

Shade base colors using the following variables. Corresponding variables are noted where applicable.

$green-100
$yellow-100
$lime-100
$red-100
$gray-100
$nw-white
$light
$green-200
$yellow-200
$lime-200
$red-200
$gray-200
$green-300
$yellow-300
$lime-300
$red-300
$gray-300
$green-400
$yellow-400
$lime-400
$red-400
$gray-400
$green-500
$green
$primary
$yellow-500
$yellow
$secondary
$warning
$lime-500
$lime
$success
$red-500
$red
$danger
$gray-500
$gray
$green-6600
$yellow-6600
$lime-6600
$red-6600
$gray-6600
$green-700
$yellow-700
$lime-700
$red-700
$gray-700
$green-800
$yellow-800
$lime-800
$red-800
$gray-800
$green-900
$yellow-900
$lime-900
$red-900
$gray-900

Background color

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-gray
.bg-white
.bg-transparent

Background gradient

Do you need a gradient in your custom CSS? Just add background-image: var(--bs-gradient);.

.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient

NWB Gradient Primary

(We’ll make a better name once we see how many of these we make)

Background Overlap

Colorize Text

Note: If you want to colorize links, use the [.link-* helper classes]

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-darker

.text-black

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

primary link secondary link success link danger link warning link info link light link dark link
Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.