Color on GitHub

Color

Color Palette

The Daylight color palette is designed to combine a white backdrop with muted grays, and small yet bold instances of color. This sets the foundation for the open, friendly, and easy to use tone of the interface.

Basic Grays

These grays are used to organize the pure white Daylight page into an information hierarchy. Icons and body text use Ferrite as the default gray.

Regolith #f9fafb
Sylvite #f2f3f5
Gypsum #e6eaf0
Mica #d3d9e3
Corundum #b9c2d0
Galena #7c8695
Tungsten #72777a
Ferrite #565a5c

Primary Accent

Daylight uses two bold primary accent colors to call attention to important foundational page elements.

Actions

Celestine #006FBF
Used to give an accent colour to actions on the page. Includes primary buttons, links, etc.

Indicators

Carnelian #E87511
Used for badges and attention-grabbing indicators. Includes minibar alerts, update counts, etc.

Feedback Colors

Four colors from the palette are used as “feedback” colors. These are to call attention to areas where the system is providing feedback to the user, as a result of direct action or asynchronous events. These include popup alerts, toasts, notifications, progress bars, completion checkmarks, etc.

Errors

Cinnabar #CD2026

Warnings

Citrine #FFBA59

Success

Olivine #46A661

Call to Action

Celestine +1 #29A6FF

Full Palette

These are all the colors in the Daylight palette. These can be used for illustration, content tiles, or course colors. Each color has a primary tone (viewed below as the slightly “taller” swatch), supplemented three additional tints and shades.

Zircon

Zircon +2 #BBF1FA
Zircon +1 #00BDDD
Zircon #00849C
Zircon -1 #005B6B

Celestine

Celestine +2 #E8F2F9
Celestine +1 #29A6FF
Celestine #006FBF
Celestine -1 #005694

Amethyst

Amethyst +2 #E9E6FF
Amethyst +1 #AFA1FF
Amethyst #7862F0
Amethyst -1 #4C3F99

Fluorite

Fluorite +2 #F6E1FA
Fluorite +1 #EA82FF
Fluorite #B24AC7
Fluorite -1 #7E358C

Tourmaline

Tourmaline +2 #FAE1ED
Tourmaline +1 #FF389B
Tourmaline #BF2A75
Tourmaline -1 #96215C

Cinnabar

Cinnabar +2 #FAE1E2
Cinnabar +1 #FF6B70
Cinnabar #CD2026
Cinnabar -1 #A1191D

Carnelian

Carnelian +1 #FAE3CF
Carnelian #E87511
Carnelian -1 #A6540D
Carnelian -2 #804008

Citrine

Citrine +1 #FAE5C8
Citrine #FFBA59
Citrine -1 #A87B3B
Citrine -2 #694B25

Topaz

Topaz +1 #FFFBB2
Topaz #F5EC5A
Topaz -1 #A69F21
Topaz -2 #635F15

Peridot

Peridot +1 #CDF2B1
Peridot #8CCD5A
Peridot -1 #59823A
Peridot -2 #3D5926

Olivine

Olivine +1 #A5FABD
Olivine #46A661
Olivine -1 #327846
Olivine -2 #275C36

Malachite

Malachite +1 #A1F7F4
Malachite #00AFAA
Malachite -1 #017D79
Malachite -2 #005E5B

Accessibility

Color Contrast

When choosing colors for your application, always ensure that there is sufficient contrast between the foreground and background colors. To meet WCAG 2.0 Level AA, text should have a contrast ratio of at least 4.5:1 with its background. Larger text should have a ratio of 3:1.

WCAG 2.0 Level AA
SC 1.4.3: Understanding Minimum Color Contrast

For help with checking contrast, use a color contrast analyzer tool or plugin to Chrome or Firefox.

Use of Color

Color should also never be used on its own to convey meaning or information.

WCAG 2.0 Level A
WC 1.4.1: Understanding Use of Color

Developing with Colors

Installation

To use this component in your application, you can install it using Bower:

bower install d2l-colors

Polymer Web Component Variables

Each of the colors in the Brightspace UI palette are exposed as Polymer variables.

To use them, import d2l-colors.html and use a custom-style block:

Example (html)
<head>
  <link
    rel="import"
    href="bower_components/d2l-colors/d2l-colors.html">
  <custom-style>
    div {
      background-color: var(--d2l-color-cinnabar);
    }
  </custom-style>
</head>
Note

Inside web components, the custom-style block can be omitted.

Each color’s variable name will be in the form: --d2l-color-<name>. The complete list of variable names can be found in the source code.

Additional documentation about Polymer Shared Style Modules

Sass Variables

Alternatively, if you prefer Sass, you can reference the same variables, all in the form $d2l-color-<name>:

Example (scss)
@import 'bower_components/d2l-colors/d2l-colors.scss';

div {
  background-color: $d2l-color-cinnabar;
}

Learn more about the Sass extension language

Show me the code!

Want to see, contribute or learn more about the code?
Check out "BrightspaceUI/colors" on GitHub!

More information on developing with Brightspace UI components can be found in the Developer Guide.