Color palettes drive the visual language of a design. Picking related colors that work well together is hard from scratch, but easy once you apply the standard color-theory relationships: complementary (opposite on the wheel), analogous (adjacent), triadic (evenly-spaced thirds), tetradic (evenly-spaced quarters), split-complementary (the complement plus its neighbors), and monochromatic (same hue at different lightness levels). This tool generates all six palette types from any base HEX color you pick. Click any swatch to copy the HEX code; the conversion math happens entirely in your browser using HSL color-space rotations, so palettes update instantly as you change the base color.
Frequently asked questions
Complementary palettes (the base color plus its opposite on the wheel) produce high contrast and visual energy. Use for accents, calls to action, or attention-grabbing designs. Analogous palettes (the base color plus two neighbors) produce harmonious low-contrast designs that feel calm and unified. Most editorial and content-heavy sites use analogous or monochromatic with one complementary accent for buttons and links.
Related tools
- WCAG Contrast CheckerCheck foreground / background contrast ratio against WCAG AA and AAA standards.
- Color Blindness SimulatorSee how any color appears under the four major color vision deficiencies.
- Favicon GeneratorUpload any image and generate the full set of favicon sizes (16x16 to 512x512) for web, iOS, and PWA.