Shades of Pink

What this tool does

Pink is softer than red but covers just as much ground, from a barely-there blush to a loud, electric hot pink. That range is the catch when you are designing: you pick one pink, and then you need a paler one for a background and a stronger one for a button, and matching them by eye is fiddly.

That is what this does. You give it a pink, and it builds the whole run of that pink in even steps, each with its HEX, RGB, HSL, and HSV codes ready to copy. Below the tool there is a reference of the named pinks, plus a couple of facts about pink that tend to surprise people.

How to use it

1. Set your pink. The tool opens showing a pink and its Hex. Use Change Color or the Color Picker to set your own, or paste a hex in.
2. Pick the number of shades. The Color Shades number says how many to show, ten to start, and a higher value gives a finer gradient.
3. Copy the values. Each shade is listed with its HEX, RGB, HSL, and HSV, ready to drop into your project.

Pink is a light red, so its range mostly runs from pale and washed-out up to deep and rich rather than shifting to another hue. Start from the pink you actually want and the steps follow it.

How it works

The tool runs on TinyColor, a colour library that builds clean lighter and darker versions of a colour rather than just fading it. It takes your pink, walks it toward white on one side and black on the other, spaces the steps evenly, and writes each one out in the four code formats.

Here is the first surprise: pink is not really its own colour in the way red or blue is. There is no pink in the rainbow, no single wavelength of pink light. It is simply a light, desaturated red, which is why its range behaves so much like a softer version of red's.

Pink was not always for girls

The idea that pink is for girls is surprisingly recent, and it used to be the other way round. A century ago, the accepted advice was the opposite. A 1918 trade article spelled it out: the rule was pink for boys and blue for girls, on the reasoning that pink, being a stronger, more decided colour close to red, suited boys, while blue was delicate and dainty, and so prettier for girls.

The pink-for-girls convention we take for granted only really settled into place after the Second World War, as a fairly deliberate effort to mark out gender roles in clothing. It is a useful reminder that colour meanings are learned, not fixed. Pink has not changed, but what we read into it has flipped completely in about a hundred years.

The named pinks, with hex codes

Pink ranges from the gentlest pastel to genuinely loud. Here are the named pinks worth knowing, with a hex for each.

• Pink (#FFC0CB): the standard web pink, soft and pale.
• Light Pink (#FFB6C1): a touch deeper than you might expect from the name, still gentle.
• Hot Pink (#FF69B4): bright, bold, and fun, pink turned up loud.
• Deep Pink (#FF1493): stronger still, heading toward magenta.
• Pale Violet Red (#DB7093): a dustier, slightly purple pink.
• Baker-Miller Pink (#FF91AF): the famous "calming" pink, with the story below.

Baker-Miller Pink is worth a mention. In 1979 a researcher had the walls of a holding cell painted this exact pink, on the theory that it calmed aggression, and for a while it was used in correctional facilities and became known as drunk-tank pink. The results turned out to be mixed, some people were soothed by it and others were not, but it remains a famous example of someone betting that a single colour could change how people feel.

What pink says

Pink reads as soft, sweet, and warm, the colour of romance, kindness, and gentleness. But that is only half of it, because the brighter pinks tell a different story. Hot pink and magenta are bold, playful, and modern, full of energy rather than softness, which is why they show up in fashion, pop culture, and anything that wants to feel fun and confident.

It carries some specific meanings too. Pink is the colour of breast cancer awareness, and in recent years a soft, muted pink became a hugely popular, deliberately gender-neutral choice in design and branding. So pink can lean sweet and traditional or bold and contemporary depending entirely on the shade, which is all the more reason to choose your exact pink with care.

Building a palette from your pink

Pink is more flexible than its reputation suggests. Use the steps from this tool as the spine of a palette: a pale pink surface, a stronger pink for buttons and accents, and a deep pink or near-burgundy for text. Soft pinks pair calmly with white and grey, while a deep navy or charcoal makes a brighter pink look modern and intentional rather than sugary.

For a colour accent, pink sits opposite green on the wheel, so a soft sage or mint gives a fresh, balanced contrast, and gold adds a touch of warmth and luxury. The main thing is to decide which pink you are leaning on, since a palette built around blush feels very different from one built around hot pink.

Questions people ask

What is the hex code for pink?

The standard web value is #FFC0CB. It is one of the named CSS colours, so you can also just write "pink" in your stylesheet, while a specific brand pink will have its own hex.

Is pink a real colour? It is not in the rainbow.

Correct, there is no single wavelength of pink light, so it does not appear in the rainbow. Pink is a light, desaturated red, which makes it just as real on screen and in print as any other colour, even if it is not a spectral one.

Was pink really once a colour for boys?

Yes. A century ago the common advice was pink for boys and blue for girls, since pink was seen as a strong colour related to red. The modern pink-for-girls convention only settled in after the Second World War.

Can I use my own pink?

Yes. Paste your exact pink in as the base, and the tool builds the lighter and darker steps of that colour, so you get a matching set for surfaces, text, and accents.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. Smithsonian Magazine, the history of why girls wear pink and boys wear blue. https://www.smithsonianmag.com/history/unraveling-the-colorful-history-of-why-girls-wear-pink-and-boys-wear-blue-1370097/