Skip to main contentSkip to calculator
108 calculatorsLive resultsStep-by-step solutions

Rechnerpilot tool

Colour Generator

Generate random colours with HEX, RGB and HSL values for design and testing – locally in your browser.

Generators

Click “Generate” to create colours.

Explanation

How Colour Generator works

The colour generator creates random colours. For each colour, three random values for red, green and blue (each 0–255) are drawn, and the common notations HEX, RGB and HSL are computed from them. HSL describes the same colour via hue, saturation and lightness and makes targeted adjustments easier.

Generation happens locally in the browser using Math.random. The colours are purely random and not checked for contrast or accessibility.

Limits of this tool

  • No contrast or WCAG check.
  • No palette harmony (complementary, monochrome, etc.).
  • Math.random — not for security purposes.

Sources

  • CSS Color Module: Definition of HEX, RGB and HSL notation.

Practice

Practical examples

Colour palette

Eight random colours as a starting point for a design moodboard.

HEX for CSS

HEX values can be used directly in CSS or design tools.

Understand HSL

HSL shows hue, saturation and lightness — handy for targeted adjustments.

FAQ

Frequently asked questions

How are the colours generated?

For each colour, three random values (red, green, blue, each 0–255) are drawn with Math.random, and the HEX, RGB and HSL representations are computed from them.

Are the colours accessible/high-contrast?

No. The colours are purely random and not checked for contrast, readability or WCAG conformance. Contrast has to be ensured separately.

Do HEX, RGB and HSL represent the same colour?

Yes. The three values describe the same colour in different notation; HSL is computed from the RGB values and rounded in the process.

Are the colours stored?

No. The colours are generated in the browser and drawn anew on every click. Nothing is stored.

Tips

Good to know

  • HEX is suitable directly for CSS and most design tools.
  • HSL makes it easier to adjust lightness and saturation deliberately.
  • Random colours are not checked for contrast.

Related calculators

More tools