Random Color Generator

Welcome to our Random Color Generator, a simple yet powerful resource for anyone who loves colors and needs a fresh dose of inspiration. This generator is a breeze to use, delivering truly random colors or random colors with specific properties at the click of a button. Whether you're a professional web designer, a DIY enthusiast, or just looking for a new color theme for your design, this generator will provide you with an exciting range of different random colors to help spark your creativity.

Not only can our Random Color Picker produce truly random colors, but it also allows you to specify color characteristics like light, dark, warm, or cool shades. This means you have control over the mood and tone of the colors generated, whether you need something soothing for a relaxation area, or vibrant for a stimulating workspace.

If you're after a more specific color palette, our random color picker can cater to that as well: from true grays and tinted grays to playful pastels, vibrant hues, electrifying neons, and subdued muted colors, you'll find a spectrum of possibilities here. You can also zero in on a specific color hue - red, orange, yellow, green, cyan, blue, or violet, and our picker will generate an array of shades with that hue.

What does "truly random color" mean?

"Truly random color" refers to a color that is generated without any constraints. It could be any color from the full sRGB color space.

How does the Random Color Generator generate colors of a particular type?

Our tool generates random colors of a particular type by constraining the color generation process to a specific range of Hue, Saturation, and Lightness values in the OKHSL color space. For example, if you select "Light" as the color type, it will generate a random Hue from the full range (because a light color can have any hue) but will constrain the Saturation and Lightness values to the range of 50% to 100% and 80% to 100% respectively (because a light color has high saturation and very high lightness).

The following table contains the ranges of OKHSL Hue, Saturation, and Lightness values for each random color type:

Can I generate multiple random colors at the same time? Is there a limit to how many colors I can generate?

You can generate up to 1,000 colors at a time. By default, our generator generates 6 colors, but you can change this by changing this value in the "Number of Colors" field. If you need more than that, you can simply press the "Generate" button again to generate another batch of colors.

Can I save the colors that I generate?

Yes, you can! After generating the colors you like, simply click on one of the three buttons labeled "Hex", "RGB", and "HSL" next to "Download All Colors" above on this page to save the colors in that format in a text file. You can then open the file in your favorite text editor or spreadsheet program.

Is it possible to save my favorite generated colors for future use?

Currently, the only way to save your favorite colors is to download them using the method described above. We are working on a feature that will allow you to save your favorite colors in your browser, so stay tuned!

Can I tweak the generated colors further?

Yes, you can! If you want to tweak the colors further, you can use our Color Picker. Simply copy the hex code of the color you want to tweak, paste it into the Color Picker, and adjust the color to your liking.

How can I generate a Random Hex Color using JavaScript?

Generating a random hex color in JavaScript involves randomly generating a number between 0 and 16777215 (which is 0xffffff in hexadecimal), and then converting that number to a hexadecimal string.

Here's how you can do it:

const randomHexColor = () =>
  '#' +
  Math.round(Math.random() * 0xffffff)
    .toString(16)
    .padStart(6, '0')

console.log(randomHexColor()) // Outputs something like #e0d2f9

Here's a step-by-step breakdown of the code:

• Math.random() * 0xffffff: This generates a random decimal number between 0 and 16777215 (which is 0xffffff in hexadecimal), representing the entire range of possible RGB color values.
• Math.round(): This function is used to round the resulting number to the nearest whole number because color codes can't have fractional components.
• .toString(16): This method converts the rounded number into a hexadecimal string. The argument 16 is used because hexadecimal is a base-16 system.
• .padStart(6, '0'): This method ensures the string has a length of at least 6 characters. If the original hexadecimal string is less than 6 characters long (which can happen if the randomly generated number is small), it adds zeroes to the start of the string until it is 6 characters long.
• '#' +: This concatenates a '#' symbol to the start of the hexadecimal string because hex color codes typically start with this symbol.

The resulting string is a random 6-character hexadecimal color code, such as #e0d2f9.