Skip to content
Colors
Although it's possible to jump into Keystone and start picking colors, we recommend doing a bit of prep work beforehand. This ensures you have a solid idea of the direction of your brand and the colors you want to use.
If you don't already have a set color palette for your brand, it's useful to spend some time deciding on this direction. You can use free color palette generators, such as Coolors, to help with this process.
There are a handful of great resources online that can help guide your color selection process.
FAQs
Color settings
These settings will be applied site-wide, affecting all sections and blocks. Changes made here will update the entire website's design uniformly.
| Setting | Description |
|---|---|
| Background body color | Controls the main background color for the body of the site. This will also be available in other sections when selecting a color and shown as Body. |
| Foreground body color | Defines the primary text color used in the body content. It's best to use a color that contrasts well against Background body color. |
| Foreground body dark color | Alternative darker text color for body content |
| Background primary color | Sets the background color for primary content areas |
| Foreground primary color | Defines text color used in primary content sections |
| Background secondary color | Sets the background color for secondary content areas |
| Foreground secondary color | Defines text color used in secondary content sections |
| Background tertiary color | Sets the background color for tertiary content areas |
| Foreground tertiary color | Defines text color used in tertiary content sections |
| Bar color | Controls the color of dividing bars or horizontal elements |
| Background overlay | Sets the gradient overlay effect (default is a black gradient) |
| Input button style | Determines button appearance with options for standard, lighter, or darker styling |
Understanding your color schemes
Body and Body Neutral:
- Body is the base color.
- Body Neutral is a blend of the Body color and Primary Accent.
- If the Body color is dark, Accent and Shade can instead be lighter shades of the Body color.
Accent 1-3 and Shade 1-3:
- Accent 1-3 represents darker shades of the Body color.
- Shade 1-3 also represents darker shades of the Body color but with slight opacity, making them semi-transparent.
- For example, if the background color is black, Accent 1-3 will be lighter shades rather than darker.
Primary, Secondary, and Tertiary Colors:
- These colors are directly derived from the color settings.