⌘ K
esc

    Text Color

    Defines the color of the text inside of an element.

    Classes

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

    Class Properties
    text-primary color: var(--primary-color);
    Aa
    text-white color: #ffffff;
    Aa
    text-color color: var(--text-color);
    Aa
    text-color-secondary color: var(--text-color-secondary);
    Aa
    text-0 color: var(--surface-0);
    Aa
    text-50 color: var(--surface-50);
    Aa
    text-100 color: var(--surface-100);
    Aa
    text-200 color: var(--surface-200);
    Aa
    text-300 color: var(--surface-300);
    Aa
    text-400 color: var(--surface-400);
    Aa
    text-500 color: var(--surface-500);
    Aa
    text-600 color: var(--surface-600);
    Aa
    text-700 color: var(--surface-700);
    Aa
    text-800 color: var(--surface-800);
    Aa
    text-900 color: var(--surface-900);
    Aa
    text-blue-50 color: var(--blue-50);
    Aa
    text-blue-100 color: var(--blue-100);
    Aa
    text-blue-200 color: var(--blue-200);
    Aa
    text-blue-300 color: var(--blue-300);
    Aa
    text-blue-400 color: var(--blue-400);
    Aa
    text-blue-500 color: var(--blue-500);
    Aa
    text-blue-600 color: var(--blue-600);
    Aa
    text-blue-700 color: var(--blue-700);
    Aa
    text-blue-800 color: var(--blue-800);
    Aa
    text-blue-900 color: var(--blue-900);
    Aa
    text-green-50 color: var(--green-50);
    Aa
    text-green-100 color: var(--green-100);
    Aa
    text-green-200 color: var(--green-200);
    Aa
    text-green-300 color: var(--green-300);
    Aa
    text-green-400 color: var(--green-400);
    Aa
    text-green-500 color: var(--green-500);
    Aa
    text-green-600 color: var(--green-600);
    Aa
    text-green-700 color: var(--green-700);
    Aa
    text-green-800 color: var(--green-800);
    Aa
    text-green-900 color: var(--green-900);
    Aa
    text-yellow-50 color: var(--yellow-50);
    Aa
    text-yellow-100 color: var(--yellow-100);
    Aa
    text-yellow-200 color: var(--yellow-200);
    Aa
    text-yellow-300 color: var(--yellow-300);
    Aa
    text-yellow-400 color: var(--yellow-400);
    Aa
    text-yellow-500 color: var(--yellow-500);
    Aa
    text-yellow-600 color: var(--yellow-600);
    Aa
    text-yellow-700 color: var(--yellow-700);
    Aa
    text-yellow-800 color: var(--yellow-800);
    Aa
    text-yellow-900 color: var(--yellow-900);
    Aa
    text-cyan-50 color: var(--cyan-50);
    Aa
    text-cyan-100 color: var(--cyan-100);
    Aa
    text-cyan-200 color: var(--cyan-200);
    Aa
    text-cyan-300 color: var(--cyan-300);
    Aa
    text-cyan-400 color: var(--cyan-400);
    Aa
    text-cyan-500 color: var(--cyan-500);
    Aa
    text-cyan-600 color: var(--cyan-600);
    Aa
    text-cyan-700 color: var(--cyan-700);
    Aa
    text-cyan-800 color: var(--cyan-800);
    Aa
    text-cyan-900 color: var(--cyan-900);
    Aa
    text-pink-50 color: var(--pink-50);
    Aa
    text-pink-100 color: var(--pink-100);
    Aa
    text-pink-200 color: var(--pink-200);
    Aa
    text-pink-300 color: var(--pink-300);
    Aa
    text-pink-400 color: var(--pink-400);
    Aa
    text-pink-500 color: var(--pink-500);
    Aa
    text-pink-600 color: var(--pink-600);
    Aa
    text-pink-700 color: var(--pink-700);
    Aa
    text-pink-800 color: var(--pink-800);
    Aa
    text-pink-900 color: var(--pink-900);
    Aa
    text-indigo-50 color: var(--indigo-50);
    Aa
    text-indigo-100 color: var(--indigo-100);
    Aa
    text-indigo-200 color: var(--indigo-200);
    Aa
    text-indigo-300 color: var(--indigo-300);
    Aa
    text-indigo-400 color: var(--indigo-400);
    Aa
    text-indigo-500 color: var(--indigo-500);
    Aa
    text-indigo-600 color: var(--indigo-600);
    Aa
    text-indigo-700 color: var(--indigo-700);
    Aa
    text-indigo-800 color: var(--indigo-800);
    Aa
    text-indigo-900 color: var(--indigo-900);
    Aa
    text-teal-50 color: var(--teal-50);
    Aa
    text-teal-100 color: var(--teal-100);
    Aa
    text-teal-200 color: var(--teal-200);
    Aa
    text-teal-300 color: var(--teal-300);
    Aa
    text-teal-400 color: var(--teal-400);
    Aa
    text-teal-500 color: var(--teal-500);
    Aa
    text-teal-600 color: var(--teal-600);
    Aa
    text-teal-700 color: var(--teal-700);
    Aa
    text-teal-800 color: var(--teal-800);
    Aa
    text-teal-900 color: var(--teal-900);
    Aa
    text-orange-50 color: var(--orange-50);
    Aa
    text-orange-100 color: var(--orange-100);
    Aa
    text-orange-200 color: var(--orange-200);
    Aa
    text-orange-300 color: var(--orange-300);
    Aa
    text-orange-400 color: var(--orange-400);
    Aa
    text-orange-500 color: var(--orange-500);
    Aa
    text-orange-600 color: var(--orange-600);
    Aa
    text-orange-700 color: var(--orange-700);
    Aa
    text-orange-800 color: var(--orange-800);
    Aa
    text-orange-900 color: var(--orange-900);
    Aa
    text-bluegray-50 color: var(--bluegray-50);
    Aa
    text-bluegray-100 color: var(--bluegray-100);
    Aa
    text-bluegray-200 color: var(--bluegray-200);
    Aa
    text-bluegray-300 color: var(--bluegray-300);
    Aa
    text-bluegray-400 color: var(--bluegray-400);
    Aa
    text-bluegray-500 color: var(--bluegray-500);
    Aa
    text-bluegray-600 color: var(--bluegray-600);
    Aa
    text-bluegray-700 color: var(--bluegray-700);
    Aa
    text-bluegray-800 color: var(--bluegray-800);
    Aa
    text-bluegray-900 color: var(--bluegray-900);
    Aa
    text-purple-50 color: var(--purple-50);
    Aa
    text-purple-100 color: var(--purple-100);
    Aa
    text-purple-200 color: var(--purple-200);
    Aa
    text-purple-300 color: var(--purple-300);
    Aa
    text-purple-400 color: var(--purple-400);
    Aa
    text-purple-500 color: var(--purple-500);
    Aa
    text-purple-600 color: var(--purple-600);
    Aa
    text-purple-700 color: var(--purple-700);
    Aa
    text-purple-800 color: var(--purple-800);
    Aa
    text-purple-900 color: var(--purple-900);
    Aa
    text-gray-50 color: var(--gray-50);
    Aa
    text-gray-100 color: var(--gray-100);
    Aa
    text-gray-200 color: var(--gray-200);
    Aa
    text-gray-300 color: var(--gray-300);
    Aa
    text-gray-400 color: var(--gray-400);
    Aa
    text-gray-500 color: var(--gray-500);
    Aa
    text-gray-600 color: var(--gray-600);
    Aa
    text-gray-700 color: var(--gray-700);
    Aa
    text-gray-800 color: var(--gray-800);
    Aa
    text-gray-900 color: var(--gray-900);
    Aa
    text-red-50 color: var(--red-50);
    Aa
    text-red-100 color: var(--red-100);
    Aa
    text-red-200 color: var(--red-200);
    Aa
    text-red-300 color: var(--red-300);
    Aa
    text-red-400 color: var(--red-400);
    Aa
    text-red-500 color: var(--red-500);
    Aa
    text-red-600 color: var(--red-600);
    Aa
    text-red-700 color: var(--red-700);
    Aa
    text-red-800 color: var(--red-800);
    Aa
    text-red-900 color: var(--red-900);
    Aa
    text-primary-50 color: var(--primary-50);
    Aa
    text-primary-100 color: var(--primary-100);
    Aa
    text-primary-200 color: var(--primary-200);
    Aa
    text-primary-300 color: var(--primary-300);
    Aa
    text-primary-400 color: var(--primary-400);
    Aa
    text-primary-500 color: var(--primary-500);
    Aa
    text-primary-600 color: var(--primary-600);
    Aa
    text-primary-700 color: var(--primary-700);
    Aa
    text-primary-800 color: var(--primary-800);
    Aa
    text-primary-900 color: var(--primary-900);
    Aa
    text-white-alpha-10 color: rgba(255,255,255,0.1);
    Aa
    text-white-alpha-20 color: rgba(255,255,255,0.2);
    Aa
    text-white-alpha-30 color: rgba(255,255,255,0.3);
    Aa
    text-white-alpha-40 color: rgba(255,255,255,0.4);
    Aa
    text-white-alpha-50 color: rgba(255,255,255,0.5);
    Aa
    text-white-alpha-60 color: rgba(255,255,255,0.6);
    Aa
    text-white-alpha-70 color: rgba(255,255,255,0.7);
    Aa
    text-white-alpha-80 color: rgba(255,255,255,0.8);
    Aa
    text-white-alpha-90 color: rgba(255,255,255,0.9);
    Aa
    text-black-alpha-10 color: rgba(0,0,0,0.1);
    Aa
    text-black-alpha-20 color: rgba(0,0,0,0.2);
    Aa
    text-black-alpha-30 color: rgba(0,0,0,0.3);
    Aa
    text-black-alpha-40 color: rgba(0,0,0,0.4);
    Aa
    text-black-alpha-50 color: rgba(0,0,0,0.5);
    Aa
    text-black-alpha-60 color: rgba(0,0,0,0.6);
    Aa
    text-black-alpha-70 color: rgba(0,0,0,0.7);
    Aa
    text-black-alpha-80 color: rgba(0,0,0,0.8);
    Aa
    text-black-alpha-90 color: rgba(0,0,0,0.9);
    Aa
    Examples
    text-500
    text-cyan-500
    text-orange-500
    
    <div class="card">
        <div class="flex flex-wrap md:justify-content-between justify-content-center card-container">
            <div class="text-500 w-12rem h-6rem surface-overlay border-round border-1 border-gray-500 font-bold m-2 flex align-items-center justify-content-center">text-500</div>
            <div class="text-cyan-500 w-12rem h-6rem surface-overlay border-round border-1 border-gray-500 font-bold m-2 flex align-items-center justify-content-center">text-cyan-500</div>
            <div class="text-orange-500 w-12rem h-6rem surface-overlay border-round border-1 border-gray-500 font-bold m-2 flex align-items-center justify-content-center">text-orange-500</div>
        </div>
    </div>
    
    
    Pseudo States

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

    hover:text-700
    hover:text-cyan-700
    hover:text-orange-700
    
    <div class="card">
        <div class="flex flex-wrap md:justify-content-between justify-content-center card-container">
            <div class="text-500 hover:text-700 w-12rem h-6rem surface-overlay border-round border-1 border-gray-500 font-bold m-2 flex align-items-center justify-content-center">hover:text-700</div>
            <div class="text-cyan-500 hover:text-cyan-700 w-12rem h-6rem surface-overlay border-round border-1 border-gray-500 font-bold m-2 flex align-items-center justify-content-center">hover:text-cyan-700</div>
            <div class="text-orange-500 hover:text-orange-700 w-12rem h-6rem surface-overlay border-round border-1 border-gray-500 font-bold m-2 flex align-items-center justify-content-center">hover:text-orange-700</div>
        </div>
    </div>