Background Color

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

Classes#

ClassProperties
bg-primarybackground-color: var(--primary-color);
color: var(--primary-color-text);
A
bg-primary-reversebackground-color: var(--primary-color-text);
color: var(--primary-color);
A
bg-whitebackground-color: #ffffff;
surface-groundbackground-color: var(--surface-ground);
surface-sectionbackground-color: var(--surface-section);
surface-cardbackground-color: var(--surface-card);
surface-overlaybackground-color: var(--surface-overlay);
surface-hoverbackground-color: var(--surface-hover);
surface-0background-color: var(--surface-0);
surface-50background-color: var(--surface-50);
surface-100background-color: var(--surface-100);
surface-200background-color: var(--surface-200);
surface-300background-color: var(--surface-300);
surface-400background-color: var(--surface-400);
surface-500background-color: var(--surface-500);
surface-600background-color: var(--surface-600);
surface-700background-color: var(--surface-700);
surface-800background-color: var(--surface-800);
surface-900background-color: var(--surface-900);
bg-blue-50background-color: var(--blue-50);
bg-blue-100background-color: var(--blue-100);
bg-blue-200background-color: var(--blue-200);
bg-blue-300background-color: var(--blue-300);
bg-blue-400background-color: var(--blue-400);
bg-blue-500background-color: var(--blue-500);
bg-blue-600background-color: var(--blue-600);
bg-blue-700background-color: var(--blue-700);
bg-blue-800background-color: var(--blue-800);
bg-blue-900background-color: var(--blue-900);
bg-green-50background-color: var(--green-50);
bg-green-100background-color: var(--green-100);
bg-green-200background-color: var(--green-200);
bg-green-300background-color: var(--green-300);
bg-green-400background-color: var(--green-400);
bg-green-500background-color: var(--green-500);
bg-green-600background-color: var(--green-600);
bg-green-700background-color: var(--green-700);
bg-green-800background-color: var(--green-800);
bg-green-900background-color: var(--green-900);
bg-yellow-50background-color: var(--yellow-50);
bg-yellow-100background-color: var(--yellow-100);
bg-yellow-200background-color: var(--yellow-200);
bg-yellow-300background-color: var(--yellow-300);
bg-yellow-400background-color: var(--yellow-400);
bg-yellow-500background-color: var(--yellow-500);
bg-yellow-600background-color: var(--yellow-600);
bg-yellow-700background-color: var(--yellow-700);
bg-yellow-800background-color: var(--yellow-800);
bg-yellow-900background-color: var(--yellow-900);
bg-cyan-50background-color: var(--cyan-50);
bg-cyan-100background-color: var(--cyan-100);
bg-cyan-200background-color: var(--cyan-200);
bg-cyan-300background-color: var(--cyan-300);
bg-cyan-400background-color: var(--cyan-400);
bg-cyan-500background-color: var(--cyan-500);
bg-cyan-600background-color: var(--cyan-600);
bg-cyan-700background-color: var(--cyan-700);
bg-cyan-800background-color: var(--cyan-800);
bg-cyan-900background-color: var(--cyan-900);
bg-pink-50background-color: var(--pink-50);
bg-pink-100background-color: var(--pink-100);
bg-pink-200background-color: var(--pink-200);
bg-pink-300background-color: var(--pink-300);
bg-pink-400background-color: var(--pink-400);
bg-pink-500background-color: var(--pink-500);
bg-pink-600background-color: var(--pink-600);
bg-pink-700background-color: var(--pink-700);
bg-pink-800background-color: var(--pink-800);
bg-pink-900background-color: var(--pink-900);
bg-indigo-50background-color: var(--indigo-50);
bg-indigo-100background-color: var(--indigo-100);
bg-indigo-200background-color: var(--indigo-200);
bg-indigo-300background-color: var(--indigo-300);
bg-indigo-400background-color: var(--indigo-400);
bg-indigo-500background-color: var(--indigo-500);
bg-indigo-600background-color: var(--indigo-600);
bg-indigo-700background-color: var(--indigo-700);
bg-indigo-800background-color: var(--indigo-800);
bg-indigo-900background-color: var(--indigo-900);
bg-teal-50background-color: var(--teal-50);
bg-teal-100background-color: var(--teal-100);
bg-teal-200background-color: var(--teal-200);
bg-teal-300background-color: var(--teal-300);
bg-teal-400background-color: var(--teal-400);
bg-teal-500background-color: var(--teal-500);
bg-teal-600background-color: var(--teal-600);
bg-teal-700background-color: var(--teal-700);
bg-teal-800background-color: var(--teal-800);
bg-teal-900background-color: var(--teal-900);
bg-orange-50background-color: var(--orange-50);
bg-orange-100background-color: var(--orange-100);
bg-orange-200background-color: var(--orange-200);
bg-orange-300background-color: var(--orange-300);
bg-orange-400background-color: var(--orange-400);
bg-orange-500background-color: var(--orange-500);
bg-orange-600background-color: var(--orange-600);
bg-orange-700background-color: var(--orange-700);
bg-orange-800background-color: var(--orange-800);
bg-orange-900background-color: var(--orange-900);
bg-bluegray-50background-color: var(--bluegray-50);
bg-bluegray-100background-color: var(--bluegray-100);
bg-bluegray-200background-color: var(--bluegray-200);
bg-bluegray-300background-color: var(--bluegray-300);
bg-bluegray-400background-color: var(--bluegray-400);
bg-bluegray-500background-color: var(--bluegray-500);
bg-bluegray-600background-color: var(--bluegray-600);
bg-bluegray-700background-color: var(--bluegray-700);
bg-bluegray-800background-color: var(--bluegray-800);
bg-bluegray-900background-color: var(--bluegray-900);
bg-purple-50background-color: var(--purple-50);
bg-purple-100background-color: var(--purple-100);
bg-purple-200background-color: var(--purple-200);
bg-purple-300background-color: var(--purple-300);
bg-purple-400background-color: var(--purple-400);
bg-purple-500background-color: var(--purple-500);
bg-purple-600background-color: var(--purple-600);
bg-purple-700background-color: var(--purple-700);
bg-purple-800background-color: var(--purple-800);
bg-purple-900background-color: var(--purple-900);
bg-gray-50background-color: var(--gray-50);
bg-gray-100background-color: var(--gray-100);
bg-gray-200background-color: var(--gray-200);
bg-gray-300background-color: var(--gray-300);
bg-gray-400background-color: var(--gray-400);
bg-gray-500background-color: var(--gray-500);
bg-gray-600background-color: var(--gray-600);
bg-gray-700background-color: var(--gray-700);
bg-gray-800background-color: var(--gray-800);
bg-gray-900background-color: var(--gray-900);
bg-red-50background-color: var(--red-50);
bg-red-100background-color: var(--red-100);
bg-red-200background-color: var(--red-200);
bg-red-300background-color: var(--red-300);
bg-red-400background-color: var(--red-400);
bg-red-500background-color: var(--red-500);
bg-red-600background-color: var(--red-600);
bg-red-700background-color: var(--red-700);
bg-red-800background-color: var(--red-800);
bg-red-900background-color: var(--red-900);
bg-primary-50background-color: var(--primary-50);
bg-primary-100background-color: var(--primary-100);
bg-primary-200background-color: var(--primary-200);
bg-primary-300background-color: var(--primary-300);
bg-primary-400background-color: var(--primary-400);
bg-primary-500background-color: var(--primary-500);
bg-primary-600background-color: var(--primary-600);
bg-primary-700background-color: var(--primary-700);
bg-primary-800background-color: var(--primary-800);
bg-primary-900background-color: var(--primary-900);
bg-white-alpha-10background-color: rgba(255,255,255,0.1);
bg-white-alpha-20background-color: rgba(255,255,255,0.2);
bg-white-alpha-30background-color: rgba(255,255,255,0.3);
bg-white-alpha-40background-color: rgba(255,255,255,0.4);
bg-white-alpha-50background-color: rgba(255,255,255,0.5);
bg-white-alpha-60background-color: rgba(255,255,255,0.6);
bg-white-alpha-70background-color: rgba(255,255,255,0.7);
bg-white-alpha-80background-color: rgba(255,255,255,0.8);
bg-white-alpha-90background-color: rgba(255,255,255,0.9);
bg-black-alpha-10background-color: rgba(0,0,0,0.1);
bg-black-alpha-20background-color: rgba(0,0,0,0.2);
bg-black-alpha-30background-color: rgba(0,0,0,0.3);
bg-black-alpha-40background-color: rgba(0,0,0,0.4);
bg-black-alpha-50background-color: rgba(0,0,0,0.5);
bg-black-alpha-60background-color: rgba(0,0,0,0.6);
bg-black-alpha-70background-color: rgba(0,0,0,0.7);
bg-black-alpha-80background-color: rgba(0,0,0,0.8);
bg-black-alpha-90background-color: rgba(0,0,0,0.9);

Examples#

surface-500
bg-primary
bg-primary
<div class="flex flex-wrap md:justify-content-between justify-content-center">
    <div class="surface-500 font-bold border-round m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">
        surface-500
    </div>
    <div class="bg-primary font-bold border-round m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">
        bg-primary
    </div>
    <div class="bg-primary font-bold border-round m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">
        bg-primary
    </div>
</div>
 

Pseudo States#

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

hover:surface-700
hover:bg-cyan-700
hover:bg-orange-700
<div class="flex flex-wrap md:justify-content-between justify-content-center">
    <div class="surface-500 hover:surface-700 border-round font-bold m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">
        hover:surface-700
    </div>
    <div class="bg-primary hover:bg-cyan-700 border-round font-bold m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">
        hover:bg-cyan-700
    </div>
    <div class="bg-primary hover:bg-orange-700 border-round font-bold m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">
        hover:bg-orange-700
    </div>
</div>
 

Named Theme Color#

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

ClassDescription
.surface-groundGround color like body background
.surface-sectionBackground of a content section
.surface-cardBackground of an elevated card element
.surface-overlayOverlay elements like modals
.surface-borderBorder colors to divide content
.surface-hoverBackground color of an element in hover state
surface-ground
surface-border
surface-section
hover:bg-orange-700
<div class="flex flex-wrap md:justify-content-between justify-content-center">
    <div class="surface-ground hover:surface-500 border-round surface-border border-3 text-surface-100 font-bold m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">
        surface-ground <br/> surface-border
    </div>
    <div class="surface-section hover:surface-500 border-round text-surface-100 font-bold m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">
        surface-section
    </div>
    <div class="surface-card hover:surface-500 border-round surface-border border-3 text-surface-100 font-bold m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">
        surface-card
    </div>
</div>
 
          PrimeFlex 3.3.1 by PrimeTek