DE-PACK Component Library

übersicht Farben: Default 

<h1>Color</h1>

<div class="flex flex-row gap-1">
    <div class="p-2 w-64 h-64 text-xs font-mono bg-lava">
        <div class="bg-white">
            <div>Class: lava</div>
            <div>Hex: #c31924</div>
        </div>
    </div>
    <div class="p-2 w-64 h-64 text-xs font-mono bg-honeyyellow">
        <div class="bg-white">
            <div>Class: honeyyellow</div>
            <div>Hex: #f6ae2d</div>
        </div>
    </div>
    <div class="p-2 w-64 h-64 text-xs font-mono bg-androidgreen">
        <div class="bg-white">
            <div>Class: androidgreen</div>
            <div>Hex: #95c03d</div>
        </div>
    </div>
    <div class="p-2 w-64 h-64 text-xs font-mono bg-onyx">
        <div class="bg-white">
            <div>Class: onyx</div>
            <div>Hex: #3d3d3d</div>
        </div>
    </div>
    <div class="p-2 w-64 h-64 text-xs font-mono bg-queenblue">
        <div class="bg-white">
            <div>Class: queenblue</div>
            <div>Hex: #33658a</div>
        </div>
    </div>
    <div class="p-2 w-64 h-64 text-xs font-mono bg-darkskyblue">
        <div class="bg-white">
            <div>Class: darkskyblue</div>
            <div>Hex: #86bbd8</div>
        </div>
    </div>
    <div class="p-2 w-64 h-64 text-xs font-mono bg-isabelline">
        <div class="bg-white">
            <div>Class: isabelline</div>
            <div>Hex: #efefea</div>
        </div>
    </div>
    <div class="p-2 w-64 h-64 text-xs font-mono bg-ghostwhite">
        <div class="bg-white">
            <div>Class: ghostwhite</div>
            <div>Hex: #f6f7fc</div>
        </div>
    </div>
</div>

<h2>Alle Farben mit Schattierungen</h2>

<h2>Lava</h2>
<p>Logo-Farbe als Richtwert für alle anderen Farben, Schmuckfarben und Schattierungen.</p>

<div class="flex flex-row gap-1">
    <div class="p-2 w-48 h-48 text-white text-xs font-mono" style="background-color: #e32633">
        <div>Name: Lava (light)</div>
        <div>Class: lava-light</div>
        <div>Hex: #e32633</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>

    <div class="p-2 w-64 h-64 text-white text-xs font-mono font-bold" style="background-color: #c31924">
        <div>Name: Lava</div>
        <div>Class: lava</div>
        <div>Hex: #c31924</div>
        <div>RGB: 195, 25, 36</div>
        <div>CMYK: 0, 87, 82, 24</div>
    </div>

    <div class="p-2 w-48 h-48 text-white text-xs font-mono" style="background-color: #a2151f">
        <div>Name: Lava (dark)</div>
        <div>Class: lava-dark</div>
        <div>Hex: #a2151f</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>
</div>

<div class="lava-gradient p-2 mt-2 w-full h-48">
    'lava-gradient' als Klasse angewendet.
    Verlauf ändert sich bei Mauseover.
</div>
<h2>Honey Yellow</h2>
<p>Kontrastfarbe zu Lava und Schmuckfarbe.</p>

<div class="flex flex-row gap-1">
    <div class="p-2 w-48 h-48 text-black text-xs font-mono" style="background-color: #f8c462">
        <div>Name: Lava (light)</div>
        <div>Class: honeyyellow-light</div>
        <div>Hex: #f8c462</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>

    <div class="p-2 w-64 h-64 text-black text-xs font-mono font-bold" style="background-color: #f6ae2d">
        <div>Name: Lava</div>
        <div>Class: honeyyellow</div>
        <div>Hex: #f6ae2d</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>

    <div class="p-2 w-48 h-48 text-black text-xs font-mono" style="background-color: #f5a614">
        <div>Name: Lava (dark)</div>
        <div>Class: honeyyellow-dark</div>
        <div>Hex: #f5a614</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>
</div>

<div class="honeyyellow-gradient p-2 mt-2 w-full h-48">
    'honeyyellow-gradient' als Klasse angewendet.
    Verlauf ändert sich bei Mauseover.
</div>
<h2>Android Green</h2>
<p>Hauptsächliche Anwendung bei reinpapier und Umwelt-Plaketten.</p>

<div class="flex flex-row gap-1">
    <div class="p-2 w-48 h-48 text-black text-xs font-mono" style="background-color: #abce64">
        <div>Name: Android Green (light)</div>
        <div>Class: androidgreen-light</div>
        <div>Hex: #abce64</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>

    <div class="p-2 w-64 h-64 text-black text-xs font-mono font-bold" style="background-color: #95c03d">
        <div>Name: Android Green</div>
        <div>Class: androidgreen</div>
        <div>Hex: #95c03d</div>
        <div>RGB: 149, 192, 61</div>
        <div>CMYK: 22, 0, 68, 25</div>
    </div>

    <div class="p-2 w-48 h-48 text-black text-xs font-mono" style="background-color: #84ab36">
        <div>Name: Android Green (dark)</div>
        <div>Class: androidgreen-dark</div>
        <div>Hex: #84ab36</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>
</div>

<div class="androidgreen-gradient p-2 mt-2 w-full h-48">
    'androidgreen-gradient' als Klasse angewendet.
    Verlauf ändert sich bei Mauseover.
</div>
<h2>Onyx</h2>
<p>Anwendung für Störbalken (CTA) und Footer.</p>

<div class="flex flex-row gap-1">
    <div class="p-2 w-48 h-48 text-white text-xs font-mono" style="background-color: #525252">
        <div>Name: Onyx (light)</div>
        <div>Class: onyx-light</div>
        <div>Hex: #525252</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>

    <div class="p-2 w-64 h-64 text-white text-xs font-mono font-bold" style="background-color: #3d3d3d">
        <div>Name: Onyx</div>
        <div>Class: onyx</div>
        <div>Hex: #3d3d3d</div>
        <div>RGB: 149, 192, 61</div>
        <div>CMYK: 22, 0, 68, 25</div>
    </div>

    <div class="p-2 w-48 h-48 text-white text-xs font-mono" style="background-color: #292929">
        <div>Name: Onyx (dark)</div>
        <div>Class: onyx-dark</div>
        <div>Hex: #292929</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>
</div>

<div class="onyx-gradient p-2 mt-2 w-full h-48">
    'onyx-gradient' als Klasse angewendet.
    Verlauf ändert sich bei Mauseover.
</div>
<h2>Isabelline</h2>
<p>Hintergrundfarbe Schmuckfarbe.</p>

<div class="flex flex-row gap-1">

    <div class="p-2 w-64 h-64 text-black text-xs font-mono font-bold" style="background-color: #efefea">
        <div>Name: Isabelline</div>
        <div>Class: isabelline</div>
        <div>Hex: #efefea</div>
        <div>RGB: </div>
        <div>CMYK: </div>
    </div>

</div>
<h2>Ghostwhite</h2>
<p>Hintergrundfarbe für interaktive Elemente und Formulare.</p>

<div class="flex flex-row gap-1">

    <div class="p-2 w-64 h-64 text-black text-xs font-mono font-bold" style="background-color: #f6f7fc">
        <div>Name: Ghostwhite</div>
        <div>Class: ghostwhite</div>
        <div>Hex: #f6f7fc</div>
        <div>RGB: </div>
        <div>CMYK: </div>
    </div>

</div>
<h2>Queenblue</h2>
<p>Schmuckfarbe.</p>

<div class="flex flex-row gap-1">
    <div class="p-2 w-48 h-48 text-white text-xs font-mono" style="background-color: #4282b3">
        <div>Name: Queenblue (light)</div>
        <div>Class: queenblue-light</div>
        <div>Hex: #4282b3</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>

    <div class="p-2 w-64 h-64 text-white text-xs font-mono font-bold" style="background-color: #33658a">
        <div>Name: Queenblue</div>
        <div>Class: queenblue</div>
        <div>Hex: #33658a</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>

    <div class="p-2 w-48 h-48 text-white text-xs font-mono" style="background-color: #2c5777">
        <div>Name: Queenblue (dark)</div>
        <div>Class: queenblue-dark</div>
        <div>Hex: #2c5777</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>
</div>

<div class="queenblue-gradient p-2 mt-2 w-full h-48">
    'queenblue-gradient' als Klasse angewendet.
    Verlauf ändert sich bei Mauseover.
</div>
<h2>Darkskyblue</h2>
<p>Schmuckfarbe.</p>

<div class="flex flex-row gap-1">
    <div class="p-2 w-48 h-48 text-black text-xs font-mono" style="background-color: #b2d4e6">
        <div>Name: Darkskyblue (light)</div>
        <div>Class: darkskyblue-light</div>
        <div>Hex: #b2d4e6</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>

    <div class="p-2 w-64 h-64 text-black text-xs font-mono font-bold" style="background-color: #86bbd8">
        <div>Name: Darkskyblue</div>
        <div>Class: darkskyblue</div>
        <div>Hex: #86bbd8</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>

    <div class="p-2 w-48 h-48 text-black text-xs font-mono" style="background-color: #74b1d2">
        <div>Name: Darkskyblue (dark)</div>
        <div>Class: darkskyblue-dark</div>
        <div>Hex: #74b1d2</div>
        <div>RGB: 0, 0, 0</div>
        <div>CMYK: 0, 0, 0, 0</div>
    </div>
</div>

<div class="darkskyblue-gradient p-2 mt-2 w-full h-48">
    'darkskyblue-gradient' als Klasse angewendet.
    Verlauf ändert sich bei Mauseover.
</div>
 
<h1>Color</h1>

<div class="flex flex-row gap-1">
  {% for col in colors %}
  <div class="p-2 w-64 h-64 text-xs font-mono bg-{{ col.default.class }}">
    <div class="bg-white">
      <div>Class: {{ col.default.class }}</div>
      <div>Hex: {{ col.default.hex }}</div>
    </div>
  </div>
  {% endfor %}
</div>

<h2>Alle Farben mit Schattierungen</h2>

{% include '@color--lava' %}
{% include '@color--honeyyellow' %}
{% include '@color--androidgreen' %}
{% include '@color--onyx' %}
{% include '@color--isabelline' %}
{% include '@color--ghostwhite' %}
{% include '@color--queenblue' %}
{% include '@color--darkskyblue' %}
 
{
  "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.