<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;
}