<div class="row g-0">
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-primary  false h-45">
      <pre class="text-center"><code class="text-white">.bg-primary  </code><br/><code class="text-white mt-2 dark:hidden">#3874ff</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-secondary  false h-45">
      <pre class="text-center"><code class="text-white">.bg-secondary  </code><br/><code class="text-white mt-2 dark:hidden">#49525d</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-success  false h-45">
      <pre class="text-center"><code class="text-white">.bg-success  </code><br/><code class="text-white mt-2 dark:hidden">#25b003</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-info  false h-45">
      <pre class="text-center"><code class="text-white">.bg-info  </code><br/><code class="text-white mt-2 dark:hidden">#0097eb</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-warning  false h-45">
      <pre class="text-center"><code class="text-white">.bg-warning  </code><br/><code class="text-white mt-2 dark:hidden">#e5780b</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-danger  false h-45">
      <pre class="text-center"><code class="text-white">.bg-danger  </code><br/><code class="text-white mt-2 dark:hidden">#ec1f00</code></pre>
    </div>
  </div>
</div>

<div class="row g-0">
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-default h-45"><code class="text-default">.bg-default</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-soft h-45"><code class="text-default">.bg-soft</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-subtle h-45"><code class="text-default">.bg-subtle</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-muted h-45"><code class="text-default">.bg-muted</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-highlight h-45"><code class="text-default">.bg-highlight</code></div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 bg-emphasis h-45"><code class="text-default">.bg-emphasis</code></div>
  </div>
</div>

<div class="row g-0">
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-1000  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-1000  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#2b3036</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-950  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-950  </code><br/><code class="text-gray-100 mt-2 dark:hidden"></code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-900  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-900  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#49525d</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-800  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-800  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#5a6573</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-700  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-700  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#6d7a8a</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-600  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-600  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#84909e</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-500  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-500  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#9aa3af</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-400  false h-45">
      <pre class="text-center"><code class="text-gray-100">.bg-gray-400  </code><br/><code class="text-gray-100 mt-2 dark:hidden">#b1b9c2</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-300  false h-45">
      <pre class="text-center"><code class="text-emphasis">.bg-gray-300  </code><br/><code class="text-emphasis mt-2 dark:hidden">#e2e5e9</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-200  border h-45">
      <pre class="text-center"><code class="text-emphasis">.bg-gray-200  </code><br/><code class="text-emphasis mt-2 dark:hidden">#f1f2f4</code></pre>
    </div>
  </div>
  <div class="col-6 sm:col-4 lg:col-3">
    <div class="p-4 flex flex-center bg-gray-100  border h-45">
      <pre class="text-center"><code class="text-emphasis">.bg-gray-100  </code><br/><code class="text-emphasis mt-2 dark:hidden">#f6f7f8</code></pre>
    </div>
  </div>
</div>