Text Color

A wide range of color palettes for the text of an element.

Classes#

ClassProperties
text-primarycolor: var(--primary-color);
Aa
text-whitecolor: #ffffff;
Aa
text-colorcolor: var(--text-color);
Aa
text-color-secondarycolor: var(--text-color-secondary);
Aa
text-0color: var(--surface-0);
Aa
text-50color: var(--surface-50);
Aa
text-100color: var(--surface-100);
Aa
text-200color: var(--surface-200);
Aa
text-300color: var(--surface-300);
Aa
text-400color: var(--surface-400);
Aa
text-500color: var(--surface-500);
Aa
text-600color: var(--surface-600);
Aa
text-700color: var(--surface-700);
Aa
text-800color: var(--surface-800);
Aa
text-900color: var(--surface-900);
Aa
text-blue-50color: var(--blue-50);
Aa
text-blue-100color: var(--blue-100);
Aa
text-blue-200color: var(--blue-200);
Aa
text-blue-300color: var(--blue-300);
Aa
text-blue-400color: var(--blue-400);
Aa
text-blue-500color: var(--blue-500);
Aa
text-blue-600color: var(--blue-600);
Aa
text-blue-700color: var(--blue-700);
Aa
text-blue-800color: var(--blue-800);
Aa
text-blue-900color: var(--blue-900);
Aa
text-green-50color: var(--green-50);
Aa
text-green-100color: var(--green-100);
Aa
text-green-200color: var(--green-200);
Aa
text-green-300color: var(--green-300);
Aa
text-green-400color: var(--green-400);
Aa
text-green-500color: var(--green-500);
Aa
text-green-600color: var(--green-600);
Aa
text-green-700color: var(--green-700);
Aa
text-green-800color: var(--green-800);
Aa
text-green-900color: var(--green-900);
Aa
text-yellow-50color: var(--yellow-50);
Aa
text-yellow-100color: var(--yellow-100);
Aa
text-yellow-200color: var(--yellow-200);
Aa
text-yellow-300color: var(--yellow-300);
Aa
text-yellow-400color: var(--yellow-400);
Aa
text-yellow-500color: var(--yellow-500);
Aa
text-yellow-600color: var(--yellow-600);
Aa
text-yellow-700color: var(--yellow-700);
Aa
text-yellow-800color: var(--yellow-800);
Aa
text-yellow-900color: var(--yellow-900);
Aa
text-cyan-50color: var(--cyan-50);
Aa
text-cyan-100color: var(--cyan-100);
Aa
text-cyan-200color: var(--cyan-200);
Aa
text-cyan-300color: var(--cyan-300);
Aa
text-cyan-400color: var(--cyan-400);
Aa
text-cyan-500color: var(--cyan-500);
Aa
text-cyan-600color: var(--cyan-600);
Aa
text-cyan-700color: var(--cyan-700);
Aa
text-cyan-800color: var(--cyan-800);
Aa
text-cyan-900color: var(--cyan-900);
Aa
text-pink-50color: var(--pink-50);
Aa
text-pink-100color: var(--pink-100);
Aa
text-pink-200color: var(--pink-200);
Aa
text-pink-300color: var(--pink-300);
Aa
text-pink-400color: var(--pink-400);
Aa
text-pink-500color: var(--pink-500);
Aa
text-pink-600color: var(--pink-600);
Aa
text-pink-700color: var(--pink-700);
Aa
text-pink-800color: var(--pink-800);
Aa
text-pink-900color: var(--pink-900);
Aa
text-indigo-50color: var(--indigo-50);
Aa
text-indigo-100color: var(--indigo-100);
Aa
text-indigo-200color: var(--indigo-200);
Aa
text-indigo-300color: var(--indigo-300);
Aa
text-indigo-400color: var(--indigo-400);
Aa
text-indigo-500color: var(--indigo-500);
Aa
text-indigo-600color: var(--indigo-600);
Aa
text-indigo-700color: var(--indigo-700);
Aa
text-indigo-800color: var(--indigo-800);
Aa
text-indigo-900color: var(--indigo-900);
Aa
text-teal-50color: var(--teal-50);
Aa
text-teal-100color: var(--teal-100);
Aa
text-teal-200color: var(--teal-200);
Aa
text-teal-300color: var(--teal-300);
Aa
text-teal-400color: var(--teal-400);
Aa
text-teal-500color: var(--teal-500);
Aa
text-teal-600color: var(--teal-600);
Aa
text-teal-700color: var(--teal-700);
Aa
text-teal-800color: var(--teal-800);
Aa
text-teal-900color: var(--teal-900);
Aa
text-orange-50color: var(--orange-50);
Aa
text-orange-100color: var(--orange-100);
Aa
text-orange-200color: var(--orange-200);
Aa
text-orange-300color: var(--orange-300);
Aa
text-orange-400color: var(--orange-400);
Aa
text-orange-500color: var(--orange-500);
Aa
text-orange-600color: var(--orange-600);
Aa
text-orange-700color: var(--orange-700);
Aa
text-orange-800color: var(--orange-800);
Aa
text-orange-900color: var(--orange-900);
Aa
text-bluegray-50color: var(--bluegray-50);
Aa
text-bluegray-100color: var(--bluegray-100);
Aa
text-bluegray-200color: var(--bluegray-200);
Aa
text-bluegray-300color: var(--bluegray-300);
Aa
text-bluegray-400color: var(--bluegray-400);
Aa
text-bluegray-500color: var(--bluegray-500);
Aa
text-bluegray-600color: var(--bluegray-600);
Aa
text-bluegray-700color: var(--bluegray-700);
Aa
text-bluegray-800color: var(--bluegray-800);
Aa
text-bluegray-900color: var(--bluegray-900);
Aa
text-purple-50color: var(--purple-50);
Aa
text-purple-100color: var(--purple-100);
Aa
text-purple-200color: var(--purple-200);
Aa
text-purple-300color: var(--purple-300);
Aa
text-purple-400color: var(--purple-400);
Aa
text-purple-500color: var(--purple-500);
Aa
text-purple-600color: var(--purple-600);
Aa
text-purple-700color: var(--purple-700);
Aa
text-purple-800color: var(--purple-800);
Aa
text-purple-900color: var(--purple-900);
Aa
text-gray-50color: var(--gray-50);
Aa
text-gray-100color: var(--gray-100);
Aa
text-gray-200color: var(--gray-200);
Aa
text-gray-300color: var(--gray-300);
Aa
text-gray-400color: var(--gray-400);
Aa
text-gray-500color: var(--gray-500);
Aa
text-gray-600color: var(--gray-600);
Aa
text-gray-700color: var(--gray-700);
Aa
text-gray-800color: var(--gray-800);
Aa
text-gray-900color: var(--gray-900);
Aa
text-red-50color: var(--red-50);
Aa
text-red-100color: var(--red-100);
Aa
text-red-200color: var(--red-200);
Aa
text-red-300color: var(--red-300);
Aa
text-red-400color: var(--red-400);
Aa
text-red-500color: var(--red-500);
Aa
text-red-600color: var(--red-600);
Aa
text-red-700color: var(--red-700);
Aa
text-red-800color: var(--red-800);
Aa
text-red-900color: var(--red-900);
Aa
text-primary-50color: var(--primary-50);
Aa
text-primary-100color: var(--primary-100);
Aa
text-primary-200color: var(--primary-200);
Aa
text-primary-300color: var(--primary-300);
Aa
text-primary-400color: var(--primary-400);
Aa
text-primary-500color: var(--primary-500);
Aa
text-primary-600color: var(--primary-600);
Aa
text-primary-700color: var(--primary-700);
Aa
text-primary-800color: var(--primary-800);
Aa
text-primary-900color: var(--primary-900);
Aa
text-white-alpha-10color: rgba(255,255,255,0.1);
Aa
text-white-alpha-20color: rgba(255,255,255,0.2);
Aa
text-white-alpha-30color: rgba(255,255,255,0.3);
Aa
text-white-alpha-40color: rgba(255,255,255,0.4);
Aa
text-white-alpha-50color: rgba(255,255,255,0.5);
Aa
text-white-alpha-60color: rgba(255,255,255,0.6);
Aa
text-white-alpha-70color: rgba(255,255,255,0.7);
Aa
text-white-alpha-80color: rgba(255,255,255,0.8);
Aa
text-white-alpha-90color: rgba(255,255,255,0.9);
Aa
text-black-alpha-10color: rgba(0,0,0,0.1);
Aa
text-black-alpha-20color: rgba(0,0,0,0.2);
Aa
text-black-alpha-30color: rgba(0,0,0,0.3);
Aa
text-black-alpha-40color: rgba(0,0,0,0.4);
Aa
text-black-alpha-50color: rgba(0,0,0,0.5);
Aa
text-black-alpha-60color: rgba(0,0,0,0.6);
Aa
text-black-alpha-70color: rgba(0,0,0,0.7);
Aa
text-black-alpha-80color: rgba(0,0,0,0.8);
Aa
text-black-alpha-90color: rgba(0,0,0,0.9);
Aa

Examples#

text-500
text-cyan-500
text-orange-500
<div class="flex flex-wrap md:justify-content-between justify-content-center">
    <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>
 

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="flex flex-wrap md:justify-content-between justify-content-center">
    <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>
 
        PrimeFlex 3.3.1 by PrimeTek