History: Bootstrap Secondary and Tertiary Colors
Source of version: 1 (current)
Copy to clipboard
This table is from https://getbootstrap.com/docs/5.3/customize/color/ and can be used to test these colors in each theme and color mode.
{HTML()}
<div class="table-responsive">
<table class="table table-swatches">
<thead>
<tr>
<th style="width: 340px;">Description</th>
<th style="width: 200px;" class="ps-0">Swatch</th>
<th>Variables</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"><p><strong>Body —</strong> Default foreground (color) and background, including components.</p></td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-body-color);"></div>
</td>
<td><p><code>--bs-body-color</code><br/><code>--bs-body-color-rgb</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);"></div>
</td>
<td><p><code>--bs-body-bg</code><br/><code>--bs-body-bg-rgb</code></p></td>
</tr>
<tr>
<td rowspan="2"><p><strong>Secondary —</strong> Use the <code>color</code> option for lighter text. Use the <code>bg</code> option for
dividers and to indicate disabled component states.</p></td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);"></div>
</td>
<td><p><code>--bs-secondary-color</code><br/><code>--bs-secondary-color-rgb</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);"></div>
</td>
<td><p><code>--bs-secondary-bg</code><br/><code>--bs-secondary-bg-rgb</code></p></td>
</tr>
<tr>
<td rowspan="2"><p><strong>Tertiary —</strong> Use the <code>color</code> option for even lighter text. Use the <code>bg</code> option to
style backgrounds for hover states, accents, and wells.</p></td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);"></div>
</td>
<td><p><code>--bs-tertiary-color</code><br/><code>--bs-tertiary-color-rgb</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);"></div>
</td>
<td><p><code>--bs-tertiary-bg</code><br/><code>--bs-tertiary-bg-rgb</code></p></td>
</tr>
<tr>
<td><p><strong>Emphasis —</strong> For higher contrast text. Not applicable for backgrounds.</p></td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);"></div>
</td>
<td><p><code>--bs-emphasis-color</code><br/><code>--bs-emphasis-color-rgb</code></p></td>
</tr>
<tr>
<td><p><strong>Border —</strong> For component borders, dividers, and rules. Use <code>--bs-border-color-translucent</code> to blend with
backgrounds with an <code>rgba()</code> value.</p></td>
<td class="ps-0">
<div class="p-3 rounded-2" style="background-color: var(--bs-border-color);"></div>
</td>
<td><p><code>--bs-border-color</code><br/><code>--bs-border-color-rgb</code></p></td>
</tr>
<tr>
<td rowspan="4"><p><strong>Primary —</strong> Main theme color, used for hyperlinks, focus styles, and component and form active states.
</p></td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-primary"></div>
</td>
<td><p><code>--bs-primary</code><br/><code>--bs-primary-rgb</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)"></div>
</td>
<td><p><code>--bs-primary-bg-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid"></div>
</td>
<td><p><code>--bs-primary-border-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
</td>
<td><p><code>--bs-primary-text-emphasis</code></p></td>
</tr>
<tr>
<td rowspan="4"><p><strong>Success —</strong> Theme color used for positive or successful actions and information.</p></td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-success"></div>
</td>
<td><p><code>--bs-success</code><br/><code>--bs-success-rgb</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)"></div>
</td>
<td><p><code>--bs-success-bg-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid"></div>
</td>
<td><p><code>--bs-success-border-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
</td>
<td><p><code>--bs-success-text-emphasis</code></p></td>
</tr>
<tr>
<td rowspan="4"><p><strong>Danger —</strong> Theme color used for errors and dangerous actions.</p></td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-danger"></div>
</td>
<td><p><code>--bs-danger</code><br/><code>--bs-danger-rgb</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)"></div>
</td>
<td><p><code>--bs-danger-bg-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid"></div>
</td>
<td><p><code>--bs-danger-border-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
</td>
<td><p><code>--bs-danger-text-emphasis</code></p></td>
</tr>
<tr>
<td rowspan="4"><p><strong>Warning —</strong> Theme color used for non-destructive warning messages.</p></td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-warning"></div>
</td>
<td><p><code>--bs-warning</code><br/><code>--bs-warning-rgb</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)"></div>
</td>
<td><p><code>--bs-warning-bg-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid"></div>
</td>
<td><p><code>--bs-warning-border-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
</td>
<td><p><code>--bs-warning-text-emphasis</code></p></td>
</tr>
<tr>
<td rowspan="4"><p><strong>Info —</strong> Theme color used for neutral and informative content.</p></td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-info"></div>
</td>
<td><p><code>--bs-info</code><br/><code>--bs-info-rgb</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)"></div>
</td>
<td><p><code>--bs-info-bg-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid"></div>
</td>
<td><p><code>--bs-info-border-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
</td>
<td><p><code>--bs-info-text-emphasis</code></p></td>
</tr>
<tr>
<td rowspan="4"><p><strong>Light —</strong> Additional theme option for less contrasting colors.</p></td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-light"></div>
</td>
<td><p><code>--bs-light</code><br/><code>--bs-light-rgb</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)"></div>
</td>
<td><p><code>--bs-light-bg-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid"></div>
</td>
<td><p><code>--bs-light-border-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
</td>
<td><p><code>--bs-light-text-emphasis</code></p></td>
</tr>
<tr>
<td rowspan="4"><p><strong>Dark —</strong> Additional theme option for higher contrasting colors.</p></td>
<td class="ps-0">
<div class="p-3 rounded-2 bg-dark"></div>
</td>
<td><p><code>--bs-dark</code><br/><code>--bs-dark-rgb</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)"></div>
</td>
<td><p><code>--bs-dark-bg-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid"></div>
</td>
<td><p><code>--bs-dark-border-subtle</code></p></td>
</tr>
<tr>
<td>
<div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
</td>
<td><p><code>--bs-dark-text-emphasis</code></p></td>
</tr>
</tbody>
</table>
</div>
{HTML}