<ul class="colors">
<li class="kgd">KIITA Grape Dark (Bourgogne) <span class="pane">#640125</span></li>
<li class="kgl">KIITA Grape Light (Claret) <span class="pane">#941f57</span></li>
<li class="kgw">KIITA Grape Wine (Bordeaux) <span class="pane">#83274e</span></li>
<li class="gdl">Migdal Babel Base<span class="pane">#f2dfc3</span></li>
<li class="gdb">Migdal Background Green<span class="pane">#8fc31f</span></li>
<li class="obg">Overgrown Bush Green<span class="pane">#006633</span></li>
<li class="mcb">Milk Chocolate Brown<span class="pane">#84563c</span></li>
<li class="mtb">Milk Tea Brown<span class="pane">#efcd9a</span></li>
</ul>
<table class="colors">
<tr>
<td class="lab" colspan=3>Grape Colors</td>
<td class="lab">Symbol Mark</td>
<td class="lab">Symbol (Abbr.)</td>
</tr>
<tr>
<td class="kgd">KIITA Grape Dark<br />#640125</td>
<td class="kgl">KIITA Grape Light<br />#941f57</td>
<td class="kgw">KIITA Grape Wine<br />#83274e</td>
<td class="id" rowspan=4>
<img src="https://cl-kiita.github.io/assets/logos/CL_KIITA_Logo.svg">
</td>
<td class="id" rowspan=4>
<img src="https://raw.githubusercontent.com/CL-KIITA/BrandIdentities/refs/heads/conla/logos/CL_KIITA_Logo2.svg">
</td>
</tr>
<tr>
<td class="lab" colspan=3>Others</td>
</tr>
<tr>
<td class="gdl">Migdal Babel Base<br />#f2dfc3</td>
<td class="gdb">Migdal Back-grd. Green<br />#8fc31f</td>
<td class="obg">Over-gw. Bush Green<br />#006633</td>
</tr>
<tr>
<td class="lab" colspan=3>CAA</td>
</tr>
<tr>
<td class="mcb">Milk Chocolate Brown<br />#84563c</td>
<td class="mtb">Milk Tea Brown<br />#efcd9a</td>
<td class="yet"><br /></td>
<td class="lab" colspan=2>Flag</td>
</tr>
<tr>
<td class="lab" colspan=3>(None)</td>
<td class="id" rowspan=4 colspan=2>
<img src="https://raw.githubusercontent.com/CL-KIITA/BrandIdentities/refs/heads/conla/flags/kiita_flag.svg">
</td>
</tr>
<tr>
<td class="yet"> <br /> </td>
<td class="yet"> <br /> </td>
<td class="yet"> <br /> </td>
</tr>
<tr>
<td class="lab" colspan=3>(None)</td>
</tr>
<tr>
<td class="yet"> <br /> </td>
<td class="yet"> <br /> </td>
<td class="yet"> <br /> </td>
</tr>
</table>
ul.colors {
font-size: 1.42em;
}
ul .pane {
padding-left: 1.5em;
}
.kgd .pane::before {
color: #640125;
}
.kgl .pane::before {
color: #941f57;
}
.kgw .pane::before {
color: #83274e;
}
.gdl .pane::before {
color: #f2dfc3;
}
.gdl .pane::before {
color: #f2dfc3;
}
.gdb .pane::before {
color: #8fc31f;
}
.obg .pane::before {
color: #006633;
}
.mcb .pane::before {
color: #84563c;
}
.mtb .pane::before {
color: #efcd9a;
}
.pane::before {
content: "■";
font-size: 1.5em;
line-height: 0.8em;
}
table.colors {
font-size: 1.5em;
border-collapse: collapse;
}
table.colors td:not(.lab):not(.id) {
font-size: 0.63em;
width: 5em;
height: 5em;
vertical-align: bottom;
}
table.colors td.lab {
border: 1.5px solid #ffc2c6;
font-size: 0.9em;
}
table.colors td.id {
border: 1.5px solid #ffc2c6;
font-size: 1.3em;
text-align: center;
vertical-align: center;
}
table.colors td.id img {
font-size: 6.5em;
height: 1em;
object-fit: contain;
width: 50%;
height: 50%;
}
table.colors td.yet {
border: 1.5px solid #ffc2c6;
background-color: lightgray;
}
table.colors td.kgd {
background-color: #640125;
color: white;
}
table.colors td.kgl {
background-color: #941f57;
color: white;
}
table.colors td.kgw {
background-color: #83274e;
color: white;
}
table.colors td.gdl {
background-color: #f2dfc3;
color: black;
}
table.colors td.gdb {
background-color: #8fc31f;
color: black;
}
table.colors td.obg {
background-color: #006633;
color: white;
}
table.colors td.mcb {
background-color: #84563c;
color: white;
}
table.colors td.mtb {
background-color: #efcd9a;
color: black;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.