Loading
Preparing your generator page
We are loading content and tools so everything is ready to use.
We are loading content and tools so everything is ready to use.
Generate random color palettes in HEX, RGB, and HSL for design sprints, brand refreshes, UI prototyping, and art prompts. Pick color style and output format, set batch size up to 24, review swatch cards with all three formats, then copy numbered results in one click.
Also try the Color Code Generator, CSS Gradient Generator, and more in Randomizer tools.
Last updated: May 24, 2026 · Published: 2026-04-07 · Updated: 2026-05-24
Max palette size: 24 colors
Pick options and generate colors.
Configure options and click generate
A random color generator produces HEX, RGB, and HSL values so designers, developers, and artists can skip manual eyedropper picking. It is built for palette inspiration and quick prototyping—not as a contrast auditor, brand guideline enforcer, or asset export pipeline.
This Muxgen tool runs in your browser: set color-count (default 5), pick Color style and Output format, generate swatches, and copy. generateOneColor samples HSL within style-specific ranges; no account and no server upload for your picks.
Three simple steps from controls to copy-ready color values.
Enter color-count (default 5, max 24) for how many swatches to generate in one batch.
Choose Color style from 5 options and Output format from 3 options (HEX, RGB, or HSL).
Click Generate color or Generate colors, review swatch cards with all three formats, then Copy all for design tools, chat, or code.
Every control in the random color generator component.
Number input min 1 — max 24. Default 5. Clamps on change; status reports when you exceed 24.
5 toggle buttons from COLOR_STYLE_FILTER_OPTIONS — default Any. Sets COLOR_STYLE_HSL_RANGES for saturation and lightness.
3 toggle buttons — default HEX. Controls swatch band label and Copy all via getColorDisplayValue.
Static text Max palette size: 24 colors — matches COLOR_MAX_BATCH cap in generateColors.
Polite region reporting count clamps, style/format updates, and post-generation status from generateColors.
Primary button — plural label when count > 1; calls generateColors({ count, style }) and populates swatch cards.
Colored band shows active format; footer lists HEX, RGB, and HSL for every result. textColorClassForHex picks readable band text.
Ghost button — numbered list export via formatColorCopyList(results, format); Copied! feedback for two seconds.
Saturation and lightness ranges from COLOR_STYLE_HSL_RANGES in random-color-generator-data.ts. Hue is always 0–359 for every style.
| Style | Saturation | Lightness | Hue |
|---|---|---|---|
| Any | 35–95% | 25–80% | 0–359 |
| Pastel | 35–65% | 75–90% | 0–359 |
| Vibrant | 75–100% | 45–60% | 0–359 |
| Dark | 35–85% | 15–35% | 0–359 |
| Light | 25–75% | 72–92% | 0–359 |
Formats from COLOR_FORMAT_ORDER — examples use the first sample color from sampleColorResults().
| Format | Label | Example |
|---|---|---|
| HEX | HEX | #7EC8E3 |
| RGB | RGB | rgb(126, 200, 227) |
| HSL | HSL | hsl(195, 65%, 69%) |
How Color style and Output format choices shape your palette workflow.
Broad HSL bands — saturation 35–95%, lightness 25–80% — good starting point for mixed palettes.
Soft tints — saturation 35–65%, lightness 75–90% — nursery, spring branding, gentle UI backgrounds.
High saturation 75–100%, mid lightness 45–60% — posters, hero accents, social graphics.
Low lightness 15–35% — dark mode surfaces, cinematic themes, moody brand directions.
High lightness 72–92% — airy layouts, minimal dashboards, soft marketing pages.
Default export — paste into CSS variables, Tailwind config, and design tokens. Swatch band and Copy all show #RRGGBB values.
Channel-based rgb(r, g, b) strings for graphics APIs, canvas work, and tools that expect decimal channels.
hsl(h, s%, l%) strings aligned with generation logic — useful when tuning hue families after a random batch.
Where copied color lists land and which Muxgen pages complement this one.
Paste HEX or RGB values into color styles, variables, and component libraries after Copy all.
Drop generated HEX or HSL into stylesheets, CSS modules, or theme config files.
Share numbered palette lists for design challenges, art streams, or team mood-board rounds.
Archive palette batches in project wikis, brand guides, and sprint notes.
Color Code Generator converts between formats — this page creates random palettes with style-controlled HSL ranges.
CSS Gradient Generator builds gradients — use this random color tool first, then paste picks into gradient stops.
Built for design workflows—style-controlled HSL, triple-format swatches, and copy-ready output.
Color values appear immediately—no accounts, queues, or server round-trips.
Any, Pastel, Vibrant, Dark, Light—each with dedicated HSL saturation and lightness bands.
HEX, RGB, HSL—switch display and copy without regenerating.
Every card shows active format on the band plus HEX, RGB, and HSL in the footer for quick comparison.
Generate 1–24 colors per run for palette exploration and theme drafts.
Copy all via formatColorCopyList — e.g. "1. #7EC8E3\n2. #FFB347\n3. #2D3436".
Generation runs in the browser—style, format, and results are not uploaded to Muxgen.
Random color values support design, development, and creative work.
Break decision fatigue by generating accent, background, and border color candidates for interfaces.
Test random palettes when brainstorming brand refreshes, mood boards, and campaign directions.
Grab random HEX, RGB, or HSL values for component themes, Storybook variants, and CSS variables.
Limit palettes to Pastel or Vibrant and pair with What to Draw Generator for creative constraints.
Kick off sprints with a shared random palette before wireframes and hi-fi mockups.
Teachers assign style-specific batches so students compare HSL ranges and harmony rules.
When designers and teams search for palette ideas throughout the year.
Generate five to eight colors in Any or Vibrant style at sprint kickoff—copy numbered lists into team channels.
Run Dark and Light styles side by side to explore mood without committing to a single direction.
Filter to Pastel style for soft pinks, mints, and lavenders suited to seasonal marketing.
Use Dark style for cozy, low-light palettes or Vibrant for festive accent colors on dark backgrounds.
Vibrant batches produce bold hues for reels, carousels, and thumbnail A/B tests.
Start January with Light style palettes for clean SaaS landing pages and annual report layouts.
Terms tied to style ranges, format export, and batch logic.
any | pastel | vibrant | dark | light — selects COLOR_STYLE_HSL_RANGES saturation and lightness bands.
hex | rgb | hsl — controls getColorDisplayValue and formatColorCopyList export.
Samples hue 0–359, style-range saturation/lightness, returns { hex, rgb, hsl }.
Loops generateOneColor up to min(count, 24) and returns colors plus status string.
Numbered export — e.g. "1. #7EC8E3\n2. #FFB347\n3. #2D3436".
Per-style saturationMin/Max and lightnessMin/Max used by generateOneColor; hue is always full wheel.
A generator can start the palette; your design system and contrast checks carry it forward.
Generate a batch in Any style first; switch to Pastel, Vibrant, Dark, or Light once direction emerges.
Use 3–6 colors for design systems; reserve 24-color runs for broad exploration.
Paste into Figma, VS Code, or Notion right after generating so results are not lost on refresh.
Validate text and UI contrast with accessibility tools before shipping random picks to production.
Use HEX for CSS tokens, RGB for canvas APIs, HSL when you plan hue-family tweaks after generation.
Note which Color style produced a batch so teammates can reproduce the HSL range intent.
Habits that pair with Generate color and Copy all.
Default Any style with 5 colors is a balanced starting point.
Sample picks like #7EC8E3, #FFB347, #2D3436 show breadth before you commit to a style.
Toggle HEX, RGB, or HSL to match your toolchain—the same swatches update display and Copy all instantly.
Scroll the Color style HSL reference below to plan Pastel versus Vibrant batches before live generation.
Every swatch footer lists all three formats—copy individual lines when pasting into mixed toolchains.
Copy numbered lists into a doc and pick one random accent color per sprint day for practice.
5 styles, 3 formats, color-count up to 24, swatch cards with HEX RGB HSL, numbered copy, HSL ranges, aria-live status, Max palette size, privacy, and defaults.
Explore more tools in the directory.
Pair random palette picks with word prompts for naming, branding, and creative briefs.
Combine generated colors with drawing prompts for illustration practice sessions.
Convert and inspect color codes after you pick favorites from random swatches.
Turn random palette picks into CSS linear and radial gradients for prototypes.
Add mood adjectives to palette rounds for brand and art direction workshops.
Customizable spinning wheel for color challenges, dares, and design game rounds.