Gray Color Generator

What this tool does

Greys are the quiet workhorses of a design, the colours behind text, borders, backgrounds, and dividers, and sometimes you just want one to hand without fussing over it. That is what this does.

Press the button and it gives you a random gray, shown with its values in hex, RGB, HSL, and HSV, and press again for another. Each result is a true neutral gray, ready to copy straight into your work, so you have a quick source of the plain, useful greys that so much of an interface is built on, one at a time.

How to use it

1. Generate a gray. Press the button for a random gray, and again for another.
2. Read its codes. The tool shows the gray as a swatch with its hex, RGB, HSL, and HSV values.
3. Copy what you need. Take the value in whichever format suits your work, or generate another.

Press for a random gray, read its codes, and copy the one you want in the format you are using, or keep pressing for a different one.

How it works

What makes a colour a true gray is having equal amounts of red, green, and blue, so the tool builds its greys that way. It picks one random value and sets all three channels to it, which produces a neutral gray with no colour cast, then shows that gray in the usual formats.

Because the three channels are always equal, the result is never tinted warm or cool; it is a plain neutral somewhere between black and white. The single random value decides how light or dark that neutral is, so each press gives you one gray from anywhere along the black-to-white range, shown ready to copy.

What a neutral gray is

A neutral gray is a colour with no hue at all, only a level of lightness. In RGB terms that means red, green, and blue are all the same, so nothing pulls the colour toward any part of the spectrum. What is left is pure lightness, a point on the scale that runs from black at one end to white at the other.

This is what separates a true gray from a tinted one. A warm grey leans slightly toward brown or yellow, and a cool grey toward blue, because their channels are not quite equal. A neutral gray keeps them exactly equal, which makes it steady and unobtrusive, the kind of colour that sits in the background without drawing attention to itself.

Why greys matter in design

Greys do an enormous amount of quiet work in an interface. Body text is rarely pure black; it is usually a dark gray that is easier on the eye. Borders, dividers, disabled states, and subtle backgrounds are almost all greys, chosen so they organise a layout without competing with the real content.

Getting these neutrals right is a big part of a design feeling calm and readable. A good spread of greys, from near-white surfaces to near-black text, gives a layout structure and hierarchy using barely any colour at all. That is why a quick source of neutral greys is handy: they turn up everywhere, and having one ready saves you mixing it by hand.

Why generate a random gray

The main reason is convenience. When you just need a neutral for a background, a border, or a placeholder, generating one is faster than opening a picker and nudging the sliders to keep the channels equal. A tap gives you a proper gray with its codes already worked out.

It is also useful for testing and exploring. If you want to try a few different neutrals in a layout, or need a stand-in gray while you work, pressing for one and then another lets you compare quickly. Because the tool always returns a true neutral, you can trust that what you get is a clean gray rather than something with a faint colour tint you did not intend.

Using the value you get

Each gray comes with its hex, RGB, HSL, and HSV values, so you can take whichever your work uses. Hex drops straight into a stylesheet or design tool, while the HSL value is handy if you then want to nudge the lightness up or down by hand.

If the gray you get is lighter or darker than you wanted, press again for another and compare, since the tool hands them out one at a time across the whole range. When you find one that works, copy it and apply it as your text colour, border, or background, confident it is a clean neutral that will sit quietly behind the rest of your design.

Questions people ask

What does it give me?

One random neutral gray with its hex, RGB, HSL, and HSV values. Press again for another gray from anywhere along the black-to-white range.

Can I set the lightness or enter a colour?

No. Each result is a random gray, so you press for one and keep pressing until one suits the lightness you want.

Why are red, green, and blue equal?

Equal channels make a true neutral gray with no colour tint. That is what keeps each result a plain gray rather than a warm or cool one.

Are these warm or cool greys?

Neither. Because the channels are always equal, every result is a neutral gray, not tinted toward warm brown or cool blue.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. Grey, the neutral between black and white. Wikipedia. https://en.wikipedia.org/wiki/Grey
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor