Skip to main content
Back to Colors generators

Colors

Random Color with All Formats

Used by developers, writers, and creators worldwide.

A random color generator with all formats solves a small but persistent annoyance: you get one color and immediately need it in three notations. This tool outputs HEX, RGB, and HSL side by side so you can paste the right format into CSS, Figma, or a config file without a separate converter. The style selector — Any, Bright, Dark, Light, or Muted — steers the randomness toward colors that actually fit your context, whether that's a saturated chart series or a soft editorial background. HEX is the go-to for static brand colors in CSS. RGB plugs straight into Figma, Photoshop, and canvas-based JavaScript. HSL is what you reach for when building a design system where hue stays fixed but lightness shifts across variants. All three appear at once, so you pick whatever your stack expects.

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. Open the Color Style dropdown and select Any, Bright, Dark, Light, or Muted depending on your project's tone.
  2. Click Generate to produce a random color displayed in HEX, RGB, and HSL formats alongside a color preview.
  3. Identify which format your tool requires — CSS file, Figma color picker, or JavaScript variable.
  4. Click the copy icon next to the relevant format (HEX, RGB, or HSL) to copy it to your clipboard.
  5. If the color isn't quite right, click Generate again — the style filter keeps results within your chosen range.

Use Cases

  • •Pasting HSL values into CSS custom properties for a dark-mode theming system
  • •Grabbing RGB output to drop into Figma or Photoshop color pickers without manual conversion
  • •Generating Muted background candidates for editorial article cards or sidebar UI
  • •Seeding random-color variables in a JavaScript or Python data visualization prototype
  • •Picking Bright chart-series colors in D3.js or Chart.js without eyeballing HEX codes

Tips

  • →Use HSL output when building theme systems: hold the hue constant and adjust the lightness value for hover and active states.
  • →Dark style colors work well as text-on-white but test them at small font sizes — dark doesn't always mean high enough contrast for WCAG AA.
  • →Generate several Muted colors in a row and compare their HEX codes; they often make cohesive multi-color backgrounds without clashing.
  • →Paste the RGB values directly into CSS `color-mix()` to blend with white or black — faster than calculating tints manually.
  • →If you need a palette, generate 5–8 colors with the same style selected; shared lightness and saturation ranges create visual cohesion automatically.
  • →For data visualization, use Bright style and check that consecutive generated hues are at least 30° apart in HSL — closer hues become hard to distinguish in charts.

FAQ

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

HEX is a compact six-character shorthand (e.g. #3a7bd5) that works everywhere in CSS and HTML. RGB defines each color by red, green, and blue channel values from 0 to 255, which maps directly to canvas APIs and design tools. HSL expresses hue (0–360°), saturation, and lightness — making it much easier to programmatically adjust brightness or vividness without touching the underlying hue.

which color format should I actually use in my stylesheet

Use HEX for static brand or token colors — it's concise and universally supported. Reach for HSL when building theme-driven or component-variant systems, since you can shift lightness with a CSS variable while the hue stays fixed. RGB is the practical choice when your JavaScript, WebGL, or design tool expects channel integers directly.

what do the Bright, Muted, Dark, and Light style filters actually do

Each style constrains the saturation and lightness ranges in HSL while leaving the hue unpredictable. Bright gives you high saturation and punchy midtones — good for CTAs and data highlights. Muted pulls back saturation for dusty, editorial tones. Dark targets low-lightness values for dark-mode UI testing. Light produces pale or pastel results suited to backgrounds and low-emphasis elements.