GruvBox colors for frontend projects

GruvBoxColors.json

{
  "black": "#000000",
  "white": "#ffffff",
  "dark": {
    "0": "#1d2021",
    "1": "#282828",
    "2": "#32302f",
    "3": "#3c3836",
    "4": "#504945",
    "5": "#665c54"
  },
  "light": {
    "0": "#f9f5d7",
    "1": "#fbf1c7",
    "2": "#f2e5bc",
    "3": "#ebdbb2",
    "4": "#d5c4a1",
    "5": "#bdae93"
  },
  "gray": {
    "0": "#7c6f64",
    "1": "#928374",
    "2": "#a89984"
  },
  "red": {
    "0": "#9d0006",
    "1": "#cc241d",
    "2": "#fb4934"
  },
  "green": {
    "0": "#79740e",
    "1": "#98971a",
    "2": "#b8bb26"
  },
  "yellow": {
    "0": "#b57614",
    "1": "#d79921",
    "2": "#fabd2f"
  },
  "blue": {
    "0": "#076678",
    "1": "#458588",
    "2": "#83a598"
  },
  "purple": {
    "0": "#8f3f71",
    "1": "#b16286",
    "2": "#d3869b"
  },
  "aqua": {
    "0": "#427b58",
    "1": "#689d6a",
    "2": "#8ec07c"
  },
  "orange": {
    "0": "#af3a03",
    "1": "#d65d0e",
    "2": "#fe8019"
  }
}

GruvBoxColors.scss

$black: #000000; // rgb(0, 0, 0)
$white: #ffffff; // rgb(255, 255, 255)

$dark0: #1d2021; // rgb(29, 32, 33)
$dark1: #282828; // rgb(40, 40, 40)
$dark2: #32302f; // rgb(50, 48, 47)
$dark3: #3c3836; // rgb(60, 56, 54)
$dark4: #504945; // rgb(80, 73, 69)
$dark5: #665c54; // rgb(102, 92, 84)

$light0: #f9f5d7; // rgb(249, 245, 215)
$light1: #fbf1c7; // rgb(253, 244, 193)
$light2: #f2e5bc; // rgb(242, 229, 188)
$light3: #ebdbb2; // rgb(235, 219, 178)
$light4: #d5c4a1; // rgb(213, 196, 161)
$light5: #bdae93; // rgb(189, 174, 147)

$gray0: #7c6f64; // rgb(124, 111, 100)
$gray1: #928374; // rgb(146, 131, 116)
$gray2: #a89984; // rgb(168, 153, 132)

$red0: #9d0006; // rgb(157, 0, 6)
$red1: #cc241d; // rgb(204, 36, 29)
$red2: #fb4934; // rgb(251, 73, 52)

$green0: #79740e; // rgb(121, 116, 14)
$green1: #98971a; // rgb(152, 151, 26)
$green2: #b8bb26; // rgb(184, 187, 38)

$yellow0: #b57614; // rgb(181, 118, 20)
$yellow1: #d79921; // rgb(215, 153, 33)
$yellow2: #fabd2f; // rgb(250, 189, 47)

$blue0: #076678; // rgb(7, 102, 120)
$blue1: #458588; // rgb(69, 133, 136)
$blue2: #83a598; // rgb(131, 165, 152)

$purple0: #8f3f71; // rgb(143, 63, 113)
$purple1: #b16286; // rgb(177, 98, 134)
$purple2: #d3869b; // rgb(211, 134, 155)

$aqua0: #427b58; // rgb(66, 123, 88)
$aqua1: #689d6a; // rgb(104, 157, 106)
$aqua2: #8ec07c; // rgb(142, 192, 124)

$orange0: #af3a03; // rgb(175, 58, 3)
$orange1: #d65d0e; // rgb(214, 93, 14)
$orange2: #fe8019; // rgb(254, 128, 25)