Skip to main content
Back to Numbers generators

Numbers

Random Hex Color Code Generator

Used by developers, writers, and creators worldwide.

A random hex color code generator saves time whenever you need a palette fast — no design tool open, no decision fatigue. Paste the output straight into CSS, a Tailwind config, Figma color styles, or a p5.js sketch. You control three things: how many colors (default is 8), whether the output is uppercase or lowercase hex, and a brightness filter that constrains results to light pastels, dark tones, or mid-tones. That last filter is the real differentiator. Instead of rolling the full spectrum and discarding unusable values, you get a visually consistent set on the first click — ready for backgrounds, charts, dark-mode surfaces, or generative art without manual culling.

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 count field to the number of hex color codes you need for your project.
  2. Choose a brightness filter — light for pastels, dark for deep tones, or any for the full range.
  3. Select uppercase yes or no to match the letter-case convention your codebase or design tool uses.
  4. Click Generate to produce your hex color list and review the swatches visually.
  5. Copy the hex codes individually or as a full list and paste them into your CSS, config file, or design tool.

Use Cases

  • •Generating 6 distinct categorical colors for a D3.js or Chart.js data visualisation
  • •Seeding a Tailwind config with lowercase mid-tone hex values under the colors key
  • •Populating a Figma color styles library with 12 light pastel swatches for a card UI
  • •Producing dark-mode surface and background hex codes for a CSS custom property sheet
  • •Supplying random hex values to a p5.js generative art sketch for varied fill colors

Tips

  • →For chart palettes, set brightness to mid-tone so all categorical colors hold similar visual weight against a white background.
  • →Generate a batch of 20 light colors, then manually pick the 6-8 that feel most distinct — faster than adjusting hue by hand.
  • →Pair a dark palette with a separately generated light palette to build a matched dark-mode and light-mode token set at once.
  • →If you need accessible contrast, run your generated hex codes through a WCAG contrast checker immediately — brightness-filtered outputs are not guaranteed to meet AA ratios.
  • →Regenerate several times with uppercase set consistently, then compare batches side by side in a design tool rather than judging colors from the hex strings alone.
  • →For generative art projects, use any brightness with a high count (50+) to feed arrays of random colors into canvas or SVG fills without repetition.

FAQ

how does the brightness filter work for hex color generation

The filter constrains the RGB channel values to a specific luminance range before encoding them as hex. Light keeps all channels high, producing pastels and near-whites; dark keeps them low for deep, muted tones; mid-tone targets the middle band so colors hold contrast against both white and black text. Every code in your output will be visually consistent — no need to discard outliers manually.

uppercase vs lowercase hex codes — does it actually matter

CSS is case-insensitive, so #FF5733 and #ff5733 render identically in every browser. The difference is purely convention: many CSS linters and design token schemas enforce one style, and mixing cases causes noisy diffs in version control. Use the uppercase toggle to match your project's existing standard and skip the find-and-replace step.

can I convert these hex codes to rgb or hsl for css

Yes — split the hex into three pairs and convert each from hexadecimal to decimal: #A3F2C1 becomes rgb(163, 242, 193). For HSL, browser DevTools color pickers convert on the fly, and Figma or Sketch display all formats simultaneously when you paste a hex value. You can also use the CSS color-mix() or hsl() functions if you need programmatic conversion in your stylesheet.