Colors – PEGASUS Web Resources

Main Colors

The PEGASUS color palette is derived from the Dallas College brand guidelines. When translated to use on web, we have use of three main color categories:

a primary color category (cprimary),
a secondary color category (csecondary)
and a grey color category/spectrum (cgrey).

cprimary

Dallas College Blue

Apply as Background Color

.bg-cprimary

background:#003385;
color:#fffff;

csecondary

Dallas College Red

Apply as Background Color

.bg-csecondary

background:#E52626;
color:#fffff;

cgrey

Adapted from Dallas College Silver

Apply as Background Color

.bg-cgrey

background:#E5E2D6;
color:#000000;

Deprecated: Old Color Classes

Color class applications for all colors have changed!

Instead of .cprimary, .csecondary, etc.
- We now use: .bg-cprimary, .bg-csecondary, etc.
Instead of .cprimary-font, .csecondary-font, etc.
- We now use: .text-cprimary, .text-csecondary, etc.
Instead of .cprimary-border, .csecondary-border, etc.
- We now use: .border-cprimary, .border-csecondary, etc.

These old classes will remain usable until January 1, 2021. All uses should be updated by that date.

Accessibility Note: Contrast and Background Colors

Note that when using any of the color classes (above or below), the font-color will update to either black or white for maximum color contrast (which all meet WCAG 2.0 AA standards).

If in doubt, you can use this tool to make sure your text and background colors meet the 4.5:1 contrast ratio requirement.

“Dallas College Silver” vs. cgrey

Also note that the color used for cgrey is not the exact Dallas College Silver as outlined in the Brand Guidelines. It has been adapted (lightened) for improved contrast. To utilize the true Dallas College Silver color, the class .cgrey-20 is available. See the grey spectrum below.

Color Value Variations & Classes

To provide additional color variety, a spectrum of ranging color values are available for each of the three major color categories.

Primary and Secondary Colors

The primary (cprimary) and secondary (csecondary) colors each have corresponding light (-lt), dark (-dk) and gradient versions (-gr):

Accessibility Note: Background Colors

Note that when using any of the color classes (above or below), the font-color will update to either black or white for maximum color contrast (which all meet WCAG 2.0 AA standards).

cprimary-lt

Apply as Background Color

.bg-cprimary-lt

background:#E9F2FF;
color:#000000;

cprimary-dk

Apply as Background Color

.bg-cprimary-dk

background:#001E49;
color:#FFFFFF;

cprimary-gr

Apply as Background Color

.bg-cprimary-gr

background: linear-gradient( $cprimary, darken($cprimary, 7%));
  color:#FFFFFF;

csecondary-lt

Apply as Background Color

.bg-csecondary-lt

background:#FFE9E9;
color:#000000;

csecondary-dk

Apply as Background Color

.bg-csecondary-dk

background:#6D0000;
color:#FFFFFF;

csecondary-gr

Apply as Background Color

.bg-csecondary-gr

background: linear-gradient( $csecondary, darken($csecondary, 7%));
color:#FFFFFF;

Grey Spectrum

To provide even greater flexibility, the grey colors have been expanded to five additional grey values all based from Dallas College Silver and labelled by the percentage of dark that they are (the lower the number, the lighter the value). For reference, cgrey is also included in the listing:

cwhite

0% Dark

Apply as Background Color

.bg-cwhite

background:#FFFFFF;
color:#000000;

cgrey-05

5% Dark

Apply as Background Color

.bg-cgrey-05

background:#F7F3E8;
color:#000000;

cgrey

10% Dark

Apply as Background Color

.bg-cgrey

background:#E5E2D6;
color:#FFFFFF;

cgrey-20

20% (17%) Dark

Apply as Background Color

.bg-cgrey-20

background:#D6D2C4;
color:#000000;

cgrey-40

40% Dark

Apply as Background Color

.bg-cgrey-40

background:#99968D;
color:#000000;

cgrey-60

60% Dark

Apply as Background Color

.bg-cgrey-60

background:#66645E;
color:#FFFFFF;

cgrey-80

80% Dark

Apply as Background Color

.bg-cgrey-80

background: #333333;
color:#FFFFFF;

cblack

100% Dark

Apply as Background Color

.bg-cblack

background: #000000;
color:#FFFFFF;

Contextual Colors

Bootstrap offers the ability to convey meaning through color.

Accessibility Note: Conveying Meaning Through Color

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 (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means.

In many cases, contextual colors are considered a progressive enhancement.

Success

This color could mean that the user is on the right ("successful") path, or that the information presented is generally positive.