Text Color

Set the text color for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

c-red-1

color: #fbdfe1;

c-red-2

color: #f8c4c8;

c-red-3

color: #f4a8ae;

c-red-4

color: #f18c94;

c-red-5

color: #ed707a;

c-red-6

color: #ea5560;

c-red

color: #e63946;

c-red-7

color: #c6313c;

c-red-8

color: #a62932;

c-red-9

color: #852129;

c-red-10

color: #65191f;

c-red-11

color: #451115;

c-red-12

color: #25090b;

c-orange-1

color: #ffe7df;

c-orange-2

color: #ffd3c2;

c-orange-3

color: #ffbea6;

c-orange-4

color: #ffa98a;

c-orange-5

color: #ff946e;

c-orange-6

color: #ff8051;

c-orange

color: #ff6b35;

c-orange-7

color: #db5c2e;

c-orange-8

color: #b84d26;

c-orange-9

color: #943e1f;

c-orange-10

color: #702f17;

c-orange-11

color: #4d2010;

c-orange-12

color: #291108;

c-yellow-1

color: #fff4db;

c-yellow-2

color: #ffeabb;

c-yellow-3

color: #ffe09b;

c-yellow-4

color: #ffd67b;

c-yellow-5

color: #ffcc5c;

c-yellow-6

color: #ffc23c;

c-yellow

color: #ffb81c;

c-yellow-7

color: #db9e18;

c-yellow-8

color: #b88414;

c-yellow-9

color: #946b10;

c-yellow-10

color: #70510c;

c-yellow-11

color: #4d3708;

c-yellow-12

color: #291d04;

c-lime-1

color: #ebf7da;

c-lime-2

color: #daf0b9;

c-lime-3

color: #c9e998;

c-lime-4

color: #b8e178;

c-lime-5

color: #a6da57;

c-lime-6

color: #95d337;

c-lime

color: #84cc16;

c-lime-7

color: #72af13;

c-lime-8

color: #5f9310;

c-lime-9

color: #4d760d;

c-lime-10

color: #3a5a0a;

c-lime-11

color: #283d07;

c-lime-12

color: #152104;

c-mint-1

color: #d9f4eb;

c-mint-2

color: #b7ead9;

c-mint-3

color: #96e0c8;

c-mint-4

color: #74d6b6;

c-mint-5

color: #53cda4;

c-mint-6

color: #31c393;

c-mint

color: #10b981;

c-mint-7

color: #0e9f6f;

c-mint-8

color: #0c855d;

c-mint-9

color: #096b4b;

c-mint-10

color: #075139;

c-mint-11

color: #053827;

c-mint-12

color: #031e15;

c-green-1

color: #d7f8f0;

c-green-2

color: #b4f3e3;

c-green-3

color: #91edd5;

c-green-4

color: #6fe7c8;

c-green-5

color: #4ce1bb;

c-green-6

color: #29dcad;

c-green

color: #06d6a0;

c-green-7

color: #05b88a;

c-green-8

color: #049a73;

c-green-9

color: #037c5d;

c-green-10

color: #035e46;

c-green-11

color: #024030;

c-green-12

color: #01221a;

c-cyan-1

color: #d7f3f8;

c-cyan-2

color: #b4e9f2;

c-cyan-3

color: #91dfec;

c-cyan-4

color: #6fd5e6;

c-cyan-5

color: #4ccae0;

c-cyan-6

color: #29c0da;

c-cyan

color: #06b6d4;

c-cyan-7

color: #059db6;

c-cyan-8

color: #048399;

c-cyan-9

color: #036a7b;

c-cyan-10

color: #03505d;

c-cyan-11

color: #023740;

c-cyan-12

color: #011d22;

c-sky-1

color: #dff4fe;

c-sky-2

color: #c3ebfd;

c-sky-3

color: #a7e2fc;

c-sky-4

color: #8cd9fb;

c-sky-5

color: #70cffa;

c-sky-6

color: #54c6f9;

c-sky

color: #38bdf8;

c-sky-7

color: #30a3d5;

c-sky-8

color: #2888b3;

c-sky-9

color: #206e90;

c-sky-10

color: #19536d;

c-sky-11

color: #11394a;

c-sky-12

color: #091e28;

c-blue-1

color: #dce6fc;

c-blue-2

color: #bed0f9;

c-blue-3

color: #9fbaf6;

c-blue-4

color: #81a5f3;

c-blue-5

color: #628ff1;

c-blue-6

color: #4479ee;

c-blue

color: #2563eb;

c-blue-7

color: #2055ca;

c-blue-8

color: #1b47a9;

c-blue-9

color: #153988;

c-blue-10

color: #102c67;

c-blue-11

color: #0b1e47;

c-blue-12

color: #061026;

c-indigo-1

color: #e6e7fd;

c-indigo-2

color: #d0d1fb;

c-indigo-3

color: #babcf9;

c-indigo-4

color: #a5a6f7;

c-indigo-5

color: #8f91f5;

c-indigo-6

color: #797bf3;

c-indigo

color: #6366f1;

c-indigo-7

color: #5558cf;

c-indigo-8

color: #4749ae;

c-indigo-9

color: #393b8c;

c-indigo-10

color: #2c2d6a;

c-indigo-11

color: #1e1f48;

c-indigo-12

color: #101027;

c-violet-1

color: #ece5fe;

c-violet-2

color: #dccefc;

c-violet-3

color: #ccb7fb;

c-violet-4

color: #bca0fa;

c-violet-5

color: #ab8af9;

c-violet-6

color: #9b73f7;

c-violet

color: #8b5cf6;

c-violet-7

color: #784fd4;

c-violet-8

color: #6442b1;

c-violet-9

color: #51358f;

c-violet-10

color: #3d286c;

c-violet-11

color: #2a1c4a;

c-violet-12

color: #160f27;

c-lavender-1

color: #f1ecfe;

c-lavender-2

color: #e5dcfe;

c-lavender-3

color: #d8ccfd;

c-lavender-4

color: #ccbcfc;

c-lavender-5

color: #c0abfb;

c-lavender-6

color: #b39bfb;

c-lavender

color: #a78bfa;

c-lavender-7

color: #9078d7;

c-lavender-8

color: #7864b4;

c-lavender-9

color: #615191;

c-lavender-10

color: #493d6e;

c-lavender-11

color: #322a4b;

c-lavender-12

color: #1b1628;

c-magenta-1

color: #f9e1fc;

c-magenta-2

color: #f4c8fa;

c-magenta-3

color: #eeaef8;

c-magenta-4

color: #e994f6;

c-magenta-5

color: #e47af3;

c-magenta-6

color: #de60f1;

c-magenta

color: #d946ef;

c-magenta-7

color: #bb3cce;

c-magenta-8

color: #9c32ac;

c-magenta-9

color: #7e298b;

c-magenta-10

color: #5f1f69;

c-magenta-11

color: #411548;

c-magenta-12

color: #230b26;

c-pink-1

color: #fce2ef;

c-pink-2

color: #f9c8e0;

c-pink-3

color: #f7aed2;

c-pink-4

color: #f495c4;

c-pink-5

color: #f17bb6;

c-pink-6

color: #ef62a7;

c-pink

color: #ec4899;

c-pink-7

color: #cb3e84;

c-pink-8

color: #aa346e;

c-pink-9

color: #892a59;

c-pink-10

color: #682043;

c-pink-11

color: #47162e;

c-pink-12

color: #260c18;

c-coral-1

color: #ffe8ed;

c-coral-2

color: #ffd4de;

c-coral-3

color: #ffc0cf;

c-coral-4

color: #ffabbf;

c-coral-5

color: #ff97b0;

c-coral-6

color: #ff83a0;

c-coral

color: #ff6f91;

c-coral-7

color: #db5f7d;

c-coral-8

color: #b85068;

c-coral-9

color: #944054;

c-coral-10

color: #703140;

c-coral-11

color: #4d212c;

c-coral-12

color: #291217;

c-zinc-1

color: #e3e3e5;

c-zinc-2

color: #cbcbce;

c-zinc-3

color: #b3b3b7;

c-zinc-4

color: #9b9ba0;

c-zinc-5

color: #828289;

c-zinc-6

color: #6a6a72;

c-zinc

color: #52525b;

c-zinc-7

color: #47474e;

c-zinc-8

color: #3b3b42;

c-zinc-9

color: #303035;

c-zinc-10

color: #242428;

c-zinc-11

color: #19191b;

c-zinc-12

color: #0d0d0f;

c-gray-1

color: #e7e8eb;

c-gray-2

color: #d3d5d9;

c-gray-3

color: #bec1c7;

c-gray-4

color: #a9adb5;

c-gray-5

color: #9499a4;

c-gray-6

color: #808692;

c-gray

color: #6b7280;

c-gray-7

color: #5c626e;

c-gray-8

color: #4d525c;

c-gray-9

color: #3e424a;

c-gray-10

color: #2f3238;

c-gray-11

color: #202226;

c-gray-12

color: #111214;

c-slate-1

color: #e6e9ec;

c-slate-2

color: #d1d5dc;

c-slate-3

color: #bbc2cc;

c-slate-4

color: #a5aebc;

c-slate-5

color: #8f9bab;

c-slate-6

color: #7a879b;

c-slate

color: #64748b;

c-slate-7

color: #566478;

c-slate-8

color: #485464;

c-slate-9

color: #3a4351;

c-slate-10

color: #2c333d;

c-slate-11

color: #1e232a;

c-slate-12

color: #101316;

c-silver-1

color: #eff0f2;

c-silver-2

color: #e1e3e7;

c-silver-3

color: #d3d7dc;

c-silver-4

color: #c6cad1;

c-silver-5

color: #b8bdc5;

c-silver-6

color: #aab0ba;

c-silver

color: #9ca3af;

c-silver-7

color: #868c97;

c-silver-8

color: #70757e;

c-silver-9

color: #5a5f66;

c-silver-10

color: #45484d;

c-silver-11

color: #2f3135;

c-silver-12

color: #191a1c;

c-black

color: #000000;

c-current

color: currentColor;

c-transparent

color: transparent;

c-white

color: #ffffff;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:c-(value)

Small≥640px

md:c-(value)

Medium≥768px

lg:c-(value)

Large≥1024px

xxl:c-(value)

Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:c-(value)

Opacity Modifiers

Adjust color transparency by appending an opacity suffix.

Append /(opacity) to any color utility to control its transparency level.

Syntax:c-(color)/(opacity)

Text Color

Widely available

c-(value)251 utilities

Responsiveness

Hover State

Opacity Modifiers