Random Color Generator
Generate random single colors or harmony-aware palettes with HSL constraints, locked colors, export to CSS/HEX/RGB/HSL, and palette history.
Sobre esta ferramenta
Generate beautiful random colors and palettes with precision control over the randomness. Single Color mode generates one random color and displays it as a large full-width swatch with its HEX, RGB, and HSL values. Palette mode generates 2–10 colors at once, each shown as a tall swatch column. Set HSL constraints — hue range (0–360°), saturation range (0–100%), and lightness range (0–100%) — to limit generation to specific tones, such as pastel colors (high lightness, low-mid saturation) or earthy tones (hue 20–60°). Harmony-aware generation creates palettes where the colors are mathematically related: complementary (opposite hues), analogous (adjacent hues), triadic, split-complementary, or tetradic. Lock individual swatches by clicking the padlock icon — locked colors stay fixed while unlocked ones regenerate on each shuffle. The history panel remembers your last 20 generated palettes as mini thumbnail strips you can click to restore. Export the current palette as a CSS hex list, a JavaScript/TypeScript array of hex values, an array of RGB objects, an HSL string list, or as CSS custom properties. Press Space or click Shuffle to generate a fresh palette instantly.
Como usar
- 1 Choose Single Color or Palette mode and set the desired palette size (2–10 colors).
- 2 Optionally restrict the hue, saturation, and lightness ranges using the sliders.
- 3 Select a harmony type (Random, Complementary, Analogous, Triadic, etc.).
- 4 Press the Shuffle button or hit the Space key to generate new colors.
- 5 Click the padlock icon on any swatch to lock it before the next shuffle.
- 6 Choose an export format and click Copy to get CSS, JS array, or HSL values.
How the generator builds colors
This tool works in the HSL color model — Hue, Saturation, Lightness — because HSL maps to how people actually think about color, far better than raw RGB does. Hue is an angle from 0 to 360 degrees around the color wheel (0 is red, 120 is green, 240 is blue); saturation is 0 to 100 percent, running from gray to vivid; lightness is 0 to 100 percent, running from black to white. To generate a color the tool picks a random value within the range you set for each of these three axes, then converts the result to a hex code for display. Because you control the ranges, "random" never has to mean "garish" — you decide the territory the randomness is allowed to explore.
Why HSL constraints matter
Constraining the three ranges is what turns noise into a usable palette. Narrowing each axis pins the output to a consistent mood:
| Goal | Hue | Saturation | Lightness |
|---|---|---|---|
| Pastels | any | 30–60% | 80–92% |
| Earthy tones | 20–60° | 30–60% | 30–55% |
| Vivid brand colors | any | 80–100% | 45–60% |
| Muted / desaturated | any | 10–30% | 40–70% |
The default ranges (saturation 40–90, lightness 30–70) deliberately avoid both washed-out and near-black results, which is why fresh shuffles tend to look balanced out of the box.
Color harmony, with the actual math
When you choose a harmony other than "Random", the tool picks one base hue and then places the other colors at fixed angular offsets around the wheel, so the palette is mathematically related rather than arbitrary:
- Complementary adds the opposite hue,
base + 180°— maximum contrast, good for accents. - Analogous steps in 30-degree increments (
base + 30°, +60°…) — neighbouring hues that feel calm and cohesive. - Triadic uses three hues 120 degrees apart — balanced and lively.
- Split-complementary uses
base + 150°andbase + 210°— the contrast of complementary with less tension. - Tetradic uses four hues 90 degrees apart — a rich, four-color scheme.
Within a harmony, only the hues are fixed; saturation and lightness are still drawn randomly from your ranges, so every shuffle gives a new variation on the same relationship.
A worked example
Set Palette mode with 3 colors, choose Triadic, and shuffle. The tool picks a random base hue inside your hue range — say 210 (a blue) — then adds 120 and 240 degrees to get 330 (magenta) and 90 (yellow-green). Each of those three hues gets a random saturation and lightness from your ranges, producing three coordinated swatches like #3d7fd6, #d63d9e, and #7fd63d. Lock the blue you like by clicking its padlock, then shuffle again — the blue stays put while the other two regenerate around it, letting you build a scheme around one fixed brand color.
Locking, history, and export
Clicking a swatch's padlock freezes that color; on the next shuffle every unlocked swatch gets a new value while locked ones are preserved. The History panel keeps your last 20 palettes as clickable thumbnail strips, and because it is saved to your browser's localStorage, those palettes survive a page reload. When you are happy, export in whichever format your project needs:
- HEX list — one
#rrggbbper line. - Hex array — a JavaScript/TypeScript array like
["#3d7fd6", …]. - RGB —
rgb(61, 127, 214)lines. - HSL —
hsl(210, 65%, 54%)lines. - CSS custom properties —
--color-1: #3d7fd6;ready to drop into a stylesheet.
Single color versus palette mode
Switch to Single Color mode when you need just one value — a background tint, a placeholder, a quick reference — and the generator shows one large swatch with its HEX, RGB, and HSL values together, so you can copy whichever format your context expects without a separate conversion step. Palette mode generates between 2 and 10 colors at once and is where the harmony and locking features earn their keep. The two modes share the same HSL constraints, so a saturation and lightness range you dialled in for a single accent color carries straight over when you expand to a full palette.
Tips and common mistakes
- Press Space to shuffle. It is faster than clicking when you are hunting for a starting point.
- Don't ignore contrast. A harmonious palette is not automatically accessible — check text-on-background pairs against WCAG contrast ratios separately before shipping.
- Constrain lightness for backgrounds. Very light or very dark page backgrounds need a tighter lightness range than accent colors.
- Lock before you shuffle. If you find one perfect color, lock it first, or the next shuffle will replace it.
All color generation, conversion, and history run entirely in your browser; nothing is sent to a server.
Perguntas frequentes
Gere paletas de cores harmoniosas — complementares, triádicas, análogas e split-complementares — a partir de qualquer cor base.
Gere paletas de cores harmoniosas a partir de uma cor base usando regras de complementaridade, analogia, tríade e outras harmonias.
Crie belos gradientes CSS de múltiplas paradas visualmente com paradas de arrastar e soltar.
Converta cores entre HEX, RGB, HSL, HSV e CMYK — com prévia em tempo real.