Color Palette Generator
Create beautiful, harmonious color palettes instantly with our free online generator. Supports monochromatic, analogous, complementary, triadic, split-complementary, and tetradic modes. Fine-tune colors with HSL sliders, lock favorites, and export as CSS variables, Tailwind config, JSON, or SVG. 100% browser-based, your data never leaves your device.
How do I generate a color palette?
Click the Generate button or press the spacebar to create a new random palette. Use the harmony mode selector to choose between monochromatic, analogous, complementary, triadic, split-complementary, or tetradic color schemes.
How do I lock a color I like?
Click the lock icon on any color swatch. Locked colors will remain in place when you generate a new palette, while unlocked colors will be replaced.
How do I export my palette?
Click the Export button to choose from CSS variables, Tailwind config, JSON array, or SVG palette formats. The palette will be copied to your clipboard automatically.
What are the different harmony modes?
Monochromatic uses one hue with varying saturation and lightness. Analogous uses adjacent hues (±30°). Complementary uses opposite hues (180° apart). Triadic uses 3 equidistant hues (120° apart). Split-complementary uses a base hue plus two adjacent to its complement. Tetradic uses 4 equidistant hues (90° apart).
Can I build a palette around my brand color?
Yes. Pick your brand color with the base color picker, then choose a harmony mode — the other four colors are generated around it. You can fine-tune each of them afterwards with the HSL sliders.
Which export formats are available?
The palette can be exported as CSS variables, a Tailwind config, a JSON array or an SVG file. The code preview updates instantly when you switch formats, ready to paste straight into your project.
Can I see color values in HEX, RGB or HSL?
Yes, each color's values can be switched between HEX, RGB and HSL. That way you grab the exact format your design tool or codebase expects without converting anything by hand.
What does the small badge on each color mean?
It shows whether white or black text stays readable on that color. The badge marks it as passing when the contrast ratio reaches 4.5:1, in line with WCAG accessibility guidance — handy when choosing background colors for buttons or banners.
Is my palette uploaded to a server?
No. Everything runs locally in your browser, so your colors never leave your device. Once the page has loaded, the generator even keeps working offline.
How to Use Color Palette Generator
Generate harmonious color palettes with modes like monochromatic, analogous and triadic — all computed in your browser. Lock the shades you love, fine-tune them, and export in your framework's format; nothing leaves your device.
- Pick a harmony Mode from the dropdown: Random, Monochromatic, Analogous, Complementary, Triadic, Split-complementary or Tetradic.
- Set the Base color so every generated swatch derives from your brand hue, then regenerate until the set feels right.
- Drop the ✕ button on any swatch you dislike and reroll; use the HSL sliders to fine-tune what stays.
- Compare the swatches on light and dark mockups to make sure text remains readable over each color.
- Open Export Palette and grab your colors as CSS Variables, a Tailwind Config, a JSON Array or an SVG Palette.
Lock your Base swatch before rerolling in Random mode, so you explore variations around your brand color instead of losing it.
Related Tools
- Color Converter Free online color converter. Convert HEX, RGB, HSL, HSV formats instantly with visual picker. 100% private, runs in your browser.
- Color Picker Pick any color from screen with eyedropper. Copy HEX, RGB, HSL codes instantly. Free online color picker tool.
- Color Contrast Checker Check color contrast ratios for WCAG 2.1 compliance. Verify AA and AAA standards for text and UI elements instantly.
- Color Blindness Simulator Free online color blindness simulator. Test designs for Protanopia, Deuteranopia, Tritanopia & other CVD types. 100% private, runs in your browser.
- GIF Split Frames Extract and download individual frames from GIF animations as PNG or sprite sheet. Free online tool with preview and ZIP export.
- GIF Reverse Reverse GIF animation playback order online for free. Upload, preview and download reversed GIFs instantly.
- GIF Speed Changer Change GIF animation speed online. Speed up or slow down GIF files instantly.
- Video to GIF Convert video to animated GIF online. Adjust quality, frame rate and resolution directly in your browser with no upload required.