Random Color Generator with Presets and HSL Control
This random color generator creates colors instantly and lets you steer the result instead of leaving it to pure chance. Pick a style preset or fine-tune the hue, saturation, and lightness ranges, and every color comes with ready-to-copy HEX, RGB, and HSL values.
Generate a single color for a detailed look, or spin up to 100 colors at once in a grid. Lock the swatches you like while you reshuffle the rest, save favorites that persist between visits, and export your colors as CSS variables. It is built for web designers, UI/UX and graphic designers, and developers who just need usable color values fast.
How to Use the Random Color Generator
Choose a preset
Pick Any, Pastel, Vivid, Dark, Light, Muted, or Neon to set the overall color style. Each preset adjusts the HSL ranges for you.
Set how many colors
Click 1, 5, 10, or 20, or type any number from 1 to 100 in the custom field. One color shows a large preview; more colors appear in a grid.
Generate colors
Click Generate or press Space to create a fresh set. Open the Advanced panel any time to drag the hue, saturation, and lightness handles for precise control.
Copy or save what you like
Click any HEX, RGB, or HSL value to copy it, tap the heart to add a favorite, or use Copy All to grab every current color as CSS variables.
Features
Color Presets
Seven built-in styles — Any, Pastel, Vivid, Dark, Light, Muted, and Neon — set the right HSL ranges with a single click.
HSL Range Sliders
Drag dual handles to set hue (0–360°), saturation (0–100%), and lightness (0–100%) for precise, repeatable results.
Multi-Color Generation
Generate from 1 to 100 colors at once — a large single preview or a quick-copy grid of swatches.
Color Locking
In grid view, lock the colors you want to keep and regenerate the rest to build a palette one swatch at a time.
Favorites System
Save colors you love with the heart icon. Favorites are stored in your browser and stay there across sessions.
HEX, RGB & HSL Formats
Each color shows all three formats. Click any value to copy it straight to your clipboard.
CSS Variables Export
Use Copy All or export your favorites to get a ready-to-paste :root block of CSS custom properties.
Keyboard Shortcut
Press Space to generate a new set of colors instantly without reaching for the mouse.
Frequently Asked Questions
How does a random color generator work?
Each color is picked at random from the hue, saturation, and lightness ranges you set. Choosing a preset or moving the HSL sliders narrows those ranges, so the result is random but always within the style you want. Click Generate or press Space for a new set.
What color formats are supported (HEX, RGB, HSL)?
Every color is shown in three formats: HEX (for example #FF5733), RGB (rgb(255, 87, 51)), and HSL (hsl(14, 100%, 60%)). Click any value to copy it to your clipboard.
How do I generate many random colors at once?
Click the 1, 5, 10, or 20 buttons, or type any number from 1 to 100 in the custom field next to them. A single color shows a large preview with all formats, while multiple colors appear in a grid with quick-copy HEX values.
Can I get random pastel, vivid, or neon colors?
Yes. The Pastel, Vivid, and Neon presets each apply their own saturation and lightness ranges — soft and light for pastels, bold and saturated for vivid, and glowing high-saturation tones for neon. Dark, Light, and Muted presets cover the rest of the spectrum.
How do I keep some colors while changing others?
When you generate more than one color, each swatch has a lock icon. Lock the colors you want to keep, then generate again — the locked colors stay put while the rest are reshuffled. Click the lock again to unlock.
Can I save colors for later?
Yes. Click the heart icon on any color to add it to your favorites, which are saved in your browser and waiting when you return. Because they live in local storage, favorites can be cleared if you wipe browser data or use private mode — so export the ones you want to keep.
How do I export colors as CSS variables?
Click Copy All to copy the current colors as a :root block of CSS custom properties such as --color-1: #FF5733;. For saved colors, use the export icon in the favorites section to copy them in the same format.
Is my data private?
Yes. All color generation happens entirely in your browser, and your favorites are stored locally on your device. Nothing is sent to any server.
No comments yet. Be the first to comment!