Hex Color Generator
DesignGenerate random hex colour codes, RGB values, and HSL strings instantly. Filter by hue family or brightness. Free, fast, runs entirely in your browser.
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.
How to use this Hex Color calculator
- Select the Hue Family — choose a specific colour direction (Reds, Blues, Greens, etc.) or Any to draw from the full colour wheel.
- Select the Brightness — Light for pastel tones, Mid for vivid balanced colours, Dark for deep tones, or Any to span the full range.
- 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.
- Set the Number of Colours to how many you want — up to 20 per batch.
- Review the generated values in the output panel.
- 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
What is a hex colour generator?
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.
What is a hex colour code?
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.
What is the difference between hex, RGB, and HSL?
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.
What does the Hue Family filter do?
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.
What does the Brightness filter do?
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.
Can I get all three formats at once?
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.
How many colours can I generate at once?
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.
Are the generated colours suitable for UI design?
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.
How is this different from the Colour Palette Generator?
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.
Can I use these colours in Tailwind CSS or design tokens?
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.
Does the generator produce accessible colours?
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.
Is there any bias toward certain colours?
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.