Random Color Generator

Most random color tools have one annoying habit. You click, you get a row of colors, one of them is genuinely nice, and the next click wipes it out along with the ones you didn't want, which this one fixes. Lock the color you like, hit Generate, and only the unlocked swatches reroll. So you keep the good and replace the rest, one color at a time, until the whole set feels right. Then copy or download the finished palette as CSS variables, JSON, or a Tailwind block, all in your browser, with no sign-up and no daily limit.

Every swatch shows its HEX code and its rgb() value, and either one copies with a single click. Designers use it to find a fresh starting point, developers use it to fill charts and mockups with distinct colors, and plenty of people just want a fast answer to "what color should this be." The lock turns it from a slot machine into a real palette builder. The export gets that palette out of the tab and into your stylesheet, config file, or design app without retyping a single hex digit.

1. Pick how many. Use the count dropdown for anywhere from 1 to 12 colors. It starts at 5, a comfortable size for a small scheme. Go higher when you want more options side by side.
2. Choose a style (optional). Leave it on "Any color" for the full range, or switch to Pastel for soft light tints or Bright for bold saturated colors. The style only changes the range the tool rolls inside, and it applies the next time you generate.
3. Roll. Click Generate, or just tap the Space bar. A fresh set appears right away, and a starter set is already on screen when the page loads.
4. Lock the keepers. Click the small lock icon in the corner of any swatch you like. Locked swatches get a highlighted border and stay put through every reroll.
5. Reroll the rest. Generate again. Only the unlocked colors change, so your locked picks are safe. Repeat until the set clicks.
6. Copy or export. Click a HEX or rgb() line to copy that one value, or use the export box below the swatches to grab the whole palette at once.
7. Share or bookmark. The Share button copies a link that carries your exact palette, locks and all. Bookmark it to come back later, or send it to someone who opens the same colors.

This changes how you use a random generator entirely. Without a lock, a random generator is pure chance: you keep rolling and hoping the whole set lands at once, which almost never happens. Locking a color lets you build the palette up deliberately instead.

Say you roll five and the third one, a deep teal like #1f6f6a, is exactly the base you wanted, so you lock it. Now every Generate keeps that teal and rerolls the other four around it. Find a warm accent in the next batch? Lock that too, so now two are held and three keep rolling. You converge on a palette anchored by a color you actually chose, instead of five that happened to show up together.

The Space bar makes this quick, so once a swatch or two is locked, you can tap Space over and over and watch the rest cycle without reaching for the mouse. Locked colors also survive a change in the count, so you can lock three, bump the count to 8, and fill the extra slots without touching your anchors.

There is one trade-off to know about, the lock lives in this session only, and there's no saved history of past palettes. That's the trade for a tool that stores nothing and works offline. If a set is good, copy it or hit Share for a link you can bookmark before you roll again.

Copying one hex at a time is fine for a single accent. For a real palette, the export box under the swatches hands you the whole set in one move, already shaped for the file your project expects instead of a raw dump you have to clean up yourself. Pick a format tab, then Copy or Download.

• HEX list gives you a plain list of codes, one per line, ready to paste into a design tool or a spreadsheet.
• CSS variables writes a :root block with --color-1, --color-2, and so on, so you can drop it straight into a stylesheet and reference the colors by name.
• JSON returns an array with both the HEX and the rgb() string for each color, which is handy for seeding data or feeding another tool.
• Tailwind prints a palette object you can paste into your tailwind.config.js theme.

The Download button saves the same text as a file, named for the format, so CSS comes down as palette.css, JSON as palette.json, and the plain list as a .txt. Nothing is uploaded to do it, since the file is written on your device from the colors already on screen.

Random generation optimizes for variety, not harmony, so some batches feel cohesive and some clash. The lock is how you steer it. Keep the one or two colors that read right, reroll the rest, and you nudge a chaotic set toward something intentional. Narrowing to Pastel or Bright helps too, since a shared range gives the batch a common mood.

Readability is the other thing random color won't check for you. A pale yellow behind white text is practically unreadable. If a generated color sits behind anything someone has to read, check the contrast. The target is WCAG AA, a ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. The extremes look after themselves, since a very light swatch obviously wants dark text on it, but the mid-tones are where a guess goes wrong, so those are the ones to measure.