<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>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: {{ colors.onyx.light.hex }}">
<div>Name: {{ colors.onyx.light.label }}</div>
<div>Class: {{ colors.onyx.light.class }}</div>
<div>Hex: {{ colors.onyx.light.hex }}</div>
<div>RGB: {{ colors.onyx.light.rgb }}</div>
<div>CMYK: {{ colors.onyx.light.cmyk }}</div>
</div>
<div class="p-2 w-64 h-64 text-white text-xs font-mono font-bold" style="background-color: {{ colors.onyx.default.hex }}">
<div>Name: {{ colors.onyx.default.label }}</div>
<div>Class: {{ colors.onyx.default.class }}</div>
<div>Hex: {{ colors.onyx.default.hex }}</div>
<div>RGB: {{ colors.onyx.default.rgb }}</div>
<div>CMYK: {{ colors.onyx.default.cmyk }}</div>
</div>
<div class="p-2 w-48 h-48 text-white text-xs font-mono" style="background-color: {{ colors.onyx.dark.hex }}">
<div>Name: {{ colors.onyx.dark.label }}</div>
<div>Class: {{ colors.onyx.dark.class }}</div>
<div>Hex: {{ colors.onyx.dark.hex }}</div>
<div>RGB: {{ colors.onyx.dark.rgb }}</div>
<div>CMYK: {{ colors.onyx.dark.cmyk }}</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>
{
"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.