Random Color Generator
Our Random Color Generator creates truly random colors or colors with specific properties at the click of a button. It's useful for web designers, DIY projects, or anyone needing color inspiration for their designs.
You can generate colors with specific characteristics like light, dark, warm, or cool shades to control the mood and tone of the output colors.
The generator supports many color types: true grays, tinted grays, pastels, vibrant hues, neons, and muted colors. You can also focus on specific hues like red, orange, yellow, green, cyan, blue, or violet to generate variations within that color family.
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:
| Mode | Hue | Saturation | Lightness |
|---|---|---|---|
| Truly Random | Full Range | Full Range | Full Range |
| Light | Full Range | 50% - 100% | 80% - 100% |
| Dark | Full Range | 50% - 100% | 0% - 30% |
| Warm | 20° - 60° | 70% - 100% | 30% - 70% |
| Cool | 180° - 260° | 70% - 100% | 30% - 70% |
| Gray | Full Range | 0% | Full Range |
| Tinted Gray | Full Range | 2% - 10% | Full Range |
| Pastel | Full Range | 30% - 70% | 70% - 90% |
| Vibrant | Full Range | 70% - 100% | 30% - 70% |
| Neon | Full Range | 70% - 100% | 50% - 100% |
| Muted | Full Range | 10% - 40% | 30% - 60% |
| Red | 15° - 35° | 70% - 100% | 30% - 70% |
| Orange | 35° - 60° | 70% - 100% | 30% - 70% |
| Yellow | 85° - 105° | 70% - 100% | 80% - 90% |
| Green | 120° - 180° | 70% - 100% | 30% - 70% |
| Cyan | 180° - 210° | 70% - 100% | 30% - 80% |
| Blue | 210° - 260° | 70% - 100% | 30% - 70% |
| Violet | 280° - 330° | 70% - 100% | 30% - 70% |
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.