A complementary color sits opposite another color on a color wheel or comparable hue model. Blue pairs with yellow, green with magenta or purple, and red with cyan. section 11.3.4
Use this relationship as a starting point, then refine the result:
- In OKLCH or HSL, add or subtract 180 degrees from the hue; keep equivalent values such as -15 and 345 within a familiar 0–360 range. section 11.3.4
- Choose chroma and lightness from an existing page color, then adjust them until the result looks appropriate. section 11.3.4
- Check the result in browser DevTools, especially when previewing link active, hover, or focus states. section 11.3.4
A green palette accent
Starting with a green hue near 165 degrees gives a complementary hue near 345 degrees. Adjusting it toward 10 degrees and reducing lightness produces oklch(64% 0.15 10deg), assigned to the --red custom property. section 11.3.4
Listing 11.8 Adding the red color to the palette
@layer theme {
:root {
--brand-green: oklch(45% 0.09 165.4deg);
--dark-green: oklch(59% 0.12 164.1deg);
--medium-green: oklch(74% 0.15 166.4deg);
--text-color: oklch(26% 0.01 0deg);
--gray: oklch(64% 0.02 248deg);
--light-gray: oklch(96% 0.003 248deg);
--extra-light-gray: oklch(98% 0 0deg);
--white: oklch(100% 0 0deg);
--red: oklch(64% 0.15 10deg); #1
}
}
See the CSS custom-property definition that adds the derived red accent to the palette. section 11.3.4
