Example page

This example page imports the React component ColorGenerator.

You can use it to create generate a color set for your site.

tip

To ensure readability, aim for at least WCAG-AA contrast ratio for the primary color. Use the DocStatic website itself to preview how your color palette will appear. You can use alternative palettes in dark mode because one color doesn't usually work in both light and dark mode.

Primary Color:

Background:

CSS Variable Name	Hex	Adjustment	Contrast Rating
`--ifm-color-primary-lightest`	`#007aef`		Fail 🔴
`--ifm-color-primary-lighter`	`#006cd4`		AA 👍
`--ifm-color-primary-light`	`#0067ca`		AA 👍
`--ifm-color-primary`	`#005eb8`	0	AA 👍
`--ifm-color-primary-dark`	`#0055a6`		AAA 🏅
`--ifm-color-primary-darker`	`#00509c`		AAA 🏅
`--ifm-color-primary-darkest`	`#004281`		AAA 🏅

Replace the variables in src/css/custom.css with these new variables.

/src/css/custom.css
:root {
  --ifm-color-primary: #005eb8;
  --ifm-color-primary-dark: #0055a6;
  --ifm-color-primary-darker: #00509c;
  --ifm-color-primary-darkest: #004281;
  --ifm-color-primary-light: #0067ca;
  --ifm-color-primary-lighter: #006cd4;
  --ifm-color-primary-lightest: #007aef;
}