Background Color

Choose from a variety of colors for the background of an element.

Classes

Colors are derived from the Prime UI library theme being used via css properties.

Class Properties
bg-primary background-color: var(--primary-color);
color: var(--primary-color-text);
A
bg-primary-reverse background-color: var(--primary-color-text);
color: var(--primary-color);
A
bg-white background-color: #ffffff;
surface-0 background-color: var(--surface-0);
surface-50 background-color: var(--surface-50);
surface-200 background-color: var(--surface-100);
surface-200 background-color: var(--surface-200);
surface-300 background-color: var(--surface-300);
surface-400 background-color: var(--surface-400);
surface-500 background-color: var(--surface-500);
surface-600 background-color: var(--surface-600);
surface-700 background-color: var(--surface-700);
surface-800 background-color: var(--surface-800);
surface-900 background-color: var(--surface-900);
bg-blue-50 background-color: var(--blue-50);
bg-blue-100 background-color: var(--blue-100);
bg-blue-200 background-color: var(--blue-200);
bg-blue-300 background-color: var(--blue-300);
bg-blue-400 background-color: var(--blue-400);
bg-blue-500 background-color: var(--blue-500);
bg-blue-600 background-color: var(--blue-600);
bg-blue-700 background-color: var(--blue-700);
bg-blue-800 background-color: var(--blue-800);
bg-blue-900 background-color: var(--blue-900);
bg-green-50 background-color: var(--green-50);
bg-green-100 background-color: var(--green-100);
bg-green-200 background-color: var(--green-200);
bg-green-300 background-color: var(--green-300);
bg-green-400 background-color: var(--green-400);
bg-green-500 background-color: var(--green-500);
bg-green-600 background-color: var(--green-600);
bg-green-700 background-color: var(--green-700);
bg-green-800 background-color: var(--green-800);
bg-green-900 background-color: var(--green-900);
bg-yellow-50 background-color: var(--yellow-50);
bg-yellow-100 background-color: var(--yellow-100);
bg-yellow-200 background-color: var(--yellow-200);
bg-yellow-300 background-color: var(--yellow-300);
bg-yellow-400 background-color: var(--yellow-400);
bg-yellow-500 background-color: var(--yellow-500);
bg-yellow-600 background-color: var(--yellow-600);
bg-yellow-700 background-color: var(--yellow-700);
bg-yellow-800 background-color: var(--yellow-800);
bg-yellow-900 background-color: var(--yellow-900);
bg-cyan-50 background-color: var(--cyan-50);
bg-cyan-100 background-color: var(--cyan-100);
bg-cyan-200 background-color: var(--cyan-200);
bg-cyan-300 background-color: var(--cyan-300);
bg-cyan-400 background-color: var(--cyan-400);
bg-cyan-500 background-color: var(--cyan-500);
bg-cyan-600 background-color: var(--cyan-600);
bg-cyan-700 background-color: var(--cyan-700);
bg-cyan-800 background-color: var(--cyan-800);
bg-cyan-900 background-color: var(--cyan-900);
bg-pink-50 background-color: var(--pink-50);
bg-pink-100 background-color: var(--pink-100);
bg-pink-200 background-color: var(--pink-200);
bg-pink-300 background-color: var(--pink-300);
bg-pink-400 background-color: var(--pink-400);
bg-pink-500 background-color: var(--pink-500);
bg-pink-600 background-color: var(--pink-600);
bg-pink-700 background-color: var(--pink-700);
bg-pink-800 background-color: var(--pink-800);
bg-pink-900 background-color: var(--pink-900);
bg-indigo-50 background-color: var(--indigo-50);
bg-indigo-100 background-color: var(--indigo-100);
bg-indigo-200 background-color: var(--indigo-200);
bg-indigo-300 background-color: var(--indigo-300);
bg-indigo-400 background-color: var(--indigo-400);
bg-indigo-500 background-color: var(--indigo-500);
bg-indigo-600 background-color: var(--indigo-600);
bg-indigo-700 background-color: var(--indigo-700);
bg-indigo-800 background-color: var(--indigo-800);
bg-indigo-900 background-color: var(--indigo-900);
bg-teal-50 background-color: var(--teal-50);
bg-teal-100 background-color: var(--teal-100);
bg-teal-200 background-color: var(--teal-200);
bg-teal-300 background-color: var(--teal-300);
bg-teal-400 background-color: var(--teal-400);
bg-teal-500 background-color: var(--teal-500);
bg-teal-600 background-color: var(--teal-600);
bg-teal-700 background-color: var(--teal-700);
bg-teal-800 background-color: var(--teal-800);
bg-teal-900 background-color: var(--teal-900);
bg-orange-50 background-color: var(--orange-50);
bg-orange-100 background-color: var(--orange-100);
bg-orange-200 background-color: var(--orange-200);
bg-orange-300 background-color: var(--orange-300);
bg-orange-400 background-color: var(--orange-400);
bg-orange-500 background-color: var(--orange-500);
bg-orange-600 background-color: var(--orange-600);
bg-orange-700 background-color: var(--orange-700);
bg-orange-800 background-color: var(--orange-800);
bg-orange-900 background-color: var(--orange-900);
bg-bluegray-50 background-color: var(--bluegray-50);
bg-bluegray-100 background-color: var(--bluegray-100);
bg-bluegray-200 background-color: var(--bluegray-200);
bg-bluegray-300 background-color: var(--bluegray-300);
bg-bluegray-400 background-color: var(--bluegray-400);
bg-bluegray-500 background-color: var(--bluegray-500);
bg-bluegray-600 background-color: var(--bluegray-600);
bg-bluegray-700 background-color: var(--bluegray-700);
bg-bluegray-800 background-color: var(--bluegray-800);
bg-bluegray-900 background-color: var(--bluegray-900);
bg-purple-50 background-color: var(--purple-50);
bg-purple-100 background-color: var(--purple-100);
bg-purple-200 background-color: var(--purple-200);
bg-purple-300 background-color: var(--purple-300);
bg-purple-400 background-color: var(--purple-400);
bg-purple-500 background-color: var(--purple-500);
bg-purple-600 background-color: var(--purple-600);
bg-purple-700 background-color: var(--purple-700);
bg-purple-800 background-color: var(--purple-800);
bg-purple-900 background-color: var(--purple-900);
bg-gray-50 background-color: var(--gray-50);
bg-gray-100 background-color: var(--gray-100);
bg-gray-200 background-color: var(--gray-200);
bg-gray-300 background-color: var(--gray-300);
bg-gray-400 background-color: var(--gray-400);
bg-gray-500 background-color: var(--gray-500);
bg-gray-600 background-color: var(--gray-600);
bg-gray-700 background-color: var(--gray-700);
bg-gray-800 background-color: var(--gray-800);
bg-gray-900 background-color: var(--gray-900);
Examples
surface-700
bg-blue-700
bg-purple-700

<div class="card flex flex-wrap md:justify-content-between justify-content-center">
    <div class="surface-700 text-0 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">surface-700</div>
    <div class="bg-blue-700 text-0 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">bg-blue-700</div>
    <div class="bg-purple-700 text-0 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">bg-purple-700</div>
</div>

Pseudo States

Focus, Hover and Active states are available with the focus:, hover:, active: prefixes respectively.

hover:surface-700
hover:bg-blue-700
hover:bg-purple-700

<div class="card flex flex-wrap md:justify-content-between justify-content-center">
    <div class="surface-500 hover:surface-700 text-0 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:surface-700</div>
    <div class="bg-blue-500 hover:bg-blue-700 text-0 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:bg-blue-700</div>
    <div class="bg-purple-500 hover:bg-purple-700 text-0 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:bg-purple-700</div>
</div>