Pride N Purpose ColorTheme Creator

Build a five-color palette by dragging, typing, and comparing live.

Each column includes a native color picker for the VS Code-style selector behavior, a live preview, and a hex input that stays in sync. You can drag the picker dot, paste a hex code, or copy the finished values from the footer row.

Slug northern-current
Status Northern Current
Color 1
#f94144
Color 2
#f8961e
Color 3
#f9c74f
Color 4
#90be6d
Color 5
#577590

Color 1

#f94144

Live output
#f94144

Color 2

#f8961e

Live output
#f8961e

Color 3

#f9c74f

Live output
#f9c74f

Color 4

#90be6d

Live output
#90be6d

Color 5

#577590

Live output
#577590

Export

Theme hex codes

Color 1
#f94144
Color 2
#f8961e
Color 3
#f9c74f
Color 4
#90be6d
Color 5
#577590

CSS Variables

Paste into a stylesheet

:root {
  --northern-current-1: #f94144;
  --northern-current-2: #f8961e;
  --northern-current-3: #f9c74f;
  --northern-current-4: #90be6d;
  --northern-current-5: #577590;
}

JSON Preview

Reference object

{
  "name": "Northern Current",
  "colors": [
    {
      "slot": "Color 1",
      "hex": "#f94144"
    },
    {
      "slot": "Color 2",
      "hex": "#f8961e"
    },
    {
      "slot": "Color 3",
      "hex": "#f9c74f"
    },
    {
      "slot": "Color 4",
      "hex": "#90be6d"
    },
    {
      "slot": "Color 5",
      "hex": "#577590"
    }
  ]
}