Skip to main content
Back to Colors generators

Colors

Random Color with RGB & HSL Values

Used by developers, writers, and creators worldwide.

This random color with RGB & HSL values generator outputs every color in three formats at once — hex, RGB, and HSL — so you never need a separate converter. CSS developers, Figma users, and design system engineers constantly switch between formats: one tool wants a hex code, another wants hsl(), and a token file needs rgb(). This page collapses that into a single click. You can generate up to a custom count of colors and filter by brightness range — Light, Dark, Mid, or All. That filter matters when you need pastels for accessible backgrounds or deep shades for dark-mode text, not just any random output. All three values appear together, ready to copy.

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 random colors you want generated at once.
  2. Choose a Brightness Range from the dropdown to filter for light, dark, vivid, or all-range colors.
  3. Click the generate button to produce a batch of colors, each showing hex, RGB, and HSL values.
  4. Click directly on any individual format value to copy it to your clipboard for immediate use.
  5. Regenerate as many times as needed until you find colors that suit your project's needs.

Use Cases

  • •Copying HSL values directly into a Tailwind CSS config color palette object
  • •Generating Light-range pastels for WCAG-friendly background swatches in Figma
  • •Populating CSS custom property stubs with hex, RGB, and HSL simultaneously for a design token file
  • •Filtering to Dark-range colors when prototyping dark-mode text and border values in Storybook
  • •Finding vivid Mid-range accent colors for D3.js data visualization chart series

Tips

  • →Use the 'Light' brightness filter when generating background colors to avoid accidentally producing low-contrast surfaces.
  • →Generate a batch of 8 with 'Vivid' range when building a data viz palette — vivid colors distinguish chart series clearly.
  • →When working in CSS, copy the HSL value and store hue as a separate variable so you can derive tints and shades without extra tools.
  • →For dark-mode design, filter to 'Dark' and look for colors with HSL lightness between 15% and 35% — deep enough to feel dark, bright enough to show texture.
  • →If you need rgba() with a specific opacity, take the RGB output and add a fourth value: rgb(123, 45, 200) becomes rgba(123, 45, 200, 0.6).
  • →Compare hex values across generated colors — if two hex codes share the same first two characters, those colors have nearly identical red channel values and will harmonize on warm-toned designs.

FAQ

what's the difference between hex, RGB, and HSL in CSS

Hex is a compact 6-character code like #3a7bd5 — the universal shorthand in stylesheets and brand guidelines. RGB expresses red, green, and blue channels from 0 to 255, which pairs naturally with rgba() for transparency. HSL — hue (0–360°), saturation (%), lightness (%) — is the most intuitive for adjustments: to darken a color, just lower the lightness value without touching the other two.

which CSS color format should I use in a design system

HSL is the strongest choice for design systems because it makes tonal scales trivial: fix the hue and saturation, vary lightness from 10% to 90% for a full range. Use hex for static brand colors in config files like Tailwind's palette object. Reserve rgb() or rgba() for cases where you need alpha transparency or are computing channel values dynamically with CSS custom properties.

what does the brightness range filter do in this color generator

It restricts output to a specific lightness band. Light produces pastels and near-whites suited for backgrounds; Dark outputs deep shades for text or dark themes; Mid targets vivid, punchy colors in the middle of the lightness scale. All removes the filter and generates colors across the full spectrum.