Color Palette

Crate and Barrel Color Palette

#BB0000 - Crate Red

  • Can only be paired with Pale Warm Gray or lighter
  • #BB0000 - Default state color
  • #A80000 - Color on hover or focus
  • Clearance, Sale, Warning, or Promos

#007B00 - Crate Green

  • #007B00 - Default state color
  • #006400 - Color on hover or focus
  • Store Pickup button
  • Most Loved button active state
  • Favorites List - Added button

Crate and Kids Color Palette

#0A7478 - Kids Teal

  • Crate and Kids logos, header bar background, main nav text

#F1F6F7 - Kids Pale Teal

  • Crate and Kids main navigation flyouts background

Gray Scale

#222222 - Crate Black

  • Headlines
  • Body Copy
  • Primary Button background color
    • #222222 - Default state background color
    • #111111 - Hover state background color
    • #222222 - Focus state background color

#666666 - Medium Gray

  • Palest gray that may be used for standard text on #FFFFFF or #F0EFED background.

#999999 - Dusty Gray

  • Palest gray that may be used for large text on #FFFFFF background.
  • Darkest gray that may be used for standard text on #222222 background.

#CCCCCC - Pastel Gray

  • Rule lines.

#F0EFED - Pale Warm Gray

  • Section or call-out area background color.

#FFFFFF - White

  • Page background color
  • Text on dark backgrounds

Accessible Combinations

WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1 for standard text and 3:1 for large text.

The options below offer color palette combinations that fall within the range of compliant foreground/background color contrast ratios. To ensure that text remains accessible, use only these permitted color combinations.

If you choose to customize beyond this palette, this color contrast tool is a useful resource for testing the compliance of any color combination.

Color on Color

  • Kids Teal on Kids Pale Teal color:#0A7478; background:#F1F6F7;
  • Kids Pale Teal on Kids Teal color:#F1F6F7; background:#0A7478;

Color on Gray

  • Crate Red on White color:#BB0000; background:#FFFFFF;
  • Crate Red on Pale Warm Gray color:#BB0000; background:#F0EFED;
  • Crate Green on White color:#007B00; background:#FFFFFF;
  • Crate Green on Pale Warm Gray color:#007B00; background:#F0EFED;

Gray on Color

  • White on Crate Red color:#FFFFFF; background:#BB0000;
  • Pale Warm Gray on Crate Red color:#F0EFED; background:#BB0000;
  • White on Crate Green color:#FFFFFF; background:#007B00;
  • Pale Warm Gray on Crate Green color:#F0EFED; background:#007B00;

Gray - Dark on Light

  • Crate Black on White color:#222222; background:#FFFFFF;
  • Medium Gray on White color:#666666; background:#FFFFFF;
  • Crate Black on Pale Warm Gray color:#222222; background:#F0EFED;
  • Medium Gray on Pale Warm Gray color:#666666; background:#F0EFED;
  • Crate Black on Pastel Gray color:#222222; background:#CCCCCC;

Gray - Light on Dark

  • White on Crate Black color:#FFFFFF; background:#222222;
  • White on Medium Gray color:#FFFFFF; background:#666666;
  • Pale Warm Gray on Crate Black color:#F0EFED; background:#222222;
  • Pale Warm Gray on Medium Gray color:#F0EFED; background:#666666;
  • Pastel Gray on Crate Black color:#CCCCCC; background:#222222;