Color Palette Generator
Generate harmonious color palettes — analogous, complementary, triadic, tetradic, monochromatic, and Tailwind-style shades — from any base color.
HSL(217°, 91%, 60%)
187° 91% 60%
217° 91% 60%
AA lg247° 91% 60%
AA lg:root {
--color-1: #3ce0f6;
--color-2: #3b82f6;
--color-3: #523cf6;
}About this tool
A color palette is a curated set of colors used consistently throughout a design system or brand identity. Well-designed palettes balance several concerns: visual harmony (colors that look good together), functional utility (enough variation to express hierarchy, state, and meaning), and accessibility (sufficient contrast for all text/background combinations). Professional design systems typically include a primary brand color with multiple shades, a neutral (gray) scale, and semantic colors for success, warning, error, and informational states.
Color harmony theories describe relationships between colors on the hue wheel that tend to produce pleasing combinations. Complementary colors sit opposite each other (e.g., blue and orange) and create maximum contrast and visual tension. Analogous colors are adjacent on the wheel (e.g., blue, blue-green, green) and produce calm, harmonious combinations. Triadic schemes use three equally spaced hues and produce vibrant, balanced palettes. Split-complementary schemes use a color and the two colors adjacent to its complement, offering strong contrast with less tension than a direct complement.
Generating accessible palettes requires checking contrast ratios for all text and background combinations against WCAG standards. This is particularly challenging because a color that contrasts well against white may not contrast well against a dark background, and a color that looks fine to users with typical vision may be indistinguishable from an adjacent color for users with red-green color deficiency. Perceptually uniform color spaces like OKLCH simplify palette generation by ensuring that shades with equal numerical lightness differences also appear equally different in perceived brightness.