Color Palette Generator free for designers and developers — build harmonious palettes from 2 to 8 colors, edit each color by picker, hex code, RGB sliders, or eyedropper, and export directly to CSS variables, Tailwind config, SCSS, JSON, or a high-resolution PNG. Recent palettes, live URL sharing, and full dark-mode support. Free, private, no signup.
Note: colours may render slightly differently on different screens, print profiles, and browsers.
Tip: press ⌘/Ctrl + Enter to shuffle the palette.
Color Palette Generator: Build Harmonious Color Schemes & Export to Code
Color Palette Generator is a browser-based tool for designers and developers who need to build colour schemes quickly and export them directly into code. Choose a palette size from 2 to 8 bars, edit each colour visually, by hex code, by RGB sliders, or with the eyedropper, then copy the result as CSS custom properties, Tailwind config, SCSS variables, JSON design tokens, or a high-resolution PNG. Every colour is processed locally in your browser.
The tool supports both manual palette building and automatic generation from colour harmony rules, so you can fine-tune every bar individually or generate a complete scheme from a single base colour in one click.
How the Palette Generator Works
The palette displays as a horizontal strip of colour bars with rounded outer corners — the visual style used by Tailwind, Material, and Radix. Each bar shows its hex code at the bottom, with automatic text contrast so the code stays readable on both light and dark colours. Click the hex pill to copy it directly; click the bar to select it for editing.
The edit panel reveals a native colour picker, a hex text input, RGB sliders, and an eyedropper button. It also shows the nearest CSS named colour (for example, ~ navy) and the WCAG contrast ratio of the colour against both white and black — useful for checking text accessibility before exporting.
Palette Sizes from 2 to 8 Colours
Not every project needs the same palette size. A brand identity might use five colours; a UI theme might use nine. The generator supports 2, 3, 4, 5, 6, and 8 bars. When you increase the count, new colours are added automatically by advancing the hue of the previous colour by 30° — a natural analogous extension. When you decrease the count, extra bars are removed. You can also delete the selected bar individually to fine-tune the count.
Generate Palettes from Colour Harmony Rules
Switch to Harmony mode and pick a base colour and a rule. The generator produces a mathematically balanced palette using standard colour theory:
Complementary — the base colour plus its 180° opposite. High contrast, ideal for accents. Analogous — the base plus hues at ±30°. Harmonious and low contrast. Triadic — three colours spaced 120° apart. Vibrant and balanced. Split-complementary — the base plus the two neighbours of its complement at ±150° and ±210°. Tetradic / Square — four colours spaced 90° apart. Shades and Monochrome — the same hue at five lightness levels from 88% down to 20%.
If the palette size is larger than the harmony's natural count, the generator cycles through the hue offsets again with a slight shift, preserving the underlying rule.
Eyedropper — Sample Any Colour on Your Screen
The eyedropper button uses the native EyeDropper API, supported in Chrome 95+, Edge 95+, and Opera 81+. Click it, and your cursor becomes a sampler — click any pixel on your screen to load that colour into the currently selected bar. The API is not yet available in Firefox or Safari; in those browsers the button is disabled with an explanatory tooltip, and all other features work identically.
Export to Every Common Format
Once the palette is ready, export it as CSS custom properties (--color-1: #061524;), Tailwind config (ready-to-paste colors.palette block), SCSS variables ($color-1: #061524;), JSON design tokens, a plain list of hex codes, CSV (index + hex), or a shareable URL with the palette encoded as query parameters. Each format has Copy and Download buttons.
Download as High-Resolution PNG
The Download palette as PNG button renders the strip on a 2× retina canvas at 400 pixels per bar and 700 pixels high, with hex codes overlaid in auto-contrast pills. The result is a clean, presentation-ready image suitable for client proposals, brand guides, documentation, or social media.
Recent Palettes, URL Sharing, and Lock
Every palette you build is saved to a recent-items list — the last 5 palettes appear as clickable colour chips above the tool. A Share link button encodes the current palette in the URL, so you can bookmark or send it to a teammate; opening the link restores the exact palette. Any bar can be locked with the padlock icon, excluding it from Shuffle all — useful for anchoring brand colours while exploring variations.
Private, Fast, and Free
All palette processing runs locally in your browser. No colour, no palette, and no usage data leaves your device. Recent palettes and preferences are stored in your device's local storage only. The tool has no sign-up, no rate limit, and no watermark.
Frequently Asked Questions
How do I generate a color palette?
What harmony rules does the generator support?
Can I export the palette to CSS, Tailwind, or SCSS?
--color-1: #XXXXXX;), Tailwind config (ready colors.palette block), SCSS variables ($color-1: #XXXXXX;), JSON design tokens, plain list, CSV, and a shareable URL that encodes the palette as query parameters.Kya yeh color palette generator free hai?
Kya mera data kahin upload hota hai?
Shareable link aur recent palettes kaise use karein?
#cpg-<encoded> format) — jise bookmark ya share kar sakte hain. Link kholne par wahi palette automatically restore ho jayegi. Lock icon se kisi bhi colour ko shuffle se protect kar sakte hain.