Skip to main content
Back to Colors generators

Colors

Random Hex Color Palette Generator

Used by developers, writers, and creators worldwide.

A random hex color palette generator removes the blank-canvas problem that stalls early design work. Pick a count of 2 to 20 colors and a mode — Any, Light, Dark, or Vibrant — and you get a ready-to-use set of hex codes in seconds. Every value is in the six-character format accepted natively by CSS, Tailwind config files, Figma, Adobe XD, and Sketch. Mode matters more than most people expect. Light mode biases all three RGB channels high, giving you pastel-adjacent tones suited to backgrounds and large UI surfaces. Dark mode pulls values low for moody, deep palettes. Vibrant mode pushes one channel to the ceiling while keeping the others low, producing punchy accent colors that hold their own against neutrals.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Set the Number of Colors input to how many hex codes you want in the palette (try 6 for a standard design system).
  2. Choose a Color Mode — pick Light for pastels, Dark for deep tones, Vibrant for saturated accents, or Any for unconstrained results.
  3. Click Generate to produce the palette and review the color grid that appears.
  4. Click any individual hex code to copy it to your clipboard, then paste it into your CSS file, Figma fill field, or design tool.
  5. If the palette doesn't resonate, click Generate again — repeat until you find a combination worth refining.

Use Cases

  • •Seeding a Tailwind CSS theme extension with 6 randomized base color tokens before design-system work begins
  • •Generating 8-step vibrant palettes for D3.js or Chart.js data visualization scales where adjacent values need clear contrast
  • •Quickly sourcing dark-mode candidates for a developer portfolio before opening Figma
  • •Producing light-mode pastel swatches for Shopify product-page backgrounds without hiring a designer
  • •Creating punchy accent hex codes for Canva or Adobe Express social media templates

Tips

  • →Generate three separate palettes in Vibrant mode and combine the best accent from each into a single custom palette for richer variety.
  • →Use Dark mode with a count of 8 to build a gradient ramp — order the codes from lightest to darkest manually for a smooth progression.
  • →Pair a Light-mode palette background with one or two Vibrant-mode accents for a high-contrast UI that still feels airy.
  • →Test any generated palette against white and black text immediately — luminance differences that look fine in swatches can fail WCAG contrast ratios in real layouts.
  • →When generating palettes for data charts, use Any mode and regenerate until no two adjacent colors are too similar in hue; visual distinction matters more than aesthetic harmony here.
  • →Save promising palettes as CSS custom properties in a scratch file before moving on — it's easy to lose a good random result if you keep clicking Generate.

FAQ

how do I use generated hex codes directly in CSS or Tailwind

Paste any hex code as a CSS value — `background: #1d2b4f;` — or store it as a custom property: `--color-primary: #a3f2c1;`, then reference it with `var(--color-primary)`. In Tailwind, add the values under `theme.extend.colors` in your `tailwind.config.js` so the tokens become utility classes like `bg-primary`.

are randomly generated hex palettes actually harmonious or just random noise

Pure random palettes rarely achieve harmony on the first try, but constraining the mode significantly improves cohesion — all Vibrant or all Dark colors naturally share luminance characteristics. Generate 10 to 15 palettes, screenshot the most promising ones, and refine in Figma or Coolors rather than judging swatches out of context.

what's the difference between light, dark, vibrant, and any color mode

Any mode samples freely across the full RGB space for maximum variety. Light mode biases all three channels toward high values, producing pale tones ideal for backgrounds and surfaces. Dark mode does the opposite, favoring deep low-luminance colors. Vibrant mode maximizes one channel while keeping the others low, creating high-saturation hues that work well as accents or call-to-action colors.