Polaroid Color System

polaroid-colors-hex.js

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" },
}

polaroid-colors.js

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%)" }, 
}