Random Hex Color Code Generator

How to use

1. 1️⃣
   Choose your options above
2. 2️⃣
   Click Generate
3. 3️⃣
   Copy your result

Detailed instructions

1. Set the 'How Many Codes' field to the number of hex values you need in one batch.
2. Choose whether to include the # prefix based on where you will paste the codes — CSS needs it, some tools do not.
3. Select uppercase or lowercase to match your project's code style or design token conventions.
4. Click the generate button to instantly produce the full list of random hex color codes.
5. Copy individual codes or the entire list and paste directly into your CSS, design file, or script.

Use Cases

• •Seeding a generative art canvas in p5.js with a fresh batch of unpredictable fill colors
• •Populating CSS custom properties or Sass variables during early-stage design system exploration
• •Stress-testing a hex color validation function in Jest with varied, non-curated input values
• •Assigning distinct category colors to a Chart.js or D3 dataset without manually picking each one
• •Filling temporary Figma frame swatches before a real brand palette is finalized

Tips

• →Generate 20 or more at once and scan visually — your eye will catch interesting outliers faster than iterating one by one.
• →If results look muddy, add HSL-based filtering in your code: keep only codes where saturation exceeds 50% after conversion.
• →Pair random hex codes with a contrast checker immediately — many random combinations fail WCAG AA contrast ratios for text.
• →Use lowercase output when writing Sass or CSS custom properties, since most autoformatters normalize to lowercase anyway.
• →For data visualization, generate twice as many codes as you need and discard any that look too similar in lightness to neighboring values.
• →Copy the raw codes without the # prefix when pasting into Android XML layouts or Swift UIColor hex initializers that handle the prefix internally.

FAQ