DE-PACK Component Library

übersicht Farben: Classes 

<h1>Color Classes</h1>

<div class="bg-lava-light">lava-light</div>
<div class="bg-lava">lava</div>
<div class="bg-lava-dark">lava-dark</div>

<div class="bg-honeyyellow-light">honeyyellow-light</div>
<div class="bg-honeyyellow">honeyyellow</div>
<div class="bg-honeyyellow-dark">honeyyellow-dark</div>

<div class="bg-androidgreen-light">androidgreen-light</div>
<div class="bg-androidgreen">androidgreen</div>
<div class="bg-androidgreen-dark">androidgreen-dark</div>

<div class="bg-onyx-light">onyx-light</div>
<div class="bg-onyx">onyx</div>
<div class="bg-onyx-dark">onyx-dark</div>

<div class="bg-queenblue-light">queenblue-light</div>
<div class="bg-queenblue">queenblue</div>
<div class="bg-queenblue-dark">queenblue-dark</div>

<div class="bg-darkskyblue-light">darkskyblue-light</div>
<div class="bg-darkskyblue">darkskyblue</div>
<div class="bg-darkskyblue-dark">darkskyblue-dark</div>

<div class="bg-ghostwhite">ghostwhite</div>
<div class="bg-isabelline">isabelline</div>
 
<h1>Color Classes</h1>

<div class="bg-lava-light">lava-light</div>
<div class="bg-lava">lava</div>
<div class="bg-lava-dark">lava-dark</div>

<div class="bg-honeyyellow-light">honeyyellow-light</div>
<div class="bg-honeyyellow">honeyyellow</div>
<div class="bg-honeyyellow-dark">honeyyellow-dark</div>

<div class="bg-androidgreen-light">androidgreen-light</div>
<div class="bg-androidgreen">androidgreen</div>
<div class="bg-androidgreen-dark">androidgreen-dark</div>

<div class="bg-onyx-light">onyx-light</div>
<div class="bg-onyx">onyx</div>
<div class="bg-onyx-dark">onyx-dark</div>

<div class="bg-queenblue-light">queenblue-light</div>
<div class="bg-queenblue">queenblue</div>
<div class="bg-queenblue-dark">queenblue-dark</div>

<div class="bg-darkskyblue-light">darkskyblue-light</div>
<div class="bg-darkskyblue">darkskyblue</div>
<div class="bg-darkskyblue-dark">darkskyblue-dark</div>

<div class="bg-ghostwhite">ghostwhite</div>
<div class="bg-isabelline">isabelline</div>
 
{
  "colors": {
    "lava": {
      "default": {
        "label": "Lava",
        "class": "lava",
        "hex": "#c31924",
        "rgb": "195, 25, 36",
        "cmyk": "0, 87, 82, 24"
      },
      "light": {
        "label": "Lava (light)",
        "class": "lava-light",
        "hex": "#e32633",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      },
      "dark": {
        "label": "Lava (dark)",
        "class": "lava-dark",
        "hex": "#a2151f",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      }
    },
    "honeyyellow": {
      "default": {
        "label": "Lava",
        "class": "honeyyellow",
        "hex": "#f6ae2d",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      },
      "light": {
        "label": "Lava (light)",
        "class": "honeyyellow-light",
        "hex": "#f8c462",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      },
      "dark": {
        "label": "Lava (dark)",
        "class": "honeyyellow-dark",
        "hex": "#f5a614",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      }
    },
    "androidgreen": {
      "default": {
        "label": "Android Green",
        "class": "androidgreen",
        "hex": "#95c03d",
        "rgb": "149, 192, 61",
        "cmyk": "22, 0, 68, 25"
      },
      "light": {
        "label": "Android Green (light)",
        "class": "androidgreen-light",
        "hex": "#abce64",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      },
      "dark": {
        "label": "Android Green (dark)",
        "class": "androidgreen-dark",
        "hex": "#84ab36",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      }
    },
    "onyx": {
      "default": {
        "label": "Onyx",
        "class": "onyx",
        "hex": "#3d3d3d",
        "rgb": "149, 192, 61",
        "cmyk": "22, 0, 68, 25"
      },
      "light": {
        "label": "Onyx (light)",
        "class": "onyx-light",
        "hex": "#525252",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      },
      "dark": {
        "label": "Onyx (dark)",
        "class": "onyx-dark",
        "hex": "#292929",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      }
    },
    "queenblue": {
      "default": {
        "label": "Queenblue",
        "class": "queenblue",
        "hex": "#33658a",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      },
      "light": {
        "label": "Queenblue (light)",
        "class": "queenblue-light",
        "hex": "#4282b3",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      },
      "dark": {
        "label": "Queenblue (dark)",
        "class": "queenblue-dark",
        "hex": "#2c5777",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      }
    },
    "darkskyblue": {
      "default": {
        "label": "Darkskyblue",
        "class": "darkskyblue",
        "hex": "#86bbd8",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      },
      "light": {
        "label": "Darkskyblue (light)",
        "class": "darkskyblue-light",
        "hex": "#b2d4e6",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      },
      "dark": {
        "label": "Darkskyblue (dark)",
        "class": "darkskyblue-dark",
        "hex": "#74b1d2",
        "rgb": "0, 0, 0",
        "cmyk": "0, 0, 0, 0"
      }
    },
    "isabelline": {
      "default": {
        "label": "Isabelline",
        "class": "isabelline",
        "hex": "#efefea",
        "rgb": "",
        "cmyk": ""
      }
    },
    "ghostwhite": {
      "default": {
        "label": "Ghostwhite",
        "class": "ghostwhite",
        "hex": "#f6f7fc",
        "rgb": "",
        "cmyk": ""
      }
    }
  }
}

No notes defined.