Home›Generators›Design›Hex Color Generator

Hex Color Generator

Design

Generate random hex colour codes, RGB values, and HSL strings instantly. Filter by hue family or brightness. Free, fast, runs entirely in your browser.

Reviewed by the thecalcu.com team · Last updated July 7, 2026

What is a Hex Color?

A Hex Colour Generator produces random colour values, in hex, RGB, or HSL format, filtered by hue family and brightness level, ready to paste directly into CSS, design tools, or code. It bridges the gap between "I need a random blue" and picking an actual value: instead of spinning a full colour picker or generating purely random RGB values that often look muddy or near-black, you get vivid, usable colours within the range you specify.

The generator works in the HSL colour model internally, which makes hue and brightness constraints natural and precise. Hue is constrained to a named segment of the colour wheel (Reds, Blues, Greens, etc.); saturation is kept high (55–100%) to avoid dull, washed-out values; and lightness is constrained by the Brightness filter (light pastels, mid tones, or dark deep tones). The result is converted to whatever output format you choose.

For a harmonious palette, colours that work together as a set, use the Colour Palette Generator instead. This tool is better for generating a large pool of individual colour options to explore, or for seeding test data that includes colour fields.

Why Use a Hex Colour Generator?

Purely random RGB colour generation (Math.floor(Math.random() * 16777216)) produces values scattered across the entire colour space, which skews heavily toward dark, desaturated, or visually uninteresting colours, most of the space is taken up by near-greys and near-blacks. The result looks random, not colourful.

This tool generates in HSL, which lets it keep saturation high and brightness in a useful range before converting to your chosen output format. The result is a batch of genuinely colourful values that look like something a designer might pick, rather than noise from the RGB cube. For developers who need colour values for test data, data visualisation, or a UI prototype, this produces immediately usable results without opening a design tool.

Who Should Use This Generator?

Frontend developers who need a quick colour value for a prototype, a test component, or a background colour and don't want to open a full colour picker every time. Data visualisation engineers who need a set of distinguishable colours for chart series, map regions, or category labels, generate a batch filtered to mid brightness and pick the ones with the most visual separation. Designers exploring colour directions can generate a large batch within a hue family and a brightness level to quickly survey what that part of the palette looks like before committing to a base colour. QA engineers and data engineers seeding databases with colour-field test data need values that look like real design choices rather than random hex strings.

Pair with the Colour Palette Generator when you want colours that are harmonically related to each other rather than independently random.

What Insights Does the Hex Colour Generator Give You?

The three filters constrain the generation space so the results are useful by default. Hue Family picks a named arc of the colour wheel, useful when you're working within a brand palette that already defines a colour direction and you want to explore within that direction. Brightness applies a lightness constraint: Light (65–90%) produces pastels and near-white tones suitable for backgrounds and soft accents; Mid (35–65%) produces vivid, balanced tones that work well for UI components; Dark (10–35%) produces deep, rich tones for text, borders, and dark-mode contexts.

Output Format controls what you copy: Hex for standard CSS use, RGB for environments that need decimal channels, HSL for design token systems where tweaking lightness programmatically is important, or All Three when you need the same colour across multiple contexts.

How to use this Hex Color calculator

  1. Select the Hue Family, choose a specific colour direction (Reds, Blues, Greens, etc.) or Any to draw from the full colour wheel.
  2. Select the Brightness, Light for pastel tones, Mid for vivid balanced colours, Dark for deep tones, or Any to span the full range.
  3. Choose the Output Format, Hex for CSS use, RGB for decimal values, HSL for design tokens, or All Three to get all representations at once.
  4. Set the Number of Colours to how many you want, up to 20 per batch.
  5. Review the generated values in the output panel.
  6. Click the copy icon to copy all values, then paste them into your stylesheet, design tool, seed file, or wherever you need them.

Formula & Methodology

Generation works entirely in the HSL colour model:

1. Hue is picked from the range corresponding to the selected Hue Family. Each family covers a segment of the 0–360° wheel: Red wraps around 0° (345°–15°), Orange covers 15°–45°, Yellow 45°–75°, Green 75°–165°, Cyan 165°–195°, Blue 195°–255°, Purple 255°–315°, Pink 315°–345°. Any picks uniformly from 0°–359°.

2. Saturation is drawn uniformly from 55%–100%, keeping all generated colours vivid and avoiding the grey-brown range that dominates the lower saturation space.

3. Lightness is constrained by the Brightness setting: Light draws from 65%–90%, Mid from 35%–65%, Dark from 10%–35%, Any from 10%–90%.

4. The (h, s, l) triple is converted to (r, g, b) using the standard HSL-to-RGB formula, then encoded as hex if needed.

Math.random() is used throughout, colour generation is not a security-sensitive operation.

Frequently Asked Questions

A hex colour generator is a tool that produces random colour values in a format ready to paste directly into CSS, design tools, or code. Rather than picking a number blindly or spinning a colour wheel manually, the generator lets you narrow the search by hue family and brightness level, so each result is random but within a range that suits your design context.
A hex colour code is a 6-character string prefixed with # that encodes the red, green, and blue components of a colour in hexadecimal notation. For example, #FF5733 represents red=255, green=87, blue=51. Hex is the most widely used colour format in web development, it works in CSS, SVG, HTML attributes, and virtually every design tool.
Hex (#RRGGBB) and RGB (rgb(r, g, b)) represent the same information differently, both describe a colour as a mixture of red, green, and blue channels. HSL (hsl(h, s%, l%)) uses a different model: hue (the colour itself, 0–360°), saturation (how vivid it is, 0–100%), and lightness (how light or dark, 0–100%). HSL is more intuitive for designers because changing just the lightness value adjusts brightness without shifting the hue.
The Hue Family filter restricts generated colours to a segment of the colour wheel. Selecting Blues generates only colours in the blue portion of the HSL spectrum (roughly 195°–255°), while Greens covers 75°–165°. The Any option picks freely across the full 360° wheel. This lets you quickly generate a set of thematically consistent colours without manually adjusting a picker.
Brightness maps to the lightness dimension in the HSL model. Light generates pastel and near-white tones (lightness 65–90%), suitable for backgrounds and subtle accents. Mid generates balanced, vivid tones (35–65%) that work well for UI elements and call-to-action colours. Dark generates deep, rich tones (10–35%) suitable for text, headers, and dark-mode accents.
Yes. Select 'All three' from the Output Format dropdown and each colour entry will show the hex, RGB, and HSL representations on one line, separated by pipes. This is useful when you need to copy the same colour in multiple formats for different parts of your codebase.
Up to 20 at a time using the Number of Colours field. For a quick spot check, 3–5 gives you a comfortable set to evaluate. For seeding a design system, generating 10–20 in one batch lets you curate a shortlist from a larger pool.
Yes. The generator keeps saturation between 55% and 100%, which avoids the muddy, grey-leaning colours that pure random RGB generation tends to produce. Combined with the brightness filter, the output stays in the range of vivid, usable design colours rather than producing random values that happen to look dull or near-invisible.
The [Colour Palette Generator](/color-palette-generator/) creates harmonious sets of colours related by a single base hue, complementary, triadic, or analogous schemes, and is designed for picking a coherent palette for a whole project. This tool generates independent random colours filtered by hue family and brightness, which is better for exploring a large number of individual colour options or seeding a dataset with diverse colour values.
Yes. Copy the hex code and use it directly in your Tailwind config's `extend.colors` section or as a CSS custom property. For HSL-based design tokens (common in modern design systems), the HSL output format is ready to paste directly as the value of a CSS variable.
The generator does not check contrast ratios, it produces random colours within the specified hue and brightness range. If accessibility (WCAG contrast compliance) is a requirement, generate a batch, then check the candidates you like against a contrast checker with your intended background colour. Light tones work best for backgrounds, dark tones for text; mid tones may or may not meet contrast requirements depending on their pairing.
Each hue family covers a different arc of the HSL wheel, green covers a wider arc (90°) than cyan (30°), for example, so the Any mode will naturally produce more greens than cyans purely by probability. Within a selected hue family, hue, saturation, and lightness are each drawn uniformly from their respective ranges, so there is no bias within a family.
Also known as
random color generatorrandom hex codehex colour pickerrandom colour generatorhex code generator