ProToolBox

Random colors for layouts and quick picks

Choose saturation and lightness (or Vivid, Pastel, Deep), then Generate random color. You get a swatch plus HEX, rgb(), and hsl(). Copy HEX or Copy CSS. No signup—runs in your browser.

Random color controls and results

New hue every click; saturation and lightness stay yours.

1 Saturation & lightness · 2 Generate · 3 Swatch & codes · 4 Copy HEX or CSS

Your result

Tip: 70% saturation and 50% lightness reads bold on screens; softer fills need lower saturation or higher lightness. Each run picks a new hue 0–359; inputs clamp to 0–100.

Presets:

Colors stay in this tab until you copy them out. Nothing uploads.

Tap Generate random color for the swatch, HEX, rgb() and hsl(), a quick text-on-fill hint, and links to tweak the color elsewhere.

Next: Palette · Random string · All generators · All tools

  • Random hue is computed in this tab—no color API round trip
  • Saturation and lightness clamp to 0–100
  • Copy HEX or CSS as plain text into design tools or code

When to use it

Need a fresh accent without picking hue by hand? You set saturation and lightness; the tool rolls HEX, rgb(), and hsl() next to a big swatch.

  • Wireframes and mockups that need non-gray variety
  • Trying CSS variables before you lock a palette
  • Showing how HSL saturation and lightness feel on a random hue

For real text on color, run a contrast checker—this is not an audit tool.

Save this page if you reach for random colors often.

Why it stays simple

You only move saturation and lightness, then generate. The large HEX and copy buttons keep the loop short: tweak, roll, paste.

How it works

  1. Set saturation and lightness (0–100%) or a preset.
  2. Click Generate random color for a new hue 0–359°; we show HSL, rgb(), and HEX.
  3. Use Copy HEX or Copy CSS (color + background-color).
  4. Treat the suggested text color as a hint only.

Privacy: Colors are calculated in your browser. We do not receive your inputs or outputs for this step.

FAQ

  • Is each hue new? Yes—every generate picks a fresh integer 0–359 with your saturation and lightness (clamped 0–100).
  • Why three formats? HEX pastes everywhere; rgb() and hsl() match how apps and CSS expect color.
  • Can I ship the suggested text color? Check contrast yourself first.
  • Phones? Yes—the layout stacks and the result panel stays easy to read.

Bookmark for quick access.

Tools in this category