Skip to main content
Back to Colors generators

Colors

Random Color with Shades Generator

Used by developers, writers, and creators worldwide.

A random color with shades generator gives you a complete luminance scale built around one randomly chosen hue — from the palest tint to the deepest shade — in seconds. No manual lightness tweaking in a color picker, no guesswork. This is the same approach Tailwind CSS, Material Design, and Ant Design use: each color as a numbered scale, not a single hex code. You control two things: the number of steps in the scale (default 7, which maps cleanly to backgrounds, borders, body text, and headings) and the output format — HEX for CSS and Figma, RGB for channel-level control, or HSL when you want to reason about lightness directly. The result is copy-paste ready for CSS custom properties, Tailwind's `extend.colors` config, or any token-based design system.

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 Shades' input to how many steps you want — 7 for a standard scale, 9 or 11 for finer granularity.
  2. Select your output format: HEX for most design tools, RGB for alpha compositing, or HSL for manual adjustments.
  3. Click the generate button to produce a random base color with its full tint-to-shade scale.
  4. Review the scale visually and click generate again if the hue doesn't suit your project.
  5. Copy individual values or the full list directly into your CSS variables, Tailwind config, or Figma color styles.

Use Cases

  • •Building a 7-step Tailwind CSS color scale and pasting it straight into `extend.colors` in `tailwind.config.js`
  • •Exploring random accent hues for a Figma component library before committing to a brand color
  • •Generating HSL shades to feed into a contrast-ratio script that flags WCAG failures automatically
  • •Prototyping dark-mode surface tokens — light steps for backgrounds, dark steps for text and borders
  • •Populating a Storybook design-token file with a full tint-to-shade range for a new UI kit

Tips

  • →Set steps to 9 and skip the first and last values — the remaining 7 map almost directly onto Tailwind's 100–700 range.
  • →Generate in HSL format first to quickly spot whether a hue loses saturation too early in the lighter steps, which looks muddy in UI backgrounds.
  • →Run the generator three to five times in a row, note the hues you like, then re-enter those hue values manually in HSL to build a full multi-color palette with consistent saturation.
  • →The lightest two shades work well as page backgrounds and card surfaces; the darkest two work well as heading text and icon fill colors.
  • →When building a dark mode, reverse the scale — use step 1 for text and step 9 for the background surface, rather than generating a separate dark palette.
  • →Avoid using the exact midpoint shade for interactive elements like buttons; it often lacks enough contrast against both white text and dark text — go one step darker instead.

FAQ

how many shades should a design system color palette have

Most production design systems use 7 to 11 steps. Seven covers the core cases — very light background through very dark text. Eleven steps, like Tailwind's 50–950 scale, adds finer control for disabled, hover, pressed, and focus states. Start with 7 and expand only when component complexity demands it.

what's the difference between a tint and a shade in a color scale

A tint mixes the base color toward white, raising its lightness. A shade mixes it toward black, lowering lightness. This generator places the base hue at the midpoint and distributes steps evenly in both directions, so you get one continuous scale you can map directly to UI roles like surface, border, and text.

hex vs hsl output format — which should I use for CSS

Use HEX for Figma color styles, CSS hex literals, and most design token formats — it's the most universally accepted. Use HSL when you need to inspect or manually adjust lightness per step, or when you're building a token pipeline that reasons about color properties. Use RGB only when you need alpha-channel compositing via `rgba()` in CSS.