random color generator

How to use the random color generator

  1. Pick a generation mode: Any, Light, Dark, Vivid, Pastel, Muted, Warm, or Cool.
  2. Set how many colors to generate (1-60) and the output format (HEX, RGB, HSL, or Tailwind arbitrary value).
  3. Click 'Generate palette' to see a grid of color swatches. Each tile shows its HEX code with contrast-aware text.
  4. Click any swatch to copy that single color, or use 'Copy all' to grab the whole palette as a newline-separated list.
  5. Grab the auto-generated CSS custom properties from the sidebar and paste them straight into :root.

When to use it

Use when brainstorming color palettes for a new brand, filling empty state charts with distinct swatches, generating mock avatar backgrounds, or exploring mood-appropriate colors for an interface. Mode control (Pastel, Vivid, Muted) narrows the randomness to a cohesive feel. Alternative: coolors.co is the dominant tool for palette exploration with more sophisticated locking and export options; this is faster when you just need disposable random colors for prototyping.

Frequently asked questions

What is a random color generator?
A tool that picks colors from the RGB or HSL space either fully at random or constrained to a style (pastel, vivid, dark, etc.). Useful for prototyping, seeding mock data, and brainstorming palettes.
Which random color generator mode should I use?
Pastel for soft UI backgrounds. Vivid for call-to-action buttons and highlights. Muted for editorial and photography-heavy sites. Light/Dark for theme-aware UIs. Warm/Cool when you want palette cohesion around a temperature.
How do I export the colors to CSS?
The sidebar auto-generates a :root { --color-1: #...; --color-2: #...; } block with your current palette. Copy it and paste into your stylesheet.
Can I generate Tailwind color classes?
Switch the output format to 'Tailwind arbitrary value' — the tool emits bg-[#hex] syntax. For named Tailwind classes (bg-blue-500 etc.), use Tailwind's official palette rather than random generation.
Are the generated colors accessible?
Not automatically. The tool shows a contrasting text color on each swatch so you can see the hex, but always check WCAG contrast ratios separately for body text vs. background combinations in your real UI.
Can I save or lock specific colors?
Not in this tool — it's optimized for fast brainstorming. For palette locking (keeping some swatches while re-rolling others), use coolors.co or a dedicated palette app.

Related tools

Last updated: 2026-04-25