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;

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

Opacity Modifiers

Adjust color transparency by appending an opacity suffix.

Color

Widely available

c:red-1, c:red-2, c:red-3, …251 utilities

Media Queries

@pc:c:indigo-8, @prm:c:indigo-8, @xs:c:indigo-8, …8 media queries

Pseudo Classes

a:c:indigo-8, c:c:indigo-8, d:c:indigo-8, …16 pseudo classes

Opacity Modifiers

c:indigo-8/0 … c:indigo-8/9520 steps