Random Color Generator
Press space for a fresh palette. Pick a color harmony and a mood, lock the swatches you love and keep rolling the rest. Click any code to copy it.
Tip: press Space for a new palette. Locked colors stay put.
Text contrast
- Aa#264653White text 10.1 · Dark text 1.8AAA
- Aa#2A9D8FWhite text 3.3 · Dark text 5.4AA
- Aa#E9C46AWhite text 1.7 · Dark text 10.7AAA
- Aa#F4A261White text 2.1 · Dark text 8.7AAA
- Aa#E76F51White text 3.1 · Dark text 5.8AA
Recent palettes
Palettes you roll past appear here. Click one to bring it back.
- Drawing and painting challengesRoll three colors and make a sketch using only those. A classic way to break out of your usual palette.
- Design and branding ideasStart a moodboard, a UI theme or a logo exploration from a palette you would never have picked yourself.
- Developers and placeholdersGrab a random HEX code for a chart series, an avatar background or test data, ready as CSS variables.
- Crafts, nails and outfitsLet chance choose the yarn, nail polish, bead or outfit colors for today's project.
Make a palette you actually like
Choose a harmony and a mood
Random gives anything goes. Analogous and Monochrome feel calm, Complementary and Triadic have more punch. Pastel, Vivid, Muted and Dark set the overall tone.
Roll and lock
Press Generate or the space bar. When a swatch is right, lock it. The next rolls keep it and build the harmony around it.
Copy it out
Click a HEX, RGB or HSL value to copy it, copy the whole palette as CSS variables, or spin the colors on a wheel to pick one.
More than a random HEX code
Color harmonies explained
A harmony is a rule for choosing hues by their position on the color wheel. The generator picks a random starting hue, then places the other swatches using the rule, while the mood decides how saturated and how light they are.
| Harmony | Hue rule | How it feels | Good for |
|---|---|---|---|
| Analogous | Neighbours within about 20 to 30 degrees | Calm, natural, cohesive | Illustration backgrounds, landscapes, soft brands |
| Monochrome | One hue, several lightness steps | Clean and controlled | UI themes, data charts, minimal posters |
| Complementary | Opposite hues, 180 degrees apart | High energy, strong contrast | Calls to action, sports kits, pop art |
| Split complementary | One hue plus the two either side of its opposite, at 150 and 210 degrees | Lively but easier to balance | Character design, packaging |
| Triadic | Three hues 120 degrees apart | Playful and balanced | Kids' brands, games, infographics |
| Square | Four hues 90 degrees apart | Rich and varied | Patterns, festivals, multi-category charts |
| Random | Every hue independent | Surprising, sometimes clashing | Art challenges and breaking habits |
A classic rule of thumb for using a palette is 60-30-10: one dominant color for about 60 percent of the area, a secondary one for 30 percent, and an accent for the last 10 percent.
HEX, RGB and HSL: which code to copy
All three describe the same screen color. There are 16,777,216 possible HEX colors, because each of red, green and blue has 256 levels.
| Format | Example | What the numbers mean | Use it for |
|---|---|---|---|
| HEX | #2A9D8F | Red, green and blue as two hexadecimal digits each, 00 to FF | CSS, Figma, Canva, most design tools |
| RGB | rgb(42, 157, 143) | Red, green and blue from 0 to 255 | Code, Photoshop, image editing |
| HSL | hsl(173, 58%, 39%) | Hue in degrees, saturation and lightness in percent | Tweaking a color by hand, building tints and shades |
What the contrast badges mean
Every swatch writes its codes in white or near-black, whichever is easier to read, and shows the contrast ratio between the two. The grades follow the Web Content Accessibility Guidelines, WCAG 2.
- AAA, 7 to 1 or more: comfortable for body text, even for many people with low vision.
- AA, 4.5 to 1 or more: the usual minimum for normal-size text on websites and apps.
- AA large, 3 to 1 or more: fine for large text, about 24 pixels or 19 pixels bold, and for icons and button borders.
- Low, under 3 to 1: use the color for decoration or backgrounds behind other content, not for text.
Random color challenges for artists
- Three-color sketch: roll a three-swatch palette and draw anything using only those colors plus white.
- Limited palette landscape: lock one Muted color as your shadow, reroll the rest until the sky works.
- Character redesign: recolor a favourite character with a Triadic palette.
- Daily swatch study: one random single color a day, painted as five objects that could really be that color.
- Mood swap: paint the same scene twice, once with a Pastel roll and once with a Dark one.
- Speed round: 10 minutes per palette, press space for the next one, no rerolls allowed.
Frequently asked questions
How do I get a random HEX color code?
Choose Single under Colors and press New color, or the space bar. The HEX code is shown in large type. Click it to copy it, or click the RGB or HSL line instead.
How do I keep a color and change the others?
Press the lock button at the top of the swatch. Locked colors never change when you generate again, and harmonies like Analogous or Triadic are rebuilt around the first locked color.
What do AA and AAA on the swatches mean?
They are WCAG contrast grades for the text shown on that swatch. AA needs a ratio of at least 4.5 to 1 for normal text, AAA needs 7 to 1. AA large means the color only works for big text or icons.
Can I make random pastel colors?
Yes. Set Mood to Pastel for high lightness with gentle saturation. It works with every harmony, so Pastel plus Analogous gives a soft, matching set.
How do I use the palette in CSS or Figma?
Press Copy as CSS to get the palette as custom properties, such as color-1 to color-5, ready to paste into a stylesheet. Copy HEX list gives comma-separated codes that you can paste into Figma, Canva or Procreate one by one.
Why does the space bar not generate a new palette?
Space only rerolls when the focus is not on a button, link or text field, so that it can still press the focused button as usual. Click an empty part of the page and try again.
Is the color really random?
Yes. Hue, saturation and lightness are drawn with your browser's cryptographic random number generator, within the range set by the mood. Nothing is sent to a server.