色彩與背景
前景色 colorcolor
Setting foreground color of an element.
Overview
| Class | Declarations |
|---|---|
Aafg:transparent | color: transparent;
|
Aafg:current | color: currentColor;
|
Aafg:black | color: oklch(0% 0 none);
|
Aafg:white | color: oklch(100% 0 none);
|
Aafg:stone | color: var(--color-stone);
|
Aafg:gray | color: var(--color-gray);
|
Aafg:neutral | color: var(--color-neutral);
|
Aafg:slate | color: var(--color-slate);
|
Aafg:brown | color: var(--color-brown);
|
Aafg:orange | color: var(--color-orange);
|
Aafg:amber | color: var(--color-amber);
|
Aafg:yellow | color: var(--color-yellow);
|
Aafg:lime | color: var(--color-lime);
|
Aafg:green | color: var(--color-green);
|
Aafg:beryl | color: var(--color-beryl);
|
Aafg:teal | color: var(--color-teal);
|
Aafg:cyan | color: var(--color-cyan);
|
Aafg:sky | color: var(--color-sky);
|
Aafg:blue | color: var(--color-blue);
|
Aafg:indigo | color: var(--color-indigo);
|
Aafg:violet | color: var(--color-violet);
|
Aafg:purple | color: var(--color-purple);
|
Aafg:fuchsia | color: var(--color-fuchsia);
|
Aafg:pink | color: var(--color-pink);
|
Aafg:crimson | color: var(--color-crimson);
|
Aafg:red | color: var(--color-red);
|
Aafg:stone-0 | color: var(--color-stone-0);
|
Aafg:stone-5 | color: var(--color-stone-5);
|
Aafg:stone-10 | color: var(--color-stone-10);
|
Aafg:stone-20 | color: var(--color-stone-20);
|
Aafg:stone-30 | color: var(--color-stone-30);
|
Aafg:stone-40 | color: var(--color-stone-40);
|
Aafg:stone-50 | color: var(--color-stone-50);
|
Aafg:stone-60 | color: var(--color-stone-60);
|
Aafg:stone-70 | color: var(--color-stone-70);
|
Aafg:stone-80 | color: var(--color-stone-80);
|
Aafg:stone-90 | color: var(--color-stone-90);
|
Aafg:stone-95 | color: var(--color-stone-95);
|
Aafg:stone-100 | color: var(--color-stone-100);
|
Aafg:gray-0 | color: var(--color-gray-0);
|
Aafg:gray-5 | color: var(--color-gray-5);
|
Aafg:gray-10 | color: var(--color-gray-10);
|
Aafg:gray-20 | color: var(--color-gray-20);
|
Aafg:gray-30 | color: var(--color-gray-30);
|
Aafg:gray-40 | color: var(--color-gray-40);
|
Aafg:gray-50 | color: var(--color-gray-50);
|
Aafg:gray-60 | color: var(--color-gray-60);
|
Aafg:gray-70 | color: var(--color-gray-70);
|
Aafg:gray-80 | color: var(--color-gray-80);
|
Aafg:gray-90 | color: var(--color-gray-90);
|
Aafg:gray-95 | color: var(--color-gray-95);
|
Aafg:gray-100 | color: var(--color-gray-100);
|
Aafg:neutral-0 | color: var(--color-neutral-0);
|
Aafg:neutral-5 | color: var(--color-neutral-5);
|
Aafg:neutral-10 | color: var(--color-neutral-10);
|
Aafg:neutral-20 | color: var(--color-neutral-20);
|
Aafg:neutral-30 | color: var(--color-neutral-30);
|
Aafg:neutral-40 | color: var(--color-neutral-40);
|
Aafg:neutral-50 | color: var(--color-neutral-50);
|
Aafg:neutral-60 | color: var(--color-neutral-60);
|
Aafg:neutral-70 | color: var(--color-neutral-70);
|
Aafg:neutral-80 | color: var(--color-neutral-80);
|
Aafg:neutral-90 | color: var(--color-neutral-90);
|
Aafg:neutral-95 | color: var(--color-neutral-95);
|
Aafg:neutral-100 | color: var(--color-neutral-100);
|
Aafg:slate-0 | color: var(--color-slate-0);
|
Aafg:slate-5 | color: var(--color-slate-5);
|
Aafg:slate-10 | color: var(--color-slate-10);
|
Aafg:slate-20 | color: var(--color-slate-20);
|
Aafg:slate-30 | color: var(--color-slate-30);
|
Aafg:slate-40 | color: var(--color-slate-40);
|
Aafg:slate-50 | color: var(--color-slate-50);
|
Aafg:slate-60 | color: var(--color-slate-60);
|
Aafg:slate-70 | color: var(--color-slate-70);
|
Aafg:slate-80 | color: var(--color-slate-80);
|
Aafg:slate-90 | color: var(--color-slate-90);
|
Aafg:slate-95 | color: var(--color-slate-95);
|
Aafg:slate-100 | color: var(--color-slate-100);
|
Aafg:brown-0 | color: var(--color-brown-0);
|
Aafg:brown-5 | color: var(--color-brown-5);
|
Aafg:brown-10 | color: var(--color-brown-10);
|
Aafg:brown-20 | color: var(--color-brown-20);
|
Aafg:brown-30 | color: var(--color-brown-30);
|
Aafg:brown-40 | color: var(--color-brown-40);
|
Aafg:brown-50 | color: var(--color-brown-50);
|
Aafg:brown-60 | color: var(--color-brown-60);
|
Aafg:brown-70 | color: var(--color-brown-70);
|
Aafg:brown-80 | color: var(--color-brown-80);
|
Aafg:brown-90 | color: var(--color-brown-90);
|
Aafg:brown-95 | color: var(--color-brown-95);
|
Aafg:brown-100 | color: var(--color-brown-100);
|
Aafg:orange-0 | color: var(--color-orange-0);
|
Aafg:orange-5 | color: var(--color-orange-5);
|
Aafg:orange-10 | color: var(--color-orange-10);
|
Aafg:orange-20 | color: var(--color-orange-20);
|
Aafg:orange-30 | color: var(--color-orange-30);
|
Aafg:orange-40 | color: var(--color-orange-40);
|
Aafg:orange-50 | color: var(--color-orange-50);
|
Aafg:orange-60 | color: var(--color-orange-60);
|
Aafg:orange-70 | color: var(--color-orange-70);
|
Aafg:orange-80 | color: var(--color-orange-80);
|
Aafg:orange-90 | color: var(--color-orange-90);
|
Aafg:orange-95 | color: var(--color-orange-95);
|
Aafg:orange-100 | color: var(--color-orange-100);
|
Aafg:amber-0 | color: var(--color-amber-0);
|
Aafg:amber-5 | color: var(--color-amber-5);
|
Aafg:amber-10 | color: var(--color-amber-10);
|
Aafg:amber-20 | color: var(--color-amber-20);
|
Aafg:amber-30 | color: var(--color-amber-30);
|
Aafg:amber-40 | color: var(--color-amber-40);
|
Aafg:amber-50 | color: var(--color-amber-50);
|
Aafg:amber-60 | color: var(--color-amber-60);
|
Aafg:amber-70 | color: var(--color-amber-70);
|
Aafg:amber-80 | color: var(--color-amber-80);
|
Aafg:amber-90 | color: var(--color-amber-90);
|
Aafg:amber-95 | color: var(--color-amber-95);
|
Aafg:amber-100 | color: var(--color-amber-100);
|
Aafg:yellow-0 | color: var(--color-yellow-0);
|
Aafg:yellow-5 | color: var(--color-yellow-5);
|
Aafg:yellow-10 | color: var(--color-yellow-10);
|
Aafg:yellow-20 | color: var(--color-yellow-20);
|
Aafg:yellow-30 | color: var(--color-yellow-30);
|
Aafg:yellow-40 | color: var(--color-yellow-40);
|
Aafg:yellow-50 | color: var(--color-yellow-50);
|
Aafg:yellow-60 | color: var(--color-yellow-60);
|
Aafg:yellow-70 | color: var(--color-yellow-70);
|
Aafg:yellow-80 | color: var(--color-yellow-80);
|
Aafg:yellow-90 | color: var(--color-yellow-90);
|
Aafg:yellow-95 | color: var(--color-yellow-95);
|
Aafg:yellow-100 | color: var(--color-yellow-100);
|
Aafg:lime-0 | color: var(--color-lime-0);
|
Aafg:lime-5 | color: var(--color-lime-5);
|
Aafg:lime-10 | color: var(--color-lime-10);
|
Aafg:lime-20 | color: var(--color-lime-20);
|
Aafg:lime-30 | color: var(--color-lime-30);
|
Aafg:lime-40 | color: var(--color-lime-40);
|
Aafg:lime-50 | color: var(--color-lime-50);
|
Aafg:lime-60 | color: var(--color-lime-60);
|
Aafg:lime-70 | color: var(--color-lime-70);
|
Aafg:lime-80 | color: var(--color-lime-80);
|
Aafg:lime-90 | color: var(--color-lime-90);
|
Aafg:lime-95 | color: var(--color-lime-95);
|
Aafg:lime-100 | color: var(--color-lime-100);
|
Aafg:green-0 | color: var(--color-green-0);
|
Aafg:green-5 | color: var(--color-green-5);
|
Aafg:green-10 | color: var(--color-green-10);
|
Aafg:green-20 | color: var(--color-green-20);
|
Aafg:green-30 | color: var(--color-green-30);
|
Aafg:green-40 | color: var(--color-green-40);
|
Aafg:green-50 | color: var(--color-green-50);
|
Aafg:green-60 | color: var(--color-green-60);
|
Aafg:green-70 | color: var(--color-green-70);
|
Aafg:green-80 | color: var(--color-green-80);
|
Aafg:green-90 | color: var(--color-green-90);
|
Aafg:green-95 | color: var(--color-green-95);
|
Aafg:green-100 | color: var(--color-green-100);
|
Aafg:beryl-0 | color: var(--color-beryl-0);
|
Aafg:beryl-5 | color: var(--color-beryl-5);
|
Aafg:beryl-10 | color: var(--color-beryl-10);
|
Aafg:beryl-20 | color: var(--color-beryl-20);
|
Aafg:beryl-30 | color: var(--color-beryl-30);
|
Aafg:beryl-40 | color: var(--color-beryl-40);
|
Aafg:beryl-50 | color: var(--color-beryl-50);
|
Aafg:beryl-60 | color: var(--color-beryl-60);
|
Aafg:beryl-70 | color: var(--color-beryl-70);
|
Aafg:beryl-80 | color: var(--color-beryl-80);
|
Aafg:beryl-90 | color: var(--color-beryl-90);
|
Aafg:beryl-95 | color: var(--color-beryl-95);
|
Aafg:beryl-100 | color: var(--color-beryl-100);
|
Aafg:teal-0 | color: var(--color-teal-0);
|
Aafg:teal-5 | color: var(--color-teal-5);
|
Aafg:teal-10 | color: var(--color-teal-10);
|
Aafg:teal-20 | color: var(--color-teal-20);
|
Aafg:teal-30 | color: var(--color-teal-30);
|
Aafg:teal-40 | color: var(--color-teal-40);
|
Aafg:teal-50 | color: var(--color-teal-50);
|
Aafg:teal-60 | color: var(--color-teal-60);
|
Aafg:teal-70 | color: var(--color-teal-70);
|
Aafg:teal-80 | color: var(--color-teal-80);
|
Aafg:teal-90 | color: var(--color-teal-90);
|
Aafg:teal-95 | color: var(--color-teal-95);
|
Aafg:teal-100 | color: var(--color-teal-100);
|
Aafg:cyan-0 | color: var(--color-cyan-0);
|
Aafg:cyan-5 | color: var(--color-cyan-5);
|
Aafg:cyan-10 | color: var(--color-cyan-10);
|
Aafg:cyan-20 | color: var(--color-cyan-20);
|
Aafg:cyan-30 | color: var(--color-cyan-30);
|
Aafg:cyan-40 | color: var(--color-cyan-40);
|
Aafg:cyan-50 | color: var(--color-cyan-50);
|
Aafg:cyan-60 | color: var(--color-cyan-60);
|
Aafg:cyan-70 | color: var(--color-cyan-70);
|
Aafg:cyan-80 | color: var(--color-cyan-80);
|
Aafg:cyan-90 | color: var(--color-cyan-90);
|
Aafg:cyan-95 | color: var(--color-cyan-95);
|
Aafg:cyan-100 | color: var(--color-cyan-100);
|
Aafg:sky-0 | color: var(--color-sky-0);
|
Aafg:sky-5 | color: var(--color-sky-5);
|
Aafg:sky-10 | color: var(--color-sky-10);
|
Aafg:sky-20 | color: var(--color-sky-20);
|
Aafg:sky-30 | color: var(--color-sky-30);
|
Aafg:sky-40 | color: var(--color-sky-40);
|
Aafg:sky-50 | color: var(--color-sky-50);
|
Aafg:sky-60 | color: var(--color-sky-60);
|
Aafg:sky-70 | color: var(--color-sky-70);
|
Aafg:sky-80 | color: var(--color-sky-80);
|
Aafg:sky-90 | color: var(--color-sky-90);
|
Aafg:sky-95 | color: var(--color-sky-95);
|
Aafg:sky-100 | color: var(--color-sky-100);
|
Aafg:blue-0 | color: var(--color-blue-0);
|
Aafg:blue-5 | color: var(--color-blue-5);
|
Aafg:blue-10 | color: var(--color-blue-10);
|
Aafg:blue-20 | color: var(--color-blue-20);
|
Aafg:blue-30 | color: var(--color-blue-30);
|
Aafg:blue-40 | color: var(--color-blue-40);
|
Aafg:blue-50 | color: var(--color-blue-50);
|
Aafg:blue-60 | color: var(--color-blue-60);
|
Aafg:blue-70 | color: var(--color-blue-70);
|
Aafg:blue-80 | color: var(--color-blue-80);
|
Aafg:blue-90 | color: var(--color-blue-90);
|
Aafg:blue-95 | color: var(--color-blue-95);
|
Aafg:blue-100 | color: var(--color-blue-100);
|
Aafg:indigo-0 | color: var(--color-indigo-0);
|
Aafg:indigo-5 | color: var(--color-indigo-5);
|
Aafg:indigo-10 | color: var(--color-indigo-10);
|
Aafg:indigo-20 | color: var(--color-indigo-20);
|
Aafg:indigo-30 | color: var(--color-indigo-30);
|
Aafg:indigo-40 | color: var(--color-indigo-40);
|
Aafg:indigo-50 | color: var(--color-indigo-50);
|
Aafg:indigo-60 | color: var(--color-indigo-60);
|
Aafg:indigo-70 | color: var(--color-indigo-70);
|
Aafg:indigo-80 | color: var(--color-indigo-80);
|
Aafg:indigo-90 | color: var(--color-indigo-90);
|
Aafg:indigo-95 | color: var(--color-indigo-95);
|
Aafg:indigo-100 | color: var(--color-indigo-100);
|
Aafg:violet-0 | color: var(--color-violet-0);
|
Aafg:violet-5 | color: var(--color-violet-5);
|
Aafg:violet-10 | color: var(--color-violet-10);
|
Aafg:violet-20 | color: var(--color-violet-20);
|
Aafg:violet-30 | color: var(--color-violet-30);
|
Aafg:violet-40 | color: var(--color-violet-40);
|
Aafg:violet-50 | color: var(--color-violet-50);
|
Aafg:violet-60 | color: var(--color-violet-60);
|
Aafg:violet-70 | color: var(--color-violet-70);
|
Aafg:violet-80 | color: var(--color-violet-80);
|
Aafg:violet-90 | color: var(--color-violet-90);
|
Aafg:violet-95 | color: var(--color-violet-95);
|
Aafg:violet-100 | color: var(--color-violet-100);
|
Aafg:purple-0 | color: var(--color-purple-0);
|
Aafg:purple-5 | color: var(--color-purple-5);
|
Aafg:purple-10 | color: var(--color-purple-10);
|
Aafg:purple-20 | color: var(--color-purple-20);
|
Aafg:purple-30 | color: var(--color-purple-30);
|
Aafg:purple-40 | color: var(--color-purple-40);
|
Aafg:purple-50 | color: var(--color-purple-50);
|
Aafg:purple-60 | color: var(--color-purple-60);
|
Aafg:purple-70 | color: var(--color-purple-70);
|
Aafg:purple-80 | color: var(--color-purple-80);
|
Aafg:purple-90 | color: var(--color-purple-90);
|
Aafg:purple-95 | color: var(--color-purple-95);
|
Aafg:purple-100 | color: var(--color-purple-100);
|
Aafg:fuchsia-0 | color: var(--color-fuchsia-0);
|
Aafg:fuchsia-5 | color: var(--color-fuchsia-5);
|
Aafg:fuchsia-10 | color: var(--color-fuchsia-10);
|
Aafg:fuchsia-20 | color: var(--color-fuchsia-20);
|
Aafg:fuchsia-30 | color: var(--color-fuchsia-30);
|
Aafg:fuchsia-40 | color: var(--color-fuchsia-40);
|
Aafg:fuchsia-50 | color: var(--color-fuchsia-50);
|
Aafg:fuchsia-60 | color: var(--color-fuchsia-60);
|
Aafg:fuchsia-70 | color: var(--color-fuchsia-70);
|
Aafg:fuchsia-80 | color: var(--color-fuchsia-80);
|
Aafg:fuchsia-90 | color: var(--color-fuchsia-90);
|
Aafg:fuchsia-95 | color: var(--color-fuchsia-95);
|
Aafg:fuchsia-100 | color: var(--color-fuchsia-100);
|
Aafg:pink-0 | color: var(--color-pink-0);
|
Aafg:pink-5 | color: var(--color-pink-5);
|
Aafg:pink-10 | color: var(--color-pink-10);
|
Aafg:pink-20 | color: var(--color-pink-20);
|
Aafg:pink-30 | color: var(--color-pink-30);
|
Aafg:pink-40 | color: var(--color-pink-40);
|
Aafg:pink-50 | color: var(--color-pink-50);
|
Aafg:pink-60 | color: var(--color-pink-60);
|
Aafg:pink-70 | color: var(--color-pink-70);
|
Aafg:pink-80 | color: var(--color-pink-80);
|
Aafg:pink-90 | color: var(--color-pink-90);
|
Aafg:pink-95 | color: var(--color-pink-95);
|
Aafg:pink-100 | color: var(--color-pink-100);
|
Aafg:crimson-0 | color: var(--color-crimson-0);
|
Aafg:crimson-5 | color: var(--color-crimson-5);
|
Aafg:crimson-10 | color: var(--color-crimson-10);
|
Aafg:crimson-20 | color: var(--color-crimson-20);
|
Aafg:crimson-30 | color: var(--color-crimson-30);
|
Aafg:crimson-40 | color: var(--color-crimson-40);
|
Aafg:crimson-50 | color: var(--color-crimson-50);
|
Aafg:crimson-60 | color: var(--color-crimson-60);
|
Aafg:crimson-70 | color: var(--color-crimson-70);
|
Aafg:crimson-80 | color: var(--color-crimson-80);
|
Aafg:crimson-90 | color: var(--color-crimson-90);
|
Aafg:crimson-95 | color: var(--color-crimson-95);
|
Aafg:crimson-100 | color: var(--color-crimson-100);
|
Aafg:red-0 | color: var(--color-red-0);
|
Aafg:red-5 | color: var(--color-red-5);
|
Aafg:red-10 | color: var(--color-red-10);
|
Aafg:red-20 | color: var(--color-red-20);
|
Aafg:red-30 | color: var(--color-red-30);
|
Aafg:red-40 | color: var(--color-red-40);
|
Aafg:red-50 | color: var(--color-red-50);
|
Aafg:red-60 | color: var(--color-red-60);
|
Aafg:red-70 | color: var(--color-red-70);
|
Aafg:red-80 | color: var(--color-red-80);
|
Aafg:red-90 | color: var(--color-red-90);
|
Aafg:red-95 | color: var(--color-red-95);
|
Aafg:red-100 | color: var(--color-red-100);
|
Aatext:body | color: var(--color-text-body);
|
Aatext:strong | color: var(--color-text-strong);
|
Aatext:muted | color: var(--color-text-muted);
|
Aatext:subtle | color: var(--color-text-subtle);
|
Aatext:disabled | color: var(--color-text-disabled);
|
Aatext:placeholder | color: var(--color-text-placeholder);
|
Aatext:inverse | color: var(--color-text-inverse);
|
Aatext:link | color: var(--color-text-link);
|
Aatext:link-hover | color: var(--color-text-link-hover);
|
Aatext:stone | color: var(--color-text-stone);
|
Aatext:gray | color: var(--color-text-gray);
|
Aatext:neutral | color: var(--color-text-neutral);
|
Aatext:slate | color: var(--color-text-slate);
|
Aatext:brown | color: var(--color-text-brown);
|
Aatext:orange | color: var(--color-text-orange);
|
Aatext:amber | color: var(--color-text-amber);
|
Aatext:yellow | color: var(--color-text-yellow);
|
Aatext:lime | color: var(--color-text-lime);
|
Aatext:green | color: var(--color-text-green);
|
Aatext:beryl | color: var(--color-text-beryl);
|
Aatext:teal | color: var(--color-text-teal);
|
Aatext:cyan | color: var(--color-text-cyan);
|
Aatext:sky | color: var(--color-text-sky);
|
Aatext:blue | color: var(--color-text-blue);
|
Aatext:indigo | color: var(--color-text-indigo);
|
Aatext:violet | color: var(--color-text-violet);
|
Aatext:purple | color: var(--color-text-purple);
|
Aatext:fuchsia | color: var(--color-text-fuchsia);
|
Aatext:pink | color: var(--color-text-pink);
|
Aatext:crimson | color: var(--color-text-crimson);
|
Aatext:red | color: var(--color-text-red);
|
fg:<color> | color: <color>;
|
Examples
With opacity
Add the suffix /alpha to change the opacity of any color.
Heavy boxes perform quick waltzes and jigs.
<p class="fg:blue-60/.15">Heavy boxes perform quick waltzes and jigs.</p>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="fg:slate-10:hover fg:slate-10@sm fg:slate-10@dark fg:slate-10@print">...</div>Customization
Use custom text colors
Add a color to the text variable namespace.
@theme { --color-text-primary: #000; }Apply the custom color:
<p class="text:primary"></p>Apply the defined text-* variables using the inherited rules , , .
<html class="light"> <body class="text:primary"></body> <body class="text:primary">equals</body> <body class="text:$text-primary">equals</body></html>Use text:color for foreground color. Use text fill color only when you need the WebKit text fill property.
<p class="text-fill-color:pink">text fill property</p>Besides inheriting the above rules, you can use text-* to access global text color variables in other syntax.
<svg class="stroke:text-primary"></svg>To escape inherited text colors, use var(--color-blue) to apply the base hue token instead of a text color token.
<p class="fg:var(--color-blue)">...</p>