Creating a mathematically harmonious color palette can provide a clean, cohesive design that scales well across various elements. Here’s a structured approach to calculate each color based on color theory principles and mathematical adjustments. This method will ensure that the colors are balanced and consistent without the guesswork.

You can start by defining your Primary, Secondary, and Action (or Accent) colors, and then derive the Base and Shade colors using mathematical rules. Here’s a step-by-step guide for both methods:

1. Start with the Primary Color

• Choose a Primary color in HSL format, typically with a mid-tone lightness (e.g., 50%) and full saturation.
• Example: --primary: hsl(220, 100%, 50%); (a bright, pure blue)

2. Derive the Secondary Color

• Set the Secondary color 30 degrees away from Primary on the color wheel for a triadic harmony.
• Example: --secondary: hsl(calc(220 + 30), 100%, 50%); (in this case, a cool green)

3. Derive the Action (or Accent) Color

• If Action and Accent are used interchangeably, set this color 120 degrees from Primary on the color wheel for a complementary accent.
• Example: --action: hsl(calc(220 + 120), 100%, 50%); (this will be a vibrant orange, opposite to blue)

4. Set the Base Color

• Base colors are generally neutral tones. Use a neutral gray or an off-white for versatility.
• Base color can be derived by reducing saturation to 0% and setting lightness to around 95% for a near-white or 50% for a mid-gray.
• Example: --base: hsl(0, 0%, 95%); (near white)

5. Set the Shade Color

• Shade color is a darker neutral used for background elements or text.
• Use a gray with a lightness around 10-15% for a subtle dark tone.
• Example: --shade: hsl(0, 0%, 10%); (dark gray)

This approach uses a few set rules to generate a flexible palette for any site based on a consistent base structure.

Step 1: Set Primary, Secondary, and Action Colors

• Primary: Pick a color you want to be the foundation. It could be a corporate brand color or main theme color.
  • Example: --primary: hsl(210, 90%, 50%); (deep blue)
• Secondary: Choose a color 30 degrees away from the primary hue for harmonious variety.
  • Example: --secondary: hsl(240, 90%, 50%); (cooler blue)
• Action: Choose a contrasting hue to Primary for high visibility (e.g., orange or green). Set it 120 degrees from Primary for maximum contrast.
  • Example: --action: hsl(330, 80%, 50%); (a bold pinkish-red)

Step 2: Standardize Accent, Base, and Shade Colors

• Accent: Use a mid-tone, desaturated version of the Primary for subtle highlights.
  • Example: --accent: hsl(210, 20%, 60%); (a soft blue-gray)
• Base: Standardize to a light, neutral gray for background or container colors.
  • Example: --base: hsl(0, 0%, 95%); (a light off-white)
• Shade: Set to a darker neutral gray or black for text or deep backgrounds.
  • Example: --shade: hsl(0, 0%, 10%); (a deep gray)