Skip to main content
Back to Colors generators

Colors

Random Color with CSS Code

Used by developers, writers, and creators worldwide.

A random color generator with CSS code saves the conversion work every frontend developer runs into: you pick a color, then need it in three different formats for three different contexts. This tool generates a fully random color and outputs hex, RGB, and HSL representations in one click. Choose a single format or grab all three at once using the format selector. Hex pastes straight into Figma or a design file. RGB is ready for rgba() transparency work. HSL maps directly to lightness and saturation adjustments, making it the right choice when you're writing dynamic color functions. No manual conversion, no separate picker needed.

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 Format selector and choose hex, RGB, HSL, or 'all' depending on what your project requires.
  2. Click the Generate button to produce a random color and display all selected CSS representations.
  3. Preview the color swatch to visually assess whether the color suits your use case before copying.
  4. Click the copy icon next to the format you need to put the CSS-ready value on your clipboard.
  5. Paste directly into your stylesheet, design tool, or Tailwind config — no reformatting required.

Use Cases

  • •Seeding a CSS custom property into a :root block during rapid component prototyping
  • •Grabbing an HSL base color before writing a JavaScript function that shifts lightness programmatically
  • •Supplying a hex value to Tailwind's arbitrary value syntax, e.g. bg-[#a3f2c1]
  • •Generating random background colors for placeholder card components in a Storybook story
  • •Picking a one-off accent color to test in Figma before committing to a design token

Tips

  • →Keep the format set to 'all' during early exploration, then switch to a single format once you know which you need.
  • →When the generated color looks close but too dark or bright, note the HSL hue value and adjust only the lightness in your editor.
  • →HSL output is the safest base for CSS calc() tricks — for example, calc(var(--h) + 180deg) gives you the complementary hue automatically.
  • →Paste generated hex values into Figma's color picker to check how they look against your existing brand palette before committing.
  • →If you need a muted, professional tone, regenerate until the HSL saturation falls below 40% — highly saturated randoms can feel jarring in UI contexts.
  • →Use the CSS custom property output inside a scoped selector (not just :root) to test a color isolated to one component without affecting the rest of the page.

FAQ

when should I use HSL instead of hex or RGB in CSS?

Use HSL when you need to adjust a color programmatically — lightening, darkening, or desaturating only requires changing one value. Hex is more portable for design tools and brand guidelines, while RGB is the go-to when you need alpha transparency via rgba().

how do I use a generated color as a CSS variable

Copy the output line and paste it inside a :root { } selector in your stylesheet, then reference it anywhere with var(--color). This makes a global color change a single edit and fits neatly into a design token workflow.

will a random color pass WCAG contrast requirements

Not reliably — random colors carry no guarantee of meeting contrast thresholds against a given background. After generating a color, run it through a contrast checker before using it for text or interactive elements. Mid-range HSL lightness values (roughly 30–70%) are the most likely to fail against both black and white text.