Numbers

Random Hex Color Code Generator

This random hex color code generator produces hex color values instantly, with optional filters for brightness and letter case — giving you more control than a plain random color picker. Each hex code is a six-character string prefixed with #, encoding red, green, and blue channels from 00 to FF. You can generate up to any count you need in one click, ready to drop straight into CSS, Figma, Tailwind config files, or any design tool that accepts hex values. The brightness filter is where this tool earns its keep. Set it to light to get soft pastels suitable for backgrounds and cards, choose dark for deep, saturated tones that work well in dark-mode UIs or print designs, or pick mid-tone for balanced hues that hold contrast against both white and black text. Leaving it on any gives you the full spectrum — useful when you want genuine randomness for data visualisation or generative art. The uppercase toggle lets you match your codebase conventions without a find-and-replace step. Teams using CSS custom properties often standardise on uppercase (#FF5733), while Tailwind and some design tokens prefer lowercase (#ff5733). Generate your palette in the format your project already uses. Because you set the count yourself, you can generate exactly the number of swatches a component needs — six categorical colors for a chart, twelve shades for a brand palette audit, or a single accent color when you just need inspiration. The output is a clean list you can copy and paste wherever you need it.

How to Use

  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

  • •Populating CSS custom properties with a quick random palette
  • •Generating dark-mode background and surface colors for a UI
  • •Creating six distinct categorical colors for a data visualisation chart
  • •Seeding a Figma color styles library with light pastel swatches
  • •Testing contrast and readability across random mid-tone hues
  • •Building mood boards by generating unexpected color combinations
  • •Prototyping brand color options before committing to a palette
  • •Supplying random hex values to a generative art or p5.js sketch

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

What is a hex color code?

A hex color code is a six-character hexadecimal string prefixed with # that encodes red, green, and blue channel values. Each pair of characters (e.g. A3, F2, C1) represents one channel on a scale from 00 (none) to FF (full intensity). So #FF0000 is pure red, #000000 is black, and #FFFFFF is white.

How do I use hex codes in CSS?

Paste the hex code directly as a color value anywhere CSS accepts a color. Common uses: color: #A3F2C1; for text, background-color: #1A2B3C; for fills, and border: 1px solid #E0E0E0; for strokes. You can also define them as custom properties: --accent: #FF5733; then reference them with var(--accent).

What does the brightness filter actually do?

It constrains the generated RGB channel values to a specific luminance range. Light mode keeps all channels high (producing pastels and near-whites), dark mode keeps them low (deep, muted tones), and mid-tone targets the middle range. This means every hex code in your output will look visually consistent in terms of how light or dark it appears.

What is the difference between uppercase and lowercase hex codes?

Both are valid and identical in color value — #ff5733 and #FF5733 render exactly the same. The choice is purely stylistic or team-convention. CSS is case-insensitive for hex colors, but many linters and design token schemas enforce one style. Use this toggle to match your project's existing convention and avoid noisy diffs.

Can I generate a hex palette for Tailwind CSS?

Yes. Generate your colors, set uppercase to no to match Tailwind's convention, then paste them into your tailwind.config.js under the colors key. For example: colors: { primary: '#a3f2c1', accent: '#ff5733' }. Use the count field to generate one hex per semantic role you need (primary, secondary, muted, etc.).

How many hex color codes can I generate at once?

You control the count with the number input. Generate as few as one (handy for a single accent color) or as many as you need for a full design system or chart palette. There is no practical upper limit — just set the number and click generate again if you want a fresh batch.

Are the generated hex colors truly random?

They are pseudo-random, generated by your browser's Math.random(). Within the selected brightness band, each channel value is chosen independently, so you won't get predictable patterns or duplicate-heavy outputs on typical batch sizes. If you want a genuinely distinct set, regenerate until the swatches look sufficiently varied to your eye.

Can hex codes be converted to RGB or HSL?

Yes. A hex code like #A3F2C1 converts directly: split into pairs A3, F2, C1, then convert each from hexadecimal to decimal to get rgb(163, 242, 193). For HSL, use a browser DevTools color picker or a CSS function like hsl() alongside a converter. Most design tools (Figma, Sketch, Adobe XD) accept hex and display all formats simultaneously.