# Pride Month design: support that goes beyond a rainbow logo

[Canonical HTML page](https://gradiently.design/guide/pride-month-design)

Every June, logos turn rainbow and turn back again on 1 July. People notice. Here is how to design for Pride with care: the flags and what they stand for, colours that are right, and posts that are backed by something real.

## The short version

- Good Pride Month design is backed by real action, such as donations, events, inclusive policies or work with LGBTQ+ creators, and says so specifically.
- Pride Month is celebrated in June in many countries, marking the anniversary of the Stonewall uprising in New York in June 1969.
- The rainbow flag was designed by Gilbert Baker in 1978, and its common six stripe version is red, orange, yellow, green, blue and violet.
- The Progress Pride Flag, designed by Daniel Quasar in 2018, adds a chevron of black, brown, light blue, pink and white.
- Rainbow backgrounds are hard to read text on, so keep words on a calm area and use the rainbow as a band, edge or accent.

The best **Pride Month design** is honest. A rainbow on its own says you noticed it was June; a rainbow next to something you actually did (a donation, a partnership, an event, a policy, a commission for a queer artist) says you mean it. Get the flags and their colours right, keep words readable on bright stripes, and tell people specifically what your support looks like. That is the difference between a post people share and one they screenshot for the wrong reasons.

## A short history of the Pride flags

Pride Month is held in June in many countries, marking the Stonewall uprising in New York in June 1969. Some places hold Pride at other times of year, so local events may fall outside June. The flags carry much of the meaning, and getting them right is the first sign of care.

| Flag | Designed by | Colours |
| --- | --- | --- |
| Rainbow flag (original) | Gilbert Baker, 1978 | Eight stripes, including hot pink and turquoise |
| Rainbow flag (six stripe) | Adapted in 1979 | Red, orange, yellow, green, blue, violet |
| Transgender flag | Monica Helms, 1999 | Light blue, pink, white |
| Bisexual flag | Michael Page, 1998 | Magenta, lavender, royal blue |
| Progress Pride Flag | Daniel Quasar, 2018 | Six stripes plus a chevron of black, brown, light blue, pink and white |
| Intersex inclusive Progress flag | Valentino Vecchietti, 2021 | Adds a yellow triangle with a purple circle |

There are many more flags, including lesbian, pansexual, nonbinary and asexual flags. If you feature one, check its current colours and meaning first.

## Pride flag colours and hex codes

Flag colours vary slightly between sources, but these codes are widely used for screen work. Use them exactly when you draw a flag; when you are designing a mood rather than a flag, you have more freedom.

- Red: #e40303
- Orange: #ff8c00
- Yellow: #ffed00
- Green: #008026
- Blue: #004dff
- Violet: #750787

The six stripe rainbow flag, as commonly specified for screens.

- Trans light blue: #5bcefa
- Trans pink: #f5a9b8
- White: #ffffff
- Progress brown: #613915
- Progress black: #000000
- Bi magenta: #d60270
- Bi lavender: #9b4f96
- Bi royal blue: #0038a8

The extra colours of the Progress Pride chevron, plus the bisexual flag.

## Rainbow gradients for Pride posts

A gradient lets the colours flow into each other rather than sit in hard stripes, which feels softer and more modern. Hard stops keep the flag readable as a flag. Both have their place.

- Rainbow blend: `linear-gradient(90deg, #e40303 0%, #ff8c00 20%, #ffed00 40%, #008026 60%, #004dff 80%, #750787 100%)`
- Six stripe flag: `linear-gradient(180deg, #e40303 0% 16.66%, #ff8c00 16.66% 33.33%, #ffed00 33.33% 50%, #008026 50% 66.66%, #004dff 66.66% 83.33%, #750787 83.33% 100%)`
- Transgender flag: `linear-gradient(180deg, #5bcefa 0% 20%, #f5a9b8 20% 40%, #ffffff 40% 60%, #f5a9b8 60% 80%, #5bcefa 80% 100%)`
- Dusk rainbow: `linear-gradient(135deg, #2a0f3d 0%, #750787 35%, #d60270 60%, #ff8c00 85%, #ffed00 100%)`

Rainbow blend and Dusk rainbow are moods; the two striped versions are flags and should keep their exact proportions.

Notice that Dusk rainbow starts from a deep ground. A full rainbow behind words is one of the hardest surfaces to read on, because the lightness jumps from dark violet to bright yellow across a single line. The fix is to give the words a calm area: a deep end of the gradient, a band of rainbow at the edge, or a plain panel of your brand colour beside it. [Rainbow gradient](https://gradiently.design/guide/rainbow-gradient) and [text on a gradient](https://gradiently.design/guide/text-on-gradient) go deeper.

A Pride post where the headline crosses bright gradient colours and parts of it are hard to read

Words running straight across the brightest colours: parts of the line disappear.

The same Pride post with a calmer area behind the headline so every letter reads clearly

The same post with the background making room for the words.

## How to show support beyond a rainbow logo

Changing your logo to a rainbow is the most familiar Pride gesture and the easiest to doubt, because it costs nothing. If you do it, pair it with something real and say what it is. If you haven't done anything yet, do that first and post second.

### Rainbow washing

- A rainbow logo in June, nothing else
- Pride merchandise with no money going anywhere
- Rainbow avatars only in markets where it is easy
- Vague words like "we celebrate love"
- Silence for the other eleven months

### Real support

- A named charity and what you gave, or a share of sales stated plainly
- A commission or collaboration with an LGBTQ+ artist, paid properly
- Events, sponsorships or space offered to local groups
- Inclusive policies for staff, said specifically
- Showing up beyond June

## Pride Month social media post ideas

- **The giving post:** "This June, every order supports our local LGBTQ+ youth centre", naming the charity, stating the amount or share, and posting an update at the end of the month. [Nonprofit social media graphics](https://gradiently.design/guide/nonprofit-social-media) shows how charities present this kind of partnership.
- **The artist collaboration:** introduce the artist, credit them clearly, link to their work.
- **The team post:** if colleagues want to share what Pride means to them, let them, in their words.
- **The event post:** your venue's Pride night, a float you're joining or a local march, with date and place. [Event marketing graphics](https://gradiently.design/guide/event-organizer-marketing) covers the formats.
- **The quiet post:** a single line on your own brand background. Not every business needs a campaign.

A vertical Pride Month story announcing that every order in June supports a local youth charity

A giving story at 1080×1920. Name the charity in the caption and report back at the end of the month.

Keep your brand recognisable: your typeface, your voice, your layout, with the Pride colours added rather than replacing everything. In Gradiently you can keep your usual Mark and bring the Pride colours in as accents in the Studio, such as a striped band or coloured type, while the Mark knows where the text sits and calms the area behind it. More on choosing colours that last in [colour psychology](https://gradiently.design/guide/color-psychology).

## FAQ

### When is Pride Month?

June in many countries, marking the anniversary of the Stonewall uprising in New York in June 1969. Some cities hold Pride events at other times of year.

### What are the hex codes for the Pride flag?

A widely used set for the six stripe rainbow flag is #e40303, #ff8c00, #ffed00, #008026, #004dff and #750787.

### What is the Progress Pride Flag?

A version of the rainbow flag designed by Daniel Quasar in 2018 that adds a chevron of black, brown, light blue, pink and white to represent people of colour and trans people.

### How can a business support Pride without rainbow washing?

Do something real first, such as donating, paying LGBTQ+ creators or supporting local events, then post about it specifically and keep showing up after June.

### How do I put text on a rainbow background?

Keep words on a calm or deep area of the design, or use the rainbow as a band or edge, because the lightness changes too much across a full rainbow for any single text colour.