What this tool does
Why use a random generator
Palette mode and the color wheel
Locking, replacing and changing the number of colors
Sync the page background
Copying code and downloading files
The live UI preview
Features explained
Random palettes of 2 to 10 colors
The Generate Random button or the spacebar creates a new palette. This is the fastest way to explore. Colors are fully random, so some combinations will not work well together.
Lock and replace single colors
Lock a color to keep it through the next generation. Use the refresh icon to change just one swatch. This lets you build a palette step by step.
HEX, RGB and HSL values
Click a value on a card to copy it. The card shows hue and saturation for HSL. The copied HSL value also includes lightness.
Color wheel view
Shows where each color sits by hue and saturation. It is useful for seeing whether your colors are bunched together or spread around the wheel.
Code snippets for four formats
CSS variables, a Tailwind colors object, a React array and Flutter/Dart constants. The Tailwind snippet is a fragment to paste into your own config, not a complete file.
SVG download and JSON copy
The SVG is a simple strip of swatches with HEX labels. The JSON copy contains the full data for each color: HEX, RGB, HSL and lock state.
Page background sync and UI preview
Two quick ways to see the palette in context: the full page background, and a small button, card and badge mockup.
What can you use it for?
Starting a new design
Generate palettes until one color feels right, lock it, and build the rest of the palette around it.
Setting up a stylesheet or theme
Copy the colors as CSS variables or a Tailwind snippet and paste them straight into your project.
Flutter and React projects
Get Dart Color constants or a JavaScript array of HEX strings without converting by hand.
Sharing a palette with a designer
Download the SVG strip or copy the JSON so the colors and their HEX codes can be sent along.
Teaching and practice
Use the wheel to see how hue and saturation relate to a color's position, and compare random colors visually.
Tool information
| Tool type | Random color palette generator |
|---|---|
| Number of colors | 2 to 10 (starts at 6) |
| Color values shown | HEX, RGB, HSL |
| Color wheel | Yes, hue and saturation only |
| Code snippets | CSS variables, Tailwind, React array, Flutter/Dart |
| File download | SVG (palette.svg) |
| Data copy | JSON |
| Keyboard shortcut | Spacebar generates a new palette |
| Palette saving | No, the palette is lost when you reload the page |
| Contrast checking | No |
| File upload | None, there is no input file |
| Processing | In your browser |
Benefits
- Generate and copy colors without uploading anything.
- The spacebar shortcut makes it quick to try many palettes.
- Lock and single-color replace let you refine a palette instead of starting over.
- Code for four formats is ready to copy.
Limitations
- Colors are completely random. The tool does not use harmony rules, so combinations can clash.
- Palettes are not saved. Reloading or closing the page loses the current palette, so copy or download what you want to keep.
- The tool does not check contrast or accessibility. The preview is only a visual sample.
- The only file download is SVG. There are no PNG, PDF or Adobe swatch downloads.
- The JSON copy is the tool's own data format. It is not a ready-made Figma tokens file.
- The spacebar shortcut is not available on touch screens without a keyboard. Use the button instead.
- The wheel shows hue and saturation only, not lightness.
How the tool handles your data
The tool generates colors, draws the wheel, builds the code snippets and creates the SVG file in your browser. There is no file upload, and the tool's own code does not send your palette to a server. Copying uses your browser's clipboard.
Privacy
The tool does not store your palettes in the browser either. This statement covers the tool itself, not other scripts the rest of the website may load.
Tips
- Lock your main color first, then keep generating to find accent colors.
- Switch on page background sync to see the first color at full size.
- Increase the number of colors to 10 to explore, then lower it once you have found a few good ones.
- Copy your palette before reloading the page, because it is not saved.
- Before using a palette for text, check contrast with a dedicated contrast checker.
Frequently asked questions
Do I need an account to use it?
No. The tool has no sign-in step. Open the page and start generating.
Are the colors really random?
Yes. Each color is picked at random from all HEX values. The tool does not follow any harmony rule, so some palettes will look good and some will not.
How many colors can I generate?
From 2 to 10 at a time. A new palette starts with 6 colors.
How do I keep a color I like?
Click the lock icon on its card. Locked colors stay in place when you generate a new palette. The refresh icon replaces only that one color.
Which formats can I copy?
Single colors can be copied as HEX, RGB or HSL. The whole palette can be copied as CSS variables, a Tailwind colors snippet, a React array or Flutter/Dart constants. It can also be copied as JSON.
Can I download the palette as a file?
Yes, as an SVG file named palette.svg. It shows one swatch for each color with its HEX code. There are no PNG, PDF or Adobe swatch downloads.
Does it check text contrast or accessibility?
No. The preview at the bottom is only a visual sample. Use a contrast checker before choosing text and background colors.
Is my palette saved if I reload the page?
No. The palette is not stored. Copy the codes or download the SVG before you leave the page.
Does it work on a phone?
The Generate Random button, locks and copy buttons work by touch. The spacebar shortcut needs a keyboard.