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.