About

Color harmony is not random; it is a mathematical relationship between frequencies of light. This Gatsby Color Palette Generator utilizes the HSL (Hue, Saturation, Lightness) color space to algorithmically derive harmonious color schemes. Unlike RGB, which is digital-centric, HSL models human perception, allowing for precise manipulation of tints and shades while maintaining tonal consistency.

Designed specifically for modern web development workflows, this tool calculates WCAG 2.1 contrast ratios in real-time to ensure your design is accessible. Whether you use Theme UI, Styled Components, or native CSS, the generator produces production-ready code snippets that can be dropped directly into your gatsby-config.js or layout files.

Formulas

The core algorithm converts the input HEX to HSL, rotates the hue vector, and reconverts to HEX. The Hue rotation for a generated color C_i is defined as:

H_i = (H_base + θ_i) mod 360

To ensure accessibility, we calculate the Relative Luminance L to determine the contrast ratio R:

R = L₁ + 0.05L₂ + 0.05

Where L₁ is the luminance of the lighter color and L₂ is the darker. A ratio ≥ 4.5:1 is required for AA standard compliance.

Reference Data

Harmony Rule	Hue Formula (θ)	Description
Analogous	H ± 30°	Colors next to each other. Serene and comfortable designs.
Complementary	H + 180°	High contrast. Best for call-to-action buttons.
Split-Complementary	H + 150°, 210°	Strong visual contrast with less tension than complementary.
Triadic	H + 120°, 240°	Balanced and vibrant. requires careful balance of dominance.
Tetradic (Rectangle)	H + 60°, 180°, 240°	Rich color variety. Hardest to balance.
Monochromatic	H + 0°	Variations in S and L only.

Frequently Asked Questions

Select the "Gatsby Theme UI" tab in the export section. Copy the generated object and paste it into your `src/gatsby-plugin-theme-ui/index.js` file under the `colors` key. The tool automatically names keys (primary, secondary, accent) based on standard conventions.

RGB (Red, Green, Blue) is additive and non-intuitive for mixing. HSL (Hue, Saturation, Lightness) separates the color family (Hue) from its intensity (Saturation) and brightness (Lightness). This allows us to mathematically rotate colors around the wheel while keeping them visually consistent.

In Monochromatic mode, we do not rotate the Hue. Instead, we mathematically generate tints (adding white/lightness) and shades (adding black/darkness) to create depth while strictly maintaining the single base Hue.

The generated palettes provide raw color values. For Dark Mode in Gatsby, you typically map these values to functional variables (e.g., `text`, `background`). The "Export" section includes a raw JSON format useful for defining dark mode overrides.