README.md

Pride Palette

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.

Class Naming Conventions

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).

Colors

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.

Generator

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.

Flags and Classes

Rainbow Flag

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

Progress Pride Flag

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

Transgender Pride

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

Bi Pride

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

Pansexuality Pride

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

Labrys Lesbian

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

Lipstick Lesbian

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

Orange-pink Lesbian

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

Intersex Pride

class	text class	hex
pride-intersex-yellow	pride-intersex-yellow-text	#ffd800
pride-intersex-violet	pride-intersex-violet-text	#7902aa

Asexual Pride

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

Aromantic Pride

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

Genderfluidity Pride

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

Polysexuality Pride

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

Genderqueer Pride

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

Non-binary Pride

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

Notes, Acknowledgements, and Sources

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).

---