Color palette generation is rooted in color theory, a framework that dates back to the 18th-century color wheel developed by artists and scientists. The color wheel arranges hues in a circle, revealing natural relationships between colors. Complementary colors sit opposite each other and create high contrast, while analogous colors are neighbors that produce harmonious, low-tension combinations. Triadic schemes pick three equally spaced hues for vibrant yet balanced palettes. This tool implements these algorithms mathematically, calculating precise hue rotations in the HSL color space to generate palettes that follow established color theory principles.

HSL (Hue, Saturation, Lightness) is the preferred color model for palette generation because it maps intuitively to how humans perceive color. Hue is an angle on the color wheel (0-360 degrees), saturation controls vibrancy (0-100%), and lightness adjusts brightness (0-100%). This makes it straightforward to create variations: rotate the hue for different colors, reduce saturation for muted tones, or adjust lightness for tints and shades. RGB (Red, Green, Blue), by contrast, is hardware-oriented and better suited for screen rendering. HEX is simply a compact notation for RGB values. This tool provides all three formats because different contexts demand different representations -- CSS stylesheets commonly use HEX, programmatic manipulation benefits from HSL, and certain APIs expect RGB values.

When building a design system, accessibility must be a primary concern. The Web Content Accessibility Guidelines (WCAG 2.1) require a minimum contrast ratio of 4.5:1 between normal text and its background, and 3:1 for large text (18px bold or 24px regular). This tool includes contrast checking to help you verify that your palette meets these requirements. A well-constructed palette typically includes a dark shade for text, a light background, a primary brand color, a secondary accent, and a neutral gray -- each tested for sufficient contrast in its intended use. Lock individual colors you like, then regenerate the rest to explore variations while maintaining your anchors.

For practical design system work, aim for a palette of 5-8 core colors with 5-10 lightness variations each. Start with your brand color, derive complementary or analogous accents, and generate a neutral scale. The image extraction feature can help bootstrap a palette from photography or existing brand assets, giving you a data-driven starting point that you can refine with the harmony modes.