<div class="wp-block-paragraph">
<p>When you start a new creative project, you might already have a color palette or style guide in mind. But what if you don’t? Sometimes that’s even better, as it can be a fun way to explore new colors and search for the perfect shade.&nbsp;</p>
</div>

<div class="wp-block-paragraph">
<p>Random color generators will help you get started. They’re online tools that help you discover new hues that you can use in a variety of design projects.&nbsp;</p>
</div>

<div class="wp-block-paragraph">
<p>Ready to get inspired? Here’s what you need to know about random color generators.</p>
</div>


<h2 class="wp-block-heading">What Are Some Random Colors?</h2>


<div class="wp-block-paragraph">
<p>There are seemingly infinite random colors. Even something as simple as “blue” will have thousands of different shades and hues—from cobalt to cerulean.&nbsp;</p>
</div>

<div class="wp-block-paragraph">
<p>But, if the goal here is to truly be random, here are a few assorted colors we love (along with their corresponding hexadecimal codes, which is a number system that uses a sequence of characters to represent a specific value—like a color):&nbsp;</p>
</div>

<div class="wp-block-list">
<ul><li><strong>Alice Blue:</strong> #f0f8ff</li><li><strong>Amethyst:</strong> #9966cc</li><li><strong>Celadon:</strong> #ace1af</li><li><strong>Dark Red:</strong> #8b0000</li><li><strong>Eggshell:</strong> #f0ead6</li><li><strong>Hunter Green:</strong> #355e3b</li><li><strong>Magenta:</strong> #ff00f</li><li><strong>University of California Gold:</strong> #b78727</li><li><strong>Viridian:</strong> #40826d</li></ul>
</div>

<div class="wp-block-paragraph">
<p>If you want to get even more creative, try putting some of them together to create bold and eye-popping color combinations.&nbsp;</p>
</div>


<h3 class="wp-block-heading">How Do You Generate Random Colors in React?</h3>


<div class="wp-block-paragraph">
<p><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">React</a> is primarily known as a tool for creating web applications and user interfaces. But, you can also use it to create code to generate random colors in your design. You’ll need to build a customized code to generate a rotating array of random colors in React that looks something like this:&nbsp;</p>
</div>

<div class="wp-block-paragraph">
<p>Color = var getRandomColor [variable 1, variable 2]</p>
</div>

<div class="wp-block-paragraph">
<p>Since coding requires specialized knowledge, we suggest consulting a <a href="https://reactnativecode.com/dynamically-generate-random-color/" target="_blank" rel="noreferrer noopener">detailed guide</a>.&nbsp;</p>
</div>


<h2 class="wp-block-heading">7 Best Random Color Generators</h2>


<div class="wp-block-paragraph">
<p>If you’re ready to get some creative color inspiration, look no further. We’ve selected the top seven random color generators and fun-to-use color randomizer wheels for all your creative needs.</p>
</div>


<h3 class="wp-block-heading">1. <a href="http://randomcolour.com/" target="_blank" rel="noreferrer noopener">Random Colour</a></h3>



<div class="wp-block-image"><figure class="aligncenter"><a href="http://randomcolour.com/" target="_blank" rel="noopener"><img decoding="async" src="https://lh6.googleusercontent.com/SxCLcy1Pxp05Rv9etBncBEi58BEGM0KODeEIWe3HADGKXYRzn3b_I7WkScM1MwYZ6X03lhFLbeYwjL_ZbSFDTk8WO5U3XbJzY-CwQWJlOZTnbk8x0992gKvmAHWYpTG7wTz5lngg" alt="green"/></a><figcaption><em>Source: <a href="http://randomcolour.com/" target="_blank" rel="noreferrer noopener">Random colour</a></em><br><em>This simple color generator comes with no bells or whistles.</em></figcaption></figure></div>


<div class="wp-block-paragraph">
<p>Color generators don’t get simpler than this site: reload the page to see a new color to pop up. The random color palette generator is perfect if you’re searching for a new shade without any limitations. One downside is that it only shows you the color itself—there aren’t any hex color codes or other information.&nbsp;</p>
</div>


<h3 class="wp-block-heading">2. <a href="https://www.random.org/colors/hex" target="_blank" rel="noreferrer noopener">Random Hex Color Code Generator</a></h3>



<div class="wp-block-image"><figure class="aligncenter"><a href="https://www.random.org/colors/hex" target="_blank" rel="noopener"><img decoding="async" src="https://lh3.googleusercontent.com/x4rNm9VkZQCyzwqmBNIx_SvaKJcjEbThJSkLe1PzZBL-HLWYCphZiIR6RPHACsuVOv-p9-N1jfXnBQlGnTEHnXuBa8OgRyTxhzHp3NmuaZRwrVNpM2n4bPjOUzbW-rMeC30Otioi" alt="random.org"/></a><figcaption><em>Source: <a href="https://www.random.org/colors/hex" target="_blank" rel="noreferrer noopener">Random.org</a></em><br><em>Random.org randomly generates colors from atmospheric noise.</em></figcaption></figure></div>


<div class="wp-block-paragraph">
<p>This color generator randomly generates as many colors as you want, which is perfect for coming up with color palettes to work with. Simply continue clicking “Generate Color” to see new colors pop up. Each color comes with hex color codes—simply click on a color to copy its code to your clipboard.</p>
</div>


<h3 class="wp-block-heading">3. <a href="https://coolors.co/" target="_blank" rel="noreferrer noopener">Coolors</a></h3>



<div class="wp-block-image"><figure class="aligncenter"><a href="https://coolors.co/" target="_blank" rel="noopener"><img decoding="async" src="https://lh4.googleusercontent.com/gA5VF_hjVcal1eDAj9aBBJcXK7PaJPXgtM9s5FgAAM4ki_vekARW75nBUYekG37YQtt8G0vsLW7mtDPnW8bSBdexzDx71qXrurJTyAEDZ4Zw2vFr_GFWW_e26ic3yZv9SF9rGVKj" alt="fall color palette"/></a><figcaption><em>Source: <a href="https://coolors.co/" target="_blank" rel="noreferrer noopener">Coolors</a></em><br><em>Used by companies like Netflix and Disney, Coolors is a professional site to spark fresh ideas.</em></figcaption></figure></div>


<div class="wp-block-paragraph">
<p>If you want to work with random colors but have some control over the specific shade, Coolors is the choice for you. Its CSS color picker is brilliant for selecting a random color and discerning different shades, temperatures, tints (lighter shades with a white base), and tones (lighter shades with a grey base). Unlike the other tools, Coolors will actually generate an entire color palette. Coolors is available as an Adobe add-on, Chrome extension, and iOS app.&nbsp;</p>
</div>


<h3 class="wp-block-heading">4. <a href="https://www.colorschemer.com/random-color-generator/" target="_blank" rel="noreferrer noopener">ColorSchemer Random Color Generator</a></h3>



<div class="wp-block-image"><figure class="aligncenter"><a href="https://www.colorschemer.com/random-color-generator/" target="_blank" rel="noopener"><img decoding="async" src="https://lh5.googleusercontent.com/JG3NtMVxlXmW5fC5uP5rJqCwcqWvK5BK7NTO3sEy7IxqeX0WhV6E3PbNR7BpomTR9_B90lbg9TW1vAiRM_5PCkCqrpE-8QQYvS5vz8L-zrUwfoYdKpqlZeUpvld7m0xIEkwZIN45" alt="color schemer"/></a><figcaption><em>Source: <a href="https://www.colorschemer.com/random-color-generator/" target="_blank" rel="noreferrer noopener">Color Schemer</a></em><br><em>This random color generator makes viewing text on different colors easy.</em></figcaption></figure></div>


<div class="wp-block-paragraph">
<p>The perk to color finder ColorSchemer is that you can instantly see how white, black, and shadowed text appear on a colorful background, which is helpful when designing with readability in mind. The random color generator gives you five different color codes for your project: hex, RGB, CMYK (cyan, magenta, yellow, key), HSV (hue, saturation, value), and HSL (hue, saturation, lightness).&nbsp;</p>
</div>


<h3 class="wp-block-heading">5. <a href="https://www.webfx.com/web-design/random-color-picker/" target="_blank" rel="noreferrer noopener">Colorrrs Random Color Picker</a></h3>



<div class="wp-block-image"><figure class="aligncenter"><a href="https://www.webfx.com/web-design/random-color-picker/" target="_blank" rel="noopener"><img decoding="async" src="https://lh4.googleusercontent.com/5bTuGgI513ZVWdeck326N_aGamiCHJnUb5ysW74NHYehVVs_-GroxjjL6NIok5Tri_bXH37jrn6iJzCPj5XmX5nxSWvavK_5mTFaTGPp15I6ZMo-OePkm4MnL8MOycPApMN66CcE" alt="yellow"/></a><figcaption><em>Source: <a href="https://www.webfx.com/web-design/random-color-picker/" target="_blank" rel="noreferrer noopener">Webfx</a></em><br><em>Just click the spacebar to see one new color at a time.</em></figcaption></figure></div>


<div class="wp-block-paragraph">
<p>This soothing site will guide you one color at a time. Just press the spacebar to have a new color pop up on your screen, along with the corresponding hex code. (One fun way to use the tool: as a random hair color generator for <a href="https://www.skillshare.com/blog/the-basics-of-character-design/" target="_blank" rel="noreferrer noopener">characters you’re creating</a>!)</p>
</div>


<h3 class="wp-block-heading">6. <a href="https://www.gigacalculator.com/randomizers/random-color-generator.php" target="_blank" rel="noreferrer noopener">GIGA Calculator Random Color Generator</a></h3>



<div class="wp-block-image"><figure class="aligncenter"><a href="https://www.gigacalculator.com/randomizers/random-color-generator.php" target="_blank" rel="noopener"><img decoding="async" src="https://lh4.googleusercontent.com/X2jKFMktu14Ak-1w_6QETjt_Mc6V0JvWpHt-l4o1DfW3TSCu-HaF01FaFC6zkUKX7-6BfEJMdqbLfJU9Yn4yQctCfx_kfx1gYO3jCKl5j_ERI6eTCX0VxLZ9JKDyrV4Ed6tKeZtR" alt="giga calculator"/></a><figcaption><em>Source: <a href="https://www.gigacalculator.com/randomizers/random-color-generator.php" target="_blank" rel="noreferrer noopener">Giga Calculator</a></em><br><em>You can limit the color palette selections you see with this site.</em></figcaption></figure></div>


<div class="wp-block-paragraph">
<p>If you’re looking to control the types of color palettes you see, this is the random color generator for you. You can select from limited palettes like red and black, or a three-color wheel, six-color wheel, or 12-color wheel. You can also generate multiple colors at once to save some time.</p>
</div>


<h3 class="wp-block-heading">7. <a href="http://www.shodor.org/~ishaanr/PHP/colorgenerator.php?" target="_blank" rel="noreferrer noopener">Shodor Random Color Generator</a></h3>



<div class="wp-block-image"><figure class="aligncenter"><a href="http://www.shodor.org/~ishaanr/PHP/colorgenerator.php" target="_blank" rel="noopener"><img decoding="async" src="https://lh5.googleusercontent.com/FfehnDaoIxvcQyH3bvBjoFhPWMfni3BWZiVkC2XsxiHcEdWctqOnGKta3W6DanGr-KKaYosRSF5Hkb0I50Oj2K5Kb9Ph4RFCWitCpzWeGLHSc8Lm21i0r0p6Tm5Zdpu4JqX456ki" alt="blue green"/></a><figcaption><em>Source: <a href="http://www.shodor.org/~ishaanr/PHP/colorgenerator.php" target="_blank" rel="noreferrer noopener">Shodor</a></em><br><em>This is a super easy color generator to use.</em></figcaption></figure></div>


<div class="wp-block-paragraph">
<p>With the biggest font of all our selections, this palette generator is great for anyone tired of squinting at color hex codes in small fonts. Created by the computational science nonprofit Shodor, this website allows you to generate one color at a time with the press of a button.</p>
</div>

<div class="post-cta">
<div class="wp-block-image"><figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="938" height="874" src="https://www.skillshare.com/blog/wp-content/uploads/2021/06/Screen-Shot-2021-06-21-at-8.53.08-PM.png" alt="" class="wp-image-16267" srcset="https://www.skillshare.com/blog/wp-content/uploads/2021/06/Screen-Shot-2021-06-21-at-8.53.08-PM.png 938w, https://www.skillshare.com/blog/wp-content/uploads/2021/06/Screen-Shot-2021-06-21-at-8.53.08-PM-300x280.png 300w, https://www.skillshare.com/blog/wp-content/uploads/2021/06/Screen-Shot-2021-06-21-at-8.53.08-PM-768x716.png 768w" sizes="(max-width: 938px) 100vw, 938px" /></figure></div>



<div class="wp-block-group"><div class="wp-block-group__inner-container">
<h2><strong>Make Your Own Color Palette!</strong></h2>



<p><strong>How to Create a Perfect Color Palette for Digital Art</strong></p>



<div class="wp-block-button"><a class="wp-block-button__link has-skillshare-violet-color has-skillshare-wander-green-background-color has-text-color has-background" href="https://www.skillshare.com/en/classes/How-To-Create-A-Perfect-Color-Palette-For-Digital-Art/821815156" target="_blank" rel="noreferrer noopener">Take the Class</a></div>
</div></div>
</div>