Random Color Generator

What the random color generator does

Each press of Generate picks a new color at random and shows its code in three formats: HEX, RGB and HSL. Palette mode gives you five colors at once – lock the ones you like and re-roll the rest until the set feels right.

A contrast check sits next to each color. It shows how readable white text and black text would be on top of it, using the same contrast ratio that web accessibility guidelines (WCAG) use.

How to use it

1. Press Generate (or the Space bar) to get a new random color.
2. Copy the value you need. HEX codes such as #3A7BD5 suit most design tools and web pages, RGB lists the red, green and blue parts, and HSL describes hue, saturation and lightness.
3. Switch to palette mode to see five colors side by side.
4. Lock any color you want to keep. When you generate again, only the unlocked colors change.
5. Check the contrast. Each color shows its ratio against white and black text, so you can see at a glance which one is easier to read.

Ways to use a color palette generator

Design projects

Stuck on a color scheme for a poster, slide deck, website or invitation? Generate a palette, lock one or two colors that feel right, and keep rolling until the rest fall into place.

Art and illustration practice

Give yourself a challenge: paint or draw something using only the five colors on screen. Random limits push you to mix, layer and try combinations you'd never pick on purpose.

Coding and testing

A random hex color is handy for placeholder backgrounds, test data and quick theme experiments. Copy the code straight into your stylesheet.

Crafts and home ideas

Knitting, quilting, card making and painting a room all start with a color choice. Use the palette as a starting point, then adjust to suit the materials you have.

Classroom color lessons

Show students how HEX, RGB and HSL describe the same color in different ways. The contrast check is a simple way to explain why some text is hard to read on certain backgrounds.

Tips for working with colors

• Read a HEX code in pairs. The six characters after the # are three pairs for red, green and blue, each from 00 (none) to FF (full).
• Use HSL to make lighter or darker versions. Keep the hue the same and change the lightness to get tints and shades of one color in your own design tool.
• Aim for good contrast. WCAG AA asks for a ratio of at least 4.5:1 for normal text and 3:1 for large text.
• Lock first, then roll. If you already have one color you love, lock it and let the generator suggest the others.
• Screens and paper differ. Colors can look different in print, so test a sample before a big print job.
• Need art ideas too? Pair a palette with the random picture generator or a list of things to draw.