Color Generator
Generate color palettes with harmony rules and advanced color analysis
Examples
Complementary palette from Tailwind blue-500
Seed: #3B82F6 · Harmony: ComplementaryBase: #3B82F6
Complement: #f6af3cThe complementary hue is the seed hue + 180° on the color wheel (217° → 37°), keeping saturation and lightness fixed. The result is the same color used as the analogous example in reverse.
Analogous palette around blue-500
Seed: #3B82F6 · Harmony: AnalogousBase: #3B82F6
Analogous 1: #523cf6
Analogous 2: #3ce0f6Two hues are generated at seed + 30° and seed − 30° (217° → 247° and 187°). Analogous palettes are useful for gradient backgrounds and cohesive hero sections.
Triadic palette with three evenly spaced hues
Seed: #3B82F6 · Harmony: TriadicBase: #3B82F6
Triadic 1: #f63c83
Triadic 2: #83f63cTriadic hues are seed + 120° and seed + 240°. The three colors are evenly spaced on the wheel and remain roughly equal in brightness, producing a balanced and vibrant palette.
Monochromatic scale from a single hue
Seed: #3B82F6 (HSL 217, 91, 60) · Harmony: MonochromaticBase: #3B82F6 (lightness 60)
Lightness 40: #0950c3
Lightness 50: #0b64f4
Lightness 70: #6da2f8
Lightness 80: #9ec1faMonochromatic palettes step lightness by ±10 and ±20 around the seed, clamped to the 0–100 range. Same hue and saturation, useful for neutral UI scales.
About this tool
The Color Generator builds a five-color palette from a single seed color using the standard color-theory harmonies: complementary, analogous, triadic, tetradic, and monochromatic. Hue, saturation, and lightness are independently adjustable on sliders so the seed color can be tweaked without retyping a hex value.
Each harmony is computed by rotating the seed hue on the color wheel and re-running the resulting HSL through the sRGB conversion. The companion ColorExtractor, ColorContrast, and Color-Blindness tools share the same ColorUtils.ts engine, so the conversions match exactly across the suite.
Color generation is purely client-side. The seed color, palette, and any saved colors stay in localStorage — no image or color is uploaded.
How to use
Pick a seed color
Type a hex value, use the native color picker, or click Generate Random Color. The HSL sliders jump to the color's hue, saturation, and lightness so you can adjust them directly.
Choose a harmony
Open the Harmony Type dropdown and pick Complementary, Analogous, Triadic, Tetradic, or Monochromatic. The palette re-renders immediately.
Refine the palette
Drag the Hue, Saturation, and Lightness sliders to nudge the seed color. The base color and the derived palette update on every change.
Export or save
Click the Copy icon to copy the base color plus the palette as a comma-separated list of hex values, or click Download to save the full palette as a JSON file.
Use cases
Building a starter palette for a brand
Pick a single brand color and generate complementary, analogous, and triadic palettes to find the strongest secondary and accent colors before refining by hand.
Designing a monochromatic neutral scale
Use the monochromatic harmony to derive a 4–5 step lightness gradient from a single hue — perfect for status indicators, badge colors, and elevation tints.
Exploring color theory without retyping hex values
Drag the Hue slider while keeping the harmony fixed to see how palettes rotate on the wheel. The base color updates live, so it doubles as a hue playground.
Generating accessible color pairs
Pair the generator with the Color Contrast Checker: generate a candidate palette, then feed each base/contrast pair into the checker to confirm WCAG ratios before exporting.
Common mistakes
Mistake:Trusting the generated palette to be accessible.
Fix:Harmony rules produce visually pleasing palettes, not contrast-safe ones. Run every base/contrast pair through the Color Contrast Checker before shipping.
Mistake:Calling analogous colors "shades" of the base color.
Fix:Analogous colors have a different hue; shades are the same hue with different lightness. Use the monochromatic harmony for shades and analogous for hue-based neighbors.
Mistake:Confusing the HSL sliders with the HSL of the output color.
Fix:The sliders drive the seed color. The palette is then computed from that seed using the chosen harmony, so changing the sliders also changes the derived palette.
Mistake:Assuming HSL saturation of 0 produces a useful grayscale.
Fix:Saturation 0 with light hues gives a near-white; saturation 0 with a low lightness gives a near-black. Adjust lightness explicitly to build a grayscale scale.
Mistake:Re-typing the harmony in code by hand.
Fix:Use the export button to download the palette as JSON. The output already includes the base color in HEX, RGB, HSL, HSV, and CMYK — no need to re-derive the values.
Frequently asked questions
Related guides
References & standards
Related tools
Color Blindness Simulator
Simulate color blindness on palettes and images. Compare protanopia, deuteranopia, tritanopia, and more side-by-side.
Color Contrast Checker
Advanced WCAG accessibility compliance checker with color blindness simulation, multiple text sizes, and comprehensive analysis features.
Color Converter
Convert colors between multiple formats (HEX, RGB, HSL, HSV, CMYK, LAB) with color blindness simulation, named colors, and batch processing
Color Extractor
Extract colors from uploaded images by hovering over pixels to get precise color values.
Color Mixer
Blend two colors together by any ratio. See intermediate steps and copy the result in HEX, RGB, or HSL.
Color Names Finder
Look up CSS color names or find the closest named colors to any hex value.