Colors

Available since 1.0.0 Last updated 1.4.2

Colors bring designs to life. It is used in a meaningful way to express emotions and tone, and promotes a distinct and consistent look and feel throughout all application.

Each color is available to developers with a SASS mixin, CSS variables and as a series of CSS helpers.

Action

The brand color used prominently in the application for interactive elements like buttons and links. An inverse value is included when the action color is used as a background.

  • 1 hsl(210, 91%, 43%)
    #0A6ED1
    var(--fd-color-action-1)
  • 2 hsl(210, 0%, 100%)
    #FFFFFF
    var(--fd-color-action-2)
  • 3 hsl(210, 90%, 33%)
    #0854A1
    var(--fd-color-action-3)

Shell

Special colors used for the application shellbar background and icons.

  • 1 hsl(210, 28%, 29%)
    #354A5F
    var(--fd-color-shell-1)
  • 2 hsl(210, 100%, 91%)
    #D1E8FF
    var(--fd-color-shell-2)

Text

Several shades of text, as well as an inverse color, are included for varying degrees of emphasis.

  • 1 hsl(210, 7.5%, 21%)
    #32363A
    var(--fd-color-text-1)
  • 2 hsl(210, 5%, 33.5%)
    #515559
    var(--fd-color-text-2)
  • 3 hsl(210, 3%, 42.7%)
    #6A6d70
    var(--fd-color-text-3)
  • 4 hsl(210, 2.5%, 46.5%)
    #74777A
    var(--fd-color-text-4)
  • 5 hsl(210, 0%, 100%)
    #FFFFFF
    var(--fd-color-text-5)

Backgrounds

  • 1 hsl(210, 9%, 93.7%)
    #EDEFF0
    var(--fd-color-background-1)
  • 2 hsl(210, 0%, 100%)
    #FFFFFF
    var(--fd-color-background-2)
  • 3 hsl(145, 75%, 96.7%)
    #F1FDF6
    var(--fd-color-background-3)
  • 4 hsl(28, 86.7%, 97.1%)
    #FEF7F1
    var(--fd-color-background-4)
  • 5 hsl(0, 100%, 96.1%)
    #FFEBEB
    var(--fd-color-background-5)
  • 6 hsl(0, 100%, 94.7%)
    #FFE4E4
    var(--fd-color-background-6)

Neutral

  • 1 hsl(210, 3%, 98%)
    #FAFAFA
    var(--fd-color-neutral-1)
  • 2 hsl(210, 3%, 93.5%)
    #EEEEEF
    var(--fd-color-neutral-2)
  • 3 hsl(0, 0%, 85%)
    #D9D9D9
    var(--fd-color-neutral-3)
  • 4 hsl(212, 8%, 57%)
    #89919A
    var(--fd-color-neutral-4)

Status

  • 1 hsl(147, 85.3%, 26.7%)
    #107E3E
    var(--fd-color-status-1)
  • 2 hsl(28, 90.2%, 48%)
    #E9730C
    var(--fd-color-status-2)
  • 3 hsl(0, 100%, 36.7%)
    #BB0000
    var(--fd-color-status-3)
  • 4 hsl(210, 2.8%, 42.7%)
    #6A6D70
    var(--fd-color-status-4)
  • 5 hsl(210, 90.9%, 42.9%)
    #0A6ED1
    var(--fd-color-status-5)

Accent

These colors are optimized for two different uses. The first ten colors meet a contrast standard of 3:1 and are best used for differentiating between similar items, e.g., in a calendar, legend, or pills. The last four colors meet a contrast standard or 4.6:1 and best used when text is important, e.g., identifiers and avatars.

  • 1 hsl(34, 82%, 49%)
    #E38B16
    var(--fd-color-accent-1)
  • 2 hsl(0, 80%, 67%)
    #DC7474
    var(--fd-color-accent-2)
  • 3 hsl(332, 75%, 49%)
    #DB1F77
    var(--fd-color-accent-3)
  • 4 hsl(315, 54%, 49%)
    #C0399F
    var(--fd-color-accent-4)
  • 5 hsl(238, 65%, 63%)
    #6367DE
    var(--fd-color-accent-5)
  • 6 hsl(210, 64%, 60%)
    #5899DA
    var(--fd-color-accent-6)
  • 7 hsl(186, 81%, 39%)
    #13A4B4
    var(--fd-color-accent-7)
  • 8 hsl(75, 86%, 34%)
    #7CA10C
    var(--fd-color-accent-8)
  • 9 hsl(269, 54%, 58%)
    #955ECF
    var(--fd-color-accent-9)
  • 10 hsl(205, 15%, 58%)
    #8497a4
    var(--fd-color-accent-10)
  • 11 hsl(34, 82%, 45%)
    #D17F15
    var(--fd-color-accent-11)
  • 12 hsl(0, 60%, 54%)
    #D04343
    var(--fd-color-accent-12)
  • 13 hsl(210, 64.2%, 47.1%)
    #2B78C5
    var(--fd-color-accent-13)
  • 14 hsl(238, 65.1%, 62.9%)
    #0F828F
    var(--fd-color-accent-14)
  • 15 hsl(272.2, 60%, 55.9%)
    #647887
    var(--fd-color-accent-15)

State Action

  • hover hsla(210, 91%, 36%, 1)
    #085CAF
    var(--fd-color-action-hover)
  • selected hsla(210, 98%, 33%, 1)
    #0254A7
    var(--fd-color-action-selected)
  • disabled hsla(210, 91%, 43%, 0.4)
    #0a6ed1
    var(--fd-color-action-disabled)

State Background

  • hover hsla(210, 3%, 98%, 1)
    #FAFAFA
    var(--fd-color-background-hover)
  • selected hsla(210, 91%, 43%, 0.07)
    #0A6ED1
    var(--fd-color-background-selected)
  • selected-hover hsla(210, 91%, 43%, 0.1)
    #0A6ED1
    var(--fd-color-background-selected-hover)