Color Palette Generator
Palettes use HSL color theory. The same base, mode, and count always produce the same HEX list.
Color scheme generator from a base HEX
This palette generator builds harmonious schemes with HSL math: complementary opposites, analogous neighbors, triadic thirds, and monochromatic lightness ramps. It is meant for UI tokens, slides, and quick brand explorations — not as a substitute for checking contrast.
Toolshelf keeps generation on the device. Saved palettes never leave this browser.
Frequently asked questions
- How does the color palette generator work?
- It starts from your base color in HSL, then applies complementary, analogous, triadic, split-complementary, tetradic, or monochromatic hue rules. Extra swatches use documented lightness steps. The result is algorithmic, not generated by a model.
- Will the same base color always make the same palette?
- Yes for a given mode and swatch count. There is no hidden randomness unless you click Randomize base.
- Can I export CSS variables?
- Yes. Download a :root block with --color-1 and friends, or JSON with HEX, RGB, and HSL for each swatch.
- Where are favorite palettes saved?
- Favorites use localStorage in this browser. They are not synced to an account.
- Is this a replacement for a designer?
- No. Harmony rules are a starting point. Check contrast before using light text on a generated swatch.
Related tools
Continue with related browser-based tools on Toolshelf.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- Color Shades & Tints Generator — Color shades and tints generator.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- CSS Gradient Generator — CSS gradient generator for linear, radial, and conic backgrounds.
- Color Converter — HEX to RGB converter online.
- QR Code Generator — Create QR codes for URLs, text, Wi-Fi, contacts, email, phone numbers and more.
- Image to Base64 Converter — Image to Base64 converter.
Use cases
- For Designers — Pick colors, check contrast, and build palettes and gradients.
What would you like to do next?
Continue working with the next step in this workflow. Recently used tools in this set are listed first.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- Color Shades & Tints Generator — Color shades and tints generator.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
You may also need
Continue with related browser-based tools on Toolshelf.
- Color Picker — Free online color picker with HEX, RGB, and HSL.
- Color Shades & Tints Generator — Color shades and tints generator.
- Random Color Generator — Random color generator for HEX, RGB, and HSL.
- WCAG Contrast Checker — WCAG contrast checker for text and UI colors.
- CSS Gradient Generator — CSS gradient generator for linear, radial, and conic backgrounds.
- Color Converter — HEX to RGB converter online.
- QR Code Generator — Create QR codes for URLs, text, Wi-Fi, contacts, email, phone numbers and more.
- Image to Base64 Converter — Image to Base64 converter.