Explore five colors while keeping the slots you like

SimplyUtils Random Color Generator makes five independent HSL samples for visual exploration. Use a range such as Warm tones or Pastel tones, lock a useful slot, and regenerate the rest. Each card shows its rounded HEX and RGB values alongside the original HSL sample. The generator provides candidate colors; it does not choose semantic roles or guarantee a balanced, accessible design.

A practical iteration for a prototype

Open Pastel tones to get five light samples. Choose a candidate background and press its Lock button.
Switch to Slate shades. The locked background stays exactly the same while the other four slots change to slate samples.
Copy one unlocked HEX value and try it as a foreground in your prototype. Test the actual foreground/background pair before using it for text.
Randomize swatches to explore more options. Unlock the retained slot when you want it included again.
Copy CSS variables or the JSON array to carry the current five-slot order into your project, or download the PNG swatch sheet for a visual reference.

A locked pastel slot remains pastel even after you switch to Slate shades; the selected mode applies only to unlocked slots. Locking all five keeps the entire palette unchanged. Random draws can repeat a color, and no seed, global Spacebar command or saved palette history is supplied.

The exact ranges behind the modes

The following bounds are inclusive integer HSL values. Each unlocked slot is sampled independently with Math.random(). These are inspiration ranges, not Golden Ratio sequences or complementary-color algorithms.

Mode	Hue	Saturation	Lightness
Warm tones	0–59° or 320–359°	70–89%	50–64%
Vivid tones	0–359°	85–99%	50–59%
Pastel tones	0–359°	40–59%	80–89%
Slate shades	210°	5–14%	15–84%
Broad HSL range	0–359°	0–99%	0–99%

Warm tones chooses between its two hue bands with equal probability, then chooses a hue within that band. The combined 100 possible warm hues therefore do not all have the same probability. Slate shades uses a fixed blue-gray hue rather than discovering a random monochromatic base. HSL sampling is not uniform sampling of RGB space; rounding can also make distinct samples produce the same HEX value. Math.random is sufficient for this design exploration and is not a security-token source.

What the label contrast means

The card chooses whichever of opaque black or white gives the higher contrast against its rounded HEX swatch. It computes the WCAG relative luminance by linearizing sRGB channels, then uses the ratio of lighter luminance plus 0.05 to darker luminance plus 0.05. For pure red #FF0000, black gives about 5.25:1 and white gives about 4.00:1, so this calculation selects black. That example illustrates why a simple brightness threshold can choose the less readable label.

The displayed ratio applies to the card label's black or white text, not a pair of generated colors. It does not verify transparency, a photograph behind text, hover states or your entire page. The WCAG contrast-minimum guidance describes 4.5:1 for ordinary text and 3:1 for large text, along with applicable exceptions. Check the actual foreground and background colors in your design separately. No whole-page AA or AAA certificate is provided here.

Copy and export the current order

HEX, RGB and HSL buttons copy the value displayed on that card. CSS export uses five names, --color-primary-1 through --color-primary-5, with an RGB comment after each declaration. For example, a red slot would produce --color-primary-1: #FF0000; /* rgb(255, 0, 0) */. These names identify positions; the tool does not decide which one should be a brand primary, warning or background.

JSON export is an array of five HEX strings in slot order. Both code panels are copied as text; separate CSS and JSON file downloads, Tailwind class matching and Sass output are not available. Download PNG produces a 1000 × 200 image with five 200-pixel swatches and HEX labels. Check your browser's download list to confirm the file was saved; a download request is not proof that saving completed.

Troubleshooting and processing details

If clipboard access is denied, the tool shows an error and retains the displayed values for manual copying. Retry after granting browser permission or select the code panel text. If canvas drawing or PNG creation is unavailable, a visible export error replaces the success status. If generation fails, stale colors and exports are hidden until a successful retry.

Generation, HEX conversion, contrast calculation and PNG drawing run in your browser. No tool-processing API receives your palette, and this tool does not persist colors or locks between visits. Copying writes your selected output to the clipboard; downloading creates a local image. The surrounding website can load analytics, advertisements and other assets under the privacy policy, so these processing details do not promise a network-free page.