Color

Color makes communication attractive and exciting. Color also conveys information and organization. Use color meaningfully to get your message across effectively.

Color Scheme | Accessibility |Photoshop Settings

Official SCC Color Scheme

The primary global design elements of the website utilize the SCC brand color scheme.

There is an additional use of various tints of grey and gold to complement the Cardinal Red and Gold of the banner navigation, footer, and formatted typographic elements.

SCC Cardinal Red

Pantone 202
RGB 137 – 32 – 52
CMYK 9 – 100 – 64 – 48
Hex #800024

SCC Gold

Pantone 116
RGB 255 – 206 – 0
CMYK 0 – 16 – 100 – 0
Hex #ffce00

Neutral Gray

RGB 153 – 153 – 153
CMYK 0 – 0 – 0 – 40
Hex #999999

Supporting Colors

The following colors are sometimes used for background fields of color with white text inside them.

Blue

Hex: #767EB7

Rose

Hex: #B97879

Violet

Hex: #A271A9

Teal

Hex: #68AAA8

Green

Hex: #6DBE80

Color Accessibility

Keeping in mind that many people have color vision deficiencies:

  • Don’t change the color of text, instead allowing the site-wide style sheet to style a page that is properly formatted (such as heading usage as outlined above).
  • Ensure that information that is conveyed by color differences is also available in text, or that patterns are included to convey the same information in a manner that does not depend on color.

References

G14: Ensuring that information conveyed by color differences is also available in text
G111: Using color and pattern
G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text

Photoshop Color Settings

The gold and red tints for header and feature images are achieved through a pre-arranged set of adjustment layers in Adobe Photoshop. If you have images you would like used in the header and do not know how to use Photoshop, you should contact the Webmaster (see sidebar) for assistance.

Your file should be in RGB image mode.

These three adjustment layers should be placed above color header images, from top to bottom:

screen capture of Photoshop color adjustment layers

PHOTO FILTER

  • Color: Hex #951919 (red) or Hex #f6b007 (gold)
  • Density: 95%
  • Preserve Luminosity: checked

screen capture of Photoshop photo filter settings

HUE / SATURATION

  • Saturation: -100

screen capture of Photoshop hue saturation settings

CURVES

Depending on the shadow and highlight values of the image, you may use this to reduce or increase contrast or midtone values for best results.

screen capture of Photoshop curves settings