This CSS file collects the colors of 15 different pride flags in an easy to use, easy to remember color library for use in any html project.
It started as a component of my IsMightier project. I spun it off into its own repo so that it would be easy for anyone to download and use on its own.
The various color classes are named by color and grouped by flag. The groups are identified by the name of the group the flag represents except in cases where there are multiple flags for one group. In those cases, either a more specific flag name or the name of the flag's creator is used as an identifier (see the Lesbian Pride flags for an example).
Every color in the file has two classes associate with it. The first class sets the color as a background with either white or black as the text color, and the second class sets the color as the text color.
Some colors are represented multiple times in the file. White, for instance, appears on many pride flags and is included in each group where it does. For the most part, if one flag uses a subset of colors from another flag, only the flag with the greater number of colors is included as a named group (for example, the pink Lesbian Pride flag uses the same stripe pattern as the Lipstick Lesbian Pride flag, merely ommitting the "kiss" image, so it is not included separately). The main exception is the traditional rainbow Pride flag and the Progress Pride flag. Both are included as named groups.
Included in this repo is a Notebook file that can be used to generate CSS code as used in pride-palette.css. Passing in a dictionary of the form:
flags = {
flagName1: {colorName1a: hexCode1a,colorName2a: hexCode2a},
flagName2: {colorName1b: hexCode1b,colorName2b: hexCode2b},
etc…
}Will generate
.pride-flagName1-colorName1a {
color: #ffffff;
background-color: #hexCode1a;
}
.pride-flagName1-colorName2a {
color: #ffffff;
background-color: #hexCode2a;
}
.pride-flagName1-colorName1a-text {
color: #hexCode1a;
}
.pride-flagName1-colorName2a-text {
color: #hexCode2a;
}
.pride-flagName2-colorName1b {
color: #ffffff;
background-color: #hexCode1b;
}
.pride-flagName2-colorName2b {
color: #ffffff;
background-color: #hexCode2b;
}
.pride-flagName2-colorName1b-text {
color: #hexCode1b;
}
.pride-flagName2-colorName2b-text {
color: #hexCode2b;
}Appending an asterisk (*) to the end of the colorName will change the text color from #ffffff to #000000 on the class where colorName is the background color.
| class | text class | hex |
|---|---|---|
| pride-baker-red | pride-baker-red-text | #e40303 |
| pride-baker-orange | pride-baker-orange-text | #ff8c00 |
| pride-baker-yellow | pride-baker-yellow-text | #ffed00 |
| pride-baker-green | pride-baker-green-text | #008026 |
| pride-baker-blue | pride-baker-blue-text | #004dff |
| pride-baker-purple | pride-baker-purple-text | #750787 |
| class | text class | hex |
|---|---|---|
| pride-progress-red | pride-progress-red-text | #e40303 |
| pride-progress-orange | pride-progress-orange-text | #ff8c00 |
| pride-progress-yellow | pride-progress-yellow-text | #ffed00 |
| pride-progress-green | pride-progress-green-text | #008026 |
| pride-progress-blue | pride-progress-blue-text | #004dff |
| pride-progress-purple | pride-progress-purple-text | #750787 |
| pride-progress-white | pride-progress-white-text | #ffffff |
| pride-progress-pink | pride-progress-pink-text | #ffafc8 |
| pride-progress-light-blue | pride-progress-light-blue-text | #74d7ee |
| pride-progress-brown | pride-progress-brown-text | #613915 |
| pride-progress-black | pride-progress-black-text | #000000 |
| class | text class | hex |
|---|---|---|
| pride-trans-blue | pride-trans-blue-text | #5bcefa |
| pride-trans-pink | pride-trans-pink-text | #f5a9b8 |
| pride-trans-white | pride-trans-white-text | #ffffff |
| class | text class | hex |
|---|---|---|
| pride-bi-pink | pride-bi-pink-text | #d60270 |
| pride-bi-purple | pride-bi-purple-text | #9b4f96 |
| pride-bi-blue | pride-bi-blue-text | #0038a8 |
| class | text class | hex |
|---|---|---|
| pride-pan-pink | pride-pan-pink-text | #ff218c |
| pride-pan-yellow | pride-pan-yellow-text | #ffd800 |
| pride-pan-blue | pride-pan-blue-text | #21b1ff |
| class | text class | hex |
|---|---|---|
| pride-labrys-violet | pride-labrys-violet-text | #792491 |
| pride-labrys-black | pride-labrys-black-text | #000000 |
| pride-labrys-white | pride-labrys-white-text | #ffffff |
| class | text class | hex |
|---|---|---|
| pride-lipstick-dark-pink | pride-lipstick-dark-pink-text | #ffffff |
| pride-lipstick-dusty-pink | pride-lipstick-dusty-pink-text | #b75592 |
| pride-lipstick-pink | pride-lipstick-pink-text | #d063a6 |
| pride-lipstick-lavender | pride-lipstick-lavender-text | #e4accf |
| pride-lipstick-white | pride-lipstick-white-text | #ffffff |
| pride-lipstick-pale-red | pride-lipstick-pale-red-text | #c54e54 |
| pride-lipstick-brown | pride-lipstick-brown-text | #8a1e04 |
| pride-lipstick-red | pride-lipstick-red-text | #eb1449 |
| class | text class | hex |
|---|---|---|
| pride-gwen-dark-orange | pride-gwen-dark-orange-text | #d52d00 |
| pride-gwen-orange | pride-gwen-orange-text | #ef7627 |
| pride-gwen-light-orange | pride-gwen-light-orange-text | #ff9a56 |
| pride-gwen-white | pride-gwen-white-text | #ffffff |
| pride-gwen-pink | pride-gwen-pink-text | #d162a4 |
| pride-gwen-dusty-pink | pride-gwen-dusty-pink-text | #b55690 |
| pride-gwen-dark-rose | pride-gwen-dark-rose-text | #a30262 |
| class | text class | hex |
|---|---|---|
| pride-intersex-yellow | pride-intersex-yellow-text | #ffd800 |
| pride-intersex-violet | pride-intersex-violet-text | #7902aa |
| class | text class | hex |
|---|---|---|
| pride-ace-black | pride-ace-black-text | #000000 |
| pride-ace-grey | pride-ace-grey-text | #a3a3a3 |
| pride-ace-white | pride-ace-white-text | #ffffff |
| pride-ace-purple | pride-ace-purple-text | #800080 |
| class | text class | hex |
|---|---|---|
| pride-aro-green | pride-aro-green-text | #3da542 |
| pride-aro-light-green | pride-aro-light-green-text | #a7d379 |
| pride-aro-white | pride-aro-white-text | #ffffff |
| pride-aro-grey | pride-aro-grey-text | #a9a9a9 |
| pride-aro-black | pride-aro-black-text | #000000 |
| class | text class | hex |
|---|---|---|
| pride-genderfluid-pink | pride-genderfluid-pink-text | #ff76a4 |
| pride-genderfluid-white | pride-genderfluid-white-text | #ffffff |
| pride-genderfluid-purple | pride-genderfluid-purple-text | #c011d7 |
| pride-genderfluid-black | pride-genderfluid-black-text | #000000 |
| pride-genderfluid-blue | pride-genderfluid-blue-text | #2f3cbe |
| class | text class | hex |
|---|---|---|
| pride-polysexual-pink | pride-polysexual-pink-text | #f714ba |
| pride-polysexual-green | pride-polysexual-green-text | #01d66a |
| pride-polysexual-blue | pride-polysexual-blue-text | #1594f6 |
| class | text class | hex |
|---|---|---|
| pride-genderqueer-lavender | pride-genderqueer-lavender-text | #b57edc |
| pride-genderqueer-white | pride-genderqueer-white-text | #ffffff |
| pride-genderqueer-green | pride-genderqueer-green-text | #4a8123 |
| class | text class | hex |
|---|---|---|
| pride-nonbinary-yellow | pride-nonbinary-yellow-text | #fcf434 |
| pride-nonbinary-white | pride-nonbinary-white-text | #ffffff |
| pride-nonbinary-purple | pride-nonbinary-purple-text | #9c59d1 |
| pride-nonbinary-black | pride-nonbinary-black-text | #2c2c2c |
The Palette currently contains 15 different flags explicitly. The fact that a particular flag is or is not included in this version of the Palette does not reflect a desire to gatekeep the queer community or to render judgement on who should or should not be included and accepted. It reflects only the fact that I have a finite amount of time in my day and had to stop somewhere for now. In the future, I aim to expand it to at least all of the flags included on the Wikipedia Pride Flag page.
All flag images in this README are linked from Wikimedia Commons.
Colors in the Palette are from https://www.flagcolorcodes.com/flags/pride & https://brandpalettes.com/category/flags/lgbtq-flags/ and may differ slightly from those listed in other sources (including the SVGs on this page).
