⌘ K
esc

    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-ground background-color: var(--surface-ground);
    surface-section background-color: var(--surface-section);
    surface-card background-color: var(--surface-card);
    surface-overlay background-color: var(--surface-overlay);
    surface-border background-color: var(--surface-border);
    surface-hover background-color: var(--surface-hover);
    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);
    bg-white-alpha-10 background-color: rgba(255,255,255,0.1);
    bg-white-alpha-20 background-color: rgba(255,255,255,0.2);
    bg-white-alpha-30 background-color: rgba(255,255,255,0.3);
    bg-white-alpha-40 background-color: rgba(255,255,255,0.4);
    bg-white-alpha-50 background-color: rgba(255,255,255,0.5);
    bg-white-alpha-60 background-color: rgba(255,255,255,0.6);
    bg-white-alpha-70 background-color: rgba(255,255,255,0.7);
    bg-white-alpha-80 background-color: rgba(255,255,255,0.8);
    bg-white-alpha-90 background-color: rgba(255,255,255,0.9);
    bg-black-alpha-10 background-color: rgba(0,0,0,0.1);
    bg-black-alpha-20 background-color: rgba(0,0,0,0.2);
    bg-black-alpha-30 background-color: rgba(0,0,0,0.3);
    bg-black-alpha-40 background-color: rgba(0,0,0,0.4);
    bg-black-alpha-50 background-color: rgba(0,0,0,0.5);
    bg-black-alpha-60 background-color: rgba(0,0,0,0.6);
    bg-black-alpha-70 background-color: rgba(0,0,0,0.7);
    bg-black-alpha-80 background-color: rgba(0,0,0,0.8);
    bg-black-alpha-90 background-color: rgba(0,0,0,0.9);
    Examples
    surface-500
    bg-cyan-500
    bg-orange-500
    
    <div class="card">
        <div class="flex flex-wrap md:justify-content-between justify-content-center card-container">
            <div class="surface-500 text-white 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-cyan-500 text-white font-bold border-round m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">bg-cyan-500</div>
            <div class="bg-orange-500 text-white font-bold border-round m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">bg-orange-500</div>
        </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
    Named Theme Color

    Each theme provides named colors that are recommended to be used for certain surfaces, these are exported as css variables and can be used with the following classes.

    • .surface-ground: Ground color like body background
    • .surface-section: Background of a content section
    • .surface-card: Background of an elevated card element
    • .surface-overlay: Overlay elements like modals
    • .surface-border: Border colors to divide content
    • .surface-hover: Background color of an element in hover state
    hover:surface-700
    hover:bg-cyan-700
    hover:bg-orange-700
    
    <div class="card">
        <div class="flex flex-wrap md:justify-content-between justify-content-center card-container">
            <div class="surface-500 hover:surface-700 text-white 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-cyan-500 hover:bg-cyan-700 text-white 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-orange-500 hover:bg-orange-700 text-white font-bold m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:bg-orange-700</div>
        </div>
    </div>