Color Palette Generator

Generate tints, shades and color harmonies — fast, responsive, and local-only

Create well-balanced color palettes from one or more base colors. Choose algorithms (Tints & Shades, Complementary, Analogous, Triadic, Tetradic, Monochrome, Random), set steps, pick RGB or HSL mixing, then generate swatches, CSS custom properties, and downloadable JSON. The tool runs entirely in your browser and uses localStorage to save drafts when Save is ON.

This is built for designers, frontend developers, WordPress themers, and business owners who need usable palettes (HEX & RGB) plus ready-to-copy CSS variables for implementation.

Key features

• Multiple base colors: build grouped palettes from more than one base.
• Algorithms: Tints & Shades, Complementary, Analogous, Triadic, Tetradic, Monochrome, Random.
• Mode options: RGB Mix (strong contrast) and HSL (smoother perceptual tints/shades).
• Steps: control how many tints/shades or harmony colors (1–12).
• Live preview: click any swatch to copy its HEX to clipboard.
• Output: copy CSS variables, download generated JSON, or copy last output.
• Minify output toggle for compact CSS/JSON.
• Save toggle (ON by default): persist inputs and last palette in browser localStorage.
• Responsive layout and mobile-friendly swatches.
• Accessibility-aware: swatches show suggested foreground contrast (light or dark text) and display RGB values.

How to use

1. Add one or more base colors (text input or the color picker).
2. Choose an algorithm and mode (RGB Mix or HSL).
3. Set the number of steps (1–12).
4. Click Generate to produce palettes for each base color.
5. Click a swatch to copy the HEX value; use Copy CSS vars to copy :root variables, or Download JSON to save the palette.
6. Toggle Save ON to keep inputs and results locally (turn OFF on a shared device).

Why this helps

• Saves design time — generate consistent, production-ready palettes in seconds.
• Produces implementation-ready outputs (CSS custom properties & JSON) for developers.
• Multiple bases let you manage primary and accent families together.
• HSL mode generates perceptually smooth tints; RGB Mix gives bolder, higher-contrast results.
• Click-to-copy swatches speed up handoffs between designers and developers.

Best practices

• Use HSL mode for UI palettes where perceptual consistency matters (buttons, backgrounds, UI states).
• Use RGB Mix when you need stronger visual contrast for marketing or hero elements.
• Keep Save ON while iterating on a device you control; turn OFF on public/shared computers.
• Export JSON or CSS variables and store them with your project design tokens for consistent reuse.
• After applying a palette, test contrast in real layouts and with sample text to ensure accessibility.

Technical notes

• The generator converts between HEX, RGB, and HSL to produce tints/shades and harmonies.
• CSS variables are exported as --cp-g{group}-{index}, e.g. --cp-g1-01: #f3f4f6;.
• JSON output includes generatedAt and groups arrays with base and palette arrays.
• Minify option removes extra whitespace for compact copies/files.
• Save uses localStorage key groot_color_palette_v1 and stores inputs + lastGenerated palette — nothing is sent to a server.

FAQs

1. Is anything uploaded to a server?
   No — everything runs locally in your browser. Save uses localStorage only.
2. What’s the difference between RGB Mix and HSL mode?
   RGB Mix blends colors directly in RGB space (stronger contrast). HSL modifies hue/saturation/lightness for smoother, perceptually even tints and shades.
3. How many base colors can I add?
   You can add multiple base colors — the UI is responsive and will generate one group per base.
4. Can I copy a swatch value?
   Yes — tap/click any swatch to copy its HEX to the clipboard. A brief message confirms the copy.
5. What output formats are available?
   The tool provides CSS custom properties (copy), JSON download, and a “Copy last” option that copies CSS or JSON. Minify option compresses outputs.
6. Does the tool check accessibility/contrast?
   The swatch card displays a suggested foreground color (light or dark) based on contrast ratio. Always validate contrast in your specific layout.
7. Can I import saved palettes between devices?
   Saved palettes persist in your browser only. Use the JSON download to move palettes between devices or projects.
8. Are results deterministic?
   For deterministic algorithms (tints, analogous, triadic, etc.) the same inputs produce the same outputs. The Random algorithm will vary on each shuffle.

Disclaimer

This is a lightweight palette utility for common CSS patterns. Complex preprocessor features or advanced color management workflows (ICC profiles, color spaces beyond sRGB) are out of scope. Always test generated colors in your real UI for accessibility and brand fidelity.