Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Polaroid Color System
const colors = {
white100: "#FFFFFF",
white80: "hsla(0, 0%, 100%, 0.8)",
white50: "hsla(0, 0%, 100%, 0.5)",
white20: "hsla(0, 0%, 100%, 0.2)",
flash100: "#EEEEEE",
flash80: "hsla(0, 0%, 93%, 0.8)",
flash50: "hsla(0, 0%, 93%, 0.5)",
flash20: "hsla(0, 0%, 93%, 0.2)",
silver100: "#CCCCCC",
silver80: "hsla(0, 0%, 80%, 0.8)",
silver50: "hsla(0, 0%, 80%, 0.5)",
silver20: "hsla(0, 0%, 80%, 0.2)",
black100: "#000000",
black80: "hsla(0, 0%, 0%, 0.8)",
black50: "hsla(0, 0%, 0%, 0.5)",
black20: "hsla(0, 0%, 0%, 0.2)",
film100: "#212121",
film80: "hsla(0, 0%, 13%, 0.8)",
film50: "hsla(0, 0%, 13%, 0.5)",
film20: "hsla(0, 0%, 13%, 0.2)",
carbon100: "#333333",
carbon80: "hsla(0, 0%, 20%, 0.8)",
carbon50: "hsla(0, 0%, 20%, 0.5)",
carbon20: "hsla(0, 0%, 20%, 0.2)",
// Base colors increment by 30 degrees in hue
// Base colors have been tested to have good contrast on light and dark backgrounds
// Light and Dark colors were computed using lighten and darken functions on the base color by 80%
saffron: { base: "#F45454", light: "#FAE2E2", dark: "#3B0703" },
mango: { base: "#FF9933", light: "#FCEEDD", dark: "#412207" },
lemon: { base: "#EBEB47", light: "#FBFBE2", dark: "#3F3E0E" },
lime: { base: "#A6FB51", light: "#F3FEE3", dark: "#2D4810" },
aloe: { base: "#83FC83", light: "#EEFEEC", dark: "#225313" },
eucalyptus: { base: "#51FBA6", light: "#E6FEF1", dark: "#1C4827" },
crystal: { base: "#3DF5F5", light: "#E3FDFE", dark: "#194243" },
azure: { base: "#007FFF", light: "#D6EAFD", dark: "#051C39" },
lavender: { base: "#5555F5", light: "#E1E2FC", dark: "#000746" },
veronica: { base: "#A459EF", light: "#EEE4FB", dark: "#200A42" },
blush: { base: "#F668F6", light: "#FAE7FD", dark: "#460D4B" },
rose: { base: "#F23C97", light: "#F8DFED", dark: "#3B0821" },
alloy: { base: "#CCCCCC", light: "#F7F7F7", dark: "#2E2E2E" },
}
const colors = {
white100: "#FFFFFF",
white80: "hsla(0, 0%, 100%, 0.8)",
white50: "hsla(0, 0%, 100%, 0.5)",
white20: "hsla(0, 0%, 100%, 0.2)",
flash100: "#EEEEEE",
flash80: "hsla(0, 0%, 93%, 0.8)",
flash50: "hsla(0, 0%, 93%, 0.5)",
flash20: "hsla(0, 0%, 93%, 0.2)",
silver100: "#CCCCCC",
silver80: "hsla(0, 0%, 80%, 0.8)",
silver50: "hsla(0, 0%, 80%, 0.5)",
silver20: "hsla(0, 0%, 80%, 0.2)",
black100: "#000000",
black80: "hsla(0, 0%, 0%, 0.8)",
black50: "hsla(0, 0%, 0%, 0.5)",
black20: "hsla(0, 0%, 0%, 0.2)",
film100: "#212121",
film80: "hsla(0, 0%, 13%, 0.8)",
film50: "hsla(0, 0%, 13%, 0.5)",
film20: "hsla(0, 0%, 13%, 0.2)",
carbon100: "#333333",
carbon80: "hsla(0, 0%, 20%, 0.8)",
carbon50: "hsla(0, 0%, 20%, 0.5)",
carbon20: "hsla(0, 0%, 20%, 0.2)",
// Base colors increment by 30 degrees in hue
// Base colors have been tested to have good contrast on light and dark backgrounds
// Light and Dark colors were computed using lighten and darken functions on the base color by 80%
saffron: { base: "hsl(0, 90%, 65%)", light: "hsl(0, 89%, 93%)", dark: "hsl(0, 87%, 12%)" },
mango: { base: "hsl(30, 100%, 60%)", light: "hsl(30, 95%, 92%)", dark: "hsl(30, 100%, 12%)" },
lemon: { base: "hsl(60, 80%, 60%)", light: "hsl(60, 76%, 92%)", dark: "hsl(60, 80%, 12%)" },
lime: { base: "hsl(90, 95%, 65%)", light: "hsl(90, 94%, 93%)", dark: "hsl(90, 97%, 13%)" },
aloe: { base: "hsl(120, 95%, 75%)", light: "hsl(120, 92%, 95%)", dark: "hsl(120, 97%, 15%)" },
eucalyptus: { base: "hsl(150, 95%, 65%)", light: "hsl(150, 94%, 93%)", dark: "hsl(150, 97%, 13%)" },
crystal: { base: "hsl(180, 90%, 60%)", light: "hsl(180, 90%, 92%)", dark: "hsl(180, 93%, 12%)" },
azure: { base: "hsl(210, 100%, 50%)", light: "hsl(210, 100%, 90%)", dark: "hsl(210, 100%, 10%)" },
lavender: { base: "hsl(240, 90%, 65%)", light: "hsl(240, 89%, 93%)", dark: "hsl(240, 91%, 13%)" },
veronica: { base: "hsl(270, 80%, 65%)", light: "hsl(270, 78%, 93%)", dark: "hsl(270, 82%, 13%)" },
blush: { base: "hsl(300, 90%, 70%)", light: "hsl(300, 87%, 94%)", dark: "hsl(300, 91%, 14%)" },
rose: { base: "hsl(330, 85%, 60%)", light: "hsl(330, 85%, 92%)", dark: "hsl(330, 87%, 12%)" },
alloy: { base: "hsl(0, 0%, 80%)", light: "hsl(0, 0%, 96%)", dark: "hsl(0, 0%, 16%)" },
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.