Sections

Colors

The default set of color palettes have been selected to look great and be extremely flexible.

Color palettes

The default color palettes provide a robust set of colors for use throughout your theme. Like everything else in our theming framework, they can be customized to perfectly reflect your company brand.

Black and white

Black

#000

White

#fff

Translucent

rgba(255, 255, 255, .1)

Gray

Gray-100

#F7FAFC

Gray-200

#EDF2F7

Gray-300

#E2E8F0

Gray-400

#CBD5E0

Gray-500

#A0AEC0

Gray-600

#718096

Gray-700

#4A5568

Gray-800

#2D3748

Gray-900

#1A202C

Green

Green-100

#F0FFF4

Green-300

#9AE6B4

Green-500

#48BB78

Green-700

#2F855A

Green-900

#22543D

Orange

Orange-100

#FFFAF0

Orange-300

#FBD38D

Orange-500

#ED8936

Orange-700

#C05621

Orange-900

#7B341E

Red

Red-100

#FFF5F5

Red-300

#FEB2B2

Red-500

#F56565

Red-700

#C53030

Red-900

#742A2A

Theme

In addition to the default color palettes, every theme has a unique set of theme colors, including:

  • Primary color: the color for major navigational elements.
  • Primary text color: the text color for hover and active element states where the primary color is used.
  • Heading color: the color for heading elements.
  • Text color: the color for text elements.
  • Link color: the color for link elements.
  • Outline color: the outline color for form elements and search fields.
  • Background color: the background color of your Help Center.

Adding and changing colors

You can easily add your own custom color palettes by specifying defining them in your theme’s _variables.scss file. All colors defined in the $colors Sass map are used to generate text, background and border color utilities. By default this includes all colors except for the Heading, Text, Link and Outline theme colors.

The following example adds a purple color palette to the theme:

$colors: (
  "purple-100": #faf5ff,
  "purple-300": #d6bcfa,
  "purple-500": #9f7aea,
  "purple-700": #6b46c1,
  "purple-900": #44337a,
);

Any color values that are already defined as defaults by the framework will be overridden.