Generate a colour palette
Generate harmonious colour palettes from one base colour: complementary, analogous, triadic and more, with shades and CSS variables. Free tool.
- Files never leave your device
- Free, no sign-up
- No watermark
About Color Palette Generator
Turn one colour into a full, harmonious palette using proven colour theory. Pick a base colour and choose complementary, analogous, triadic, split-complementary or other harmony rules, then explore lighter and darker shades of each colour. Click a swatch to copy its HEX value or export the whole palette as CSS custom properties for your design system.
How to use Color Palette Generator
- 1
Pick a base colour.
- 2
Choose a harmony type such as complementary or triadic.
- 3
Explore the shades.
- 4
Copy colours or export CSS variables.
Why use this tool
- Several colour harmony rules.
- Shade scales for each colour.
- Click to copy HEX values.
- Export as CSS custom properties.
- Runs in your browser.
Frequently asked questions
It pairs colours opposite each other on the colour wheel for strong contrast.
Analogous palettes feel calm and cohesive; complementary accents make calls to action stand out.
Paste them into :root and reference them with var(--name) throughout your stylesheet.
Yes. Test text and background pairs in Color Contrast Checker.
No. Everything is processed in your browser tab. Nothing you type or paste is sent to CodeMites or any other server.
Yes. There is no account, no watermark and no usage limit. The tool runs in your own browser, so there is no server cost to charge you for.
Yes. It runs in any modern browser on Android and iOS as well as on Windows, macOS and Linux, with nothing to install.
Yes. The Color Palette Generator gives you plain CSS, so it works in stylesheets, CSS modules, styled-components or inline styles in any framework.
Yes. Anything you create with this tool is yours to use in personal and commercial work, with no attribution required.
Related tools
All CSS & Design tools →- Color ConverterConvert colours between HEX, RGB and HSL in real time.
- Color Contrast CheckerCheck text and background colour contrast against WCAG AA and AAA with a live preview and suggested fixes for failing pairs.
- Extract Colors from ImageExtract the dominant colours from any image as copyable HEX and RGB values to build palettes for brands and websites.
- CSS Gradient GeneratorCreate linear and radial CSS gradients visually: pick colours, add stops, set the angle and copy the code.
- Box Shadow GeneratorDesign CSS box shadows visually with offsets, blur, spread, colour and multiple layers, then copy the code.
- Text Shadow GeneratorCreate CSS text-shadow effects such as glow, outline and 3D with up to five layers and presets.