UtilibyWritten by the Utiliby editorial team · Last updated October 15, 2026 · Rules and formulas reviewed October 2026
What this free online color palette generator does
A good colour palette is the quickest way to make a design look deliberate. This free online color palette generator creates sets of two to ten colours in a click, lets you lock the ones you like, and keeps generating around them until the whole set works. You can start from nothing and explore, or start from a brand colour and build a harmonious scheme around it.
It goes further than a strip of swatches. A live preview shows your palette on a mock web page with a navigation bar, headline, buttons and cards. An accessibility matrix reports the WCAG contrast of every text and background pair. And an export panel writes CSS variables, SCSS, a Tailwind config, JSON, SVG, CSV and PNG, with a shareable link that rebuilds your exact palette. Everything runs in your browser.
How to generate and refine a colour palette
- Pick a scheme. Random is best for inspiration. Analogous, complementary and triadic give structure. Pastel, vivid, neon, earthy and dark set a mood.
- Set the number of colours. Five is a good starting size.
- Press Generate or the spacebar until something catches your eye.
- Lock favourites. Locked colours stay put while the rest change.
- Refine. Reorder with the arrows or fine tune a swatch with Edit.
- Check and export. Review the preview and contrast table, then copy or download the code.
Use Undo and Redo to step through earlier palettes if the best one slipped past. To begin with your own colour, tick Start from my colour and choose a base.
Colour schemes and when to use them
| Scheme | How it is built | Feel | Good for |
|---|---|---|---|
| Analogous | Neighbouring hues | Calm, harmonious | Backgrounds, wellness, nature |
| Monochromatic | One hue, many lightness levels | Clean, elegant | Minimal sites, dashboards |
| Complementary | Opposite hues | High energy | Calls to action, sports |
| Split-complementary | A hue and the two beside its opposite | Lively, softer than complementary | Illustration, marketing |
| Triadic | Three evenly spaced hues | Playful, balanced | Children’s products, games |
| Tetradic | Four hues in two opposite pairs | Rich, complex | Data charts, brands with range |
| Pastel | High lightness, low chroma | Soft, friendly | Baby, beauty, stationery |
| Vivid and neon | High chroma | Bold, techy | Posters, gaming, accents |
If you want to see these relationships on an actual wheel, use the Color Wheel. To fine tune a single colour, use the Color Picker.
How the palettes are generated
Colours are generated in OKLCH, a colour space designed so that equal changes in lightness and chroma look equal to people. That is why generated palettes feel balanced: a vivid yellow and a vivid blue sit at sensible lightness levels instead of one dominating. Hue offsets for each scheme come from the colour wheel, lightness is spread across the palette, and chroma is kept inside a range that suits the mood. Any colour that falls outside the range of ordinary screens is brought back by reducing chroma while keeping hue and lightness, so you always get a real sRGB HEX code.
A seeded random generator makes each press repeatable internally, which is why undo works and why the shareable link can recreate a palette exactly.
From swatches to a working design system
A palette becomes useful when each colour has a job. A practical set of roles is background, surface, text, primary accent and secondary accent. The Live preview tab assigns these automatically, using the lightest colour for the background and the darkest for text, and shows how they combine. If the text colour is too close to the background, the preview switches to black or white so you can still read it, which also hints that the palette needs a stronger dark.
- Keep one dominant colour, a supporting colour and one accent, the familiar 60-30-10 pattern.
- Use accents sparingly for buttons, links and highlights.
- Use neutrals for most of the page and let colour direct attention.
- Name variables by role, not by colour, so you can re-theme later.
Accessibility and contrast in palettes
A beautiful palette fails if people cannot read it. WCAG 2 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and interface components. The Accessibility tab lists the ratio for every pair, so you can pick text and background combinations that pass and avoid the ones that do not. As a rule, put your darkest colour on your lightest, and test accent colours before using them for small text.
Also remember that around one in twelve men and one in two hundred women have some colour vision difference. Do not use colour alone to show meaning such as errors or success, and try the Color Blind Test and the Color Contrast Checker for a closer look.
Exporting your palette to CSS, SCSS, Tailwind, JSON and more
| Format | What you get | Use it for |
|---|---|---|
| CSS variables | --color-1: #0369a1; in :root | Any website or app |
| SCSS | Variables plus a map | Sass projects |
| Tailwind | A colors block for tailwind.config.js | Tailwind CSS sites |
| JSON | HEX, RGB, HSL and name per colour | Design tokens, scripts, apps |
| SVG and PNG | An image of the swatches | Mood boards, slides, sharing |
| CSV | A table of values | Spreadsheets, documentation |
The print button produces a one-page palette sheet with swatches, codes, contrast ratios and the CSS, which is handy for a client or a team.
Using a palette for branding, websites and presentations
For a website, export CSS variables and apply them by role. For a logo or brand, treat the palette as a starting point, then test it in black and white, on dark and light backgrounds and at small sizes. For slides, use the lightest colour for backgrounds and the darkest for text, and keep accent colours for charts. For charts, choose tetradic or vivid palettes so categories are easy to tell apart, and add labels so colour is never the only clue. If the palette will be printed, remember that screen colours may shift and ask your printer for a proof.
Tips for better palettes
- Start from one colour you already love and generate around it.
- Generate many times and lock only the good colours.
- Keep at least one very light and one very dark colour.
- Check the contrast table before finalising.
- View the palette on a phone, a laptop and in dark mode.
- Save the shareable link so you can return to it.
For soft, frosted interface panels over your palette colours, try the Glassmorphism CSS Generator, and to extract a palette from a photo use the Image Color Picker.
Limits and responsible use
The generator is a creative aid. It cannot know your brand, audience or culture, and colours carry different meanings in different places. Palettes are made from mathematical rules and chance, so two people can receive similar results. Names are the nearest CSS colour names, not trademarked colour matching systems. Always test contrast and view the colours on real devices before you rely on them.
Frequently asked questions
What is a colour palette generator?
It is a tool that creates sets of colours that work well together. You press a key or button, get a new palette, keep the colours you like and export the codes for your design or website.
How do I generate a colour palette?
Choose a colour scheme, set how many colours you want and press Generate or the spacebar. Each press creates a new palette. Lock any colour to keep it while the others change.
How do I create a palette from one colour?
Tick Start from my colour, enter or pick your base colour and choose a scheme such as analogous, complementary or triadic. The first swatch is your colour and the rest are built around its hue.
What do the colour schemes mean?
Analogous uses neighbouring hues, complementary uses opposites, split-complementary and triadic use three spaced hues, tetradic uses four, and monochromatic uses one hue in different lightness levels. Pastel, vivid, neon, earthy and dark set the mood.
How many colours should a palette have?
Most interfaces work well with five: a light background, a dark text colour, a main colour and two accents. You can create from two to ten colours here.
How do I lock a colour?
Press Lock under the swatch. Locked colours stay in place when you generate again, so you can build a palette one colour at a time.
Can I reorder or edit colours?
Yes. Use the arrows to move a colour and Edit to change it with the native colour picker. The preview, contrast table and exports update at once.
Can I save or share my palette?
The page address changes with each palette, so you can bookmark it or copy the shareable link in the Export tab. You can also download the palette as a file or PNG.
What formats can I export?
CSS variables, SCSS variables and map, a Tailwind config snippet, JSON with HEX, RGB, HSL and names, an SVG image, a CSV table and a plain HEX list, plus a PNG image.
How do I use the palette in CSS?
Copy the CSS export into your stylesheet and use the variables, for example background: var(--color-1). Rename the variables to match their role, such as --brand or --text.
How does the live preview work?
The tool assigns roles by lightness and vividness: the lightest colour becomes the background, the darkest the text and the most colourful ones the accents. It then shows a sample page so you can judge the palette in use.
How do I check if my palette is accessible?
Open the Accessibility tab. It shows the WCAG contrast ratio for every text and background pair and marks AAA, AA, large-text-only or fail. Choose pairs that reach at least 4.5 to 1 for body text.
Are the colours really random?
They are produced from a seeded random generator using perceptual OKLCH colour maths, which keeps lightness and vividness in a pleasing range. Every press uses a new seed.
Why do some colours look similar?
Random mode picks independently, so two colours can land close together. Use a scheme such as complementary or analogous for more control, or lock the good ones and regenerate.
Can I use these palettes commercially?
Colours themselves cannot be owned, and you can use the generated codes freely. A palette is a starting point, so check that your final brand colours are distinctive and clear of conflicts.
Does it work on a phone?
Yes. On narrow screens the palette stacks into rows. There is no spacebar on most phones, so use the Generate button.
Is this palette generator free and private?
Yes. It is free online with no sign-up, nothing is uploaded and there is no limit on palettes.
Sources and further reading
- Björn Ottosson, A perceptual color space for image processing (Oklab and OKLCH).
- W3C, CSS Color Module Level 4.
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2, contrast requirements.
- Tailwind CSS documentation, Customizing colors.
- MDN Web Docs, Using CSS custom properties.
- Wikipedia, Color scheme.
Sources were consulted in October 2026. Standards and rules can change, so always check the official page for your situation.