Color

Set the text color for an element.

baselinewidely

Class	CSS
c:red-1	color: oklch(0.97 0.015 22);
c:red-2	color: oklch(0.91 0.046 22);
c:red-3	color: oklch(0.851 0.081 22);
c:red-4	color: oklch(0.791 0.12 22);
c:red-5	color: oklch(0.731 0.165 22);
c:red-6	color: oklch(0.672 0.208 22);
c:red	color: oklch(0.612 0.208 22);
c:red-7	color: oklch(0.547 0.208 22);
c:red-8	color: oklch(0.481 0.194 22);
c:red-9	color: oklch(0.416 0.168 22);
c:red-10	color: oklch(0.351 0.141 22);
c:red-11	color: oklch(0.285 0.115 22);
c:red-12	color: oklch(0.22 0.089 22);
c:orange-1	color: oklch(0.97 0.015 39);
c:orange-2	color: oklch(0.926 0.039 39);
c:orange-3	color: oklch(0.882 0.065 39);
c:orange-4	color: oklch(0.837 0.093 39);
c:orange-5	color: oklch(0.793 0.123 39);
c:orange-6	color: oklch(0.749 0.156 39);
c:orange	color: oklch(0.705 0.193 39);
c:orange-7	color: oklch(0.624 0.193 39);
c:orange-8	color: oklch(0.543 0.173 39);
c:orange-9	color: oklch(0.462 0.147 39);
c:orange-10	color: oklch(0.382 0.122 39);
c:orange-11	color: oklch(0.301 0.096 39);
c:orange-12	color: oklch(0.22 0.07 39);
c:yellow-1	color: oklch(0.97 0.027 80);
c:yellow-2	color: oklch(0.946 0.049 80);
c:yellow-3	color: oklch(0.923 0.071 80);
c:yellow-4	color: oklch(0.899 0.094 80);
c:yellow-5	color: oklch(0.875 0.118 80);
c:yellow-6	color: oklch(0.851 0.142 80);
c:yellow	color: oklch(0.828 0.167 80);
c:yellow-7	color: oklch(0.726 0.151 80);
c:yellow-8	color: oklch(0.625 0.13 80);
c:yellow-9	color: oklch(0.524 0.109 80);
c:yellow-10	color: oklch(0.423 0.088 80);
c:yellow-11	color: oklch(0.321 0.067 80);
c:yellow-12	color: oklch(0.22 0.046 80);
c:lime-1	color: oklch(0.97 0.066 131);
c:lime-2	color: oklch(0.936 0.154 131);
c:lime-3	color: oklch(0.903 0.204 131);
c:lime-4	color: oklch(0.869 0.204 131);
c:lime-5	color: oklch(0.835 0.204 131);
c:lime-6	color: oklch(0.802 0.204 131);
c:lime	color: oklch(0.768 0.204 131);
c:lime-7	color: oklch(0.677 0.185 131);
c:lime-8	color: oklch(0.585 0.16 131);
c:lime-9	color: oklch(0.494 0.135 131);
c:lime-10	color: oklch(0.403 0.11 131);
c:lime-11	color: oklch(0.311 0.085 131);
c:lime-12	color: oklch(0.22 0.06 131);
c:mint-1	color: oklch(0.97 0.043 168);
c:mint-2	color: oklch(0.942 0.086 168);
c:mint-3	color: oklch(0.913 0.134 168);
c:mint-4	color: oklch(0.885 0.15 168);
c:mint-5	color: oklch(0.857 0.15 168);
c:mint-6	color: oklch(0.828 0.15 168);
c:mint	color: oklch(0.8 0.15 168);
c:mint-7	color: oklch(0.703 0.142 168);
c:mint-8	color: oklch(0.607 0.123 168);
c:mint-9	color: oklch(0.51 0.103 168);
c:mint-10	color: oklch(0.413 0.084 168);
c:mint-11	color: oklch(0.317 0.064 168);
c:mint-12	color: oklch(0.22 0.045 168);
c:green-1	color: oklch(0.97 0.054 142);
c:green-2	color: oklch(0.918 0.161 142);
c:green-3	color: oklch(0.867 0.2 142);
c:green-4	color: oklch(0.815 0.2 142);
c:green-5	color: oklch(0.763 0.2 142);
c:green-6	color: oklch(0.712 0.2 142);
c:green	color: oklch(0.66 0.2 142);
c:green-7	color: oklch(0.587 0.197 142);
c:green-8	color: oklch(0.513 0.173 142);
c:green-9	color: oklch(0.44 0.148 142);
c:green-10	color: oklch(0.367 0.123 142);
c:green-11	color: oklch(0.293 0.099 142);
c:green-12	color: oklch(0.22 0.074 142);
c:cyan-1	color: oklch(0.97 0.031 205);
c:cyan-2	color: oklch(0.925 0.078 205);
c:cyan-3	color: oklch(0.88 0.126 205);
c:cyan-4	color: oklch(0.835 0.13 205);
c:cyan-5	color: oklch(0.79 0.13 205);
c:cyan-6	color: oklch(0.745 0.127 205);
c:cyan	color: oklch(0.7 0.12 205);
c:cyan-7	color: oklch(0.62 0.106 205);
c:cyan-8	color: oklch(0.54 0.092 205);
c:cyan-9	color: oklch(0.46 0.079 205);
c:cyan-10	color: oklch(0.38 0.065 205);
c:cyan-11	color: oklch(0.3 0.051 205);
c:cyan-12	color: oklch(0.22 0.038 205);
c:sky-1	color: oklch(0.97 0.016 237);
c:sky-2	color: oklch(0.942 0.032 237);
c:sky-3	color: oklch(0.913 0.048 237);
c:sky-4	color: oklch(0.885 0.065 237);
c:sky-5	color: oklch(0.857 0.081 237);
c:sky-6	color: oklch(0.828 0.099 237);
c:sky	color: oklch(0.8 0.116 237);
c:sky-7	color: oklch(0.703 0.12 237);
c:sky-8	color: oklch(0.607 0.12 237);
c:sky-9	color: oklch(0.51 0.111 237);
c:sky-10	color: oklch(0.413 0.09 237);
c:sky-11	color: oklch(0.317 0.069 237);
c:sky-12	color: oklch(0.22 0.048 237);
c:blue-1	color: oklch(0.97 0.014 263);
c:blue-2	color: oklch(0.899 0.049 263);
c:blue-3	color: oklch(0.829 0.085 263);
c:blue-4	color: oklch(0.758 0.123 263);
c:blue-5	color: oklch(0.687 0.164 263);
c:blue-6	color: oklch(0.617 0.207 263);
c:blue	color: oklch(0.546 0.215 263);
c:blue-7	color: oklch(0.492 0.215 263);
c:blue-8	color: oklch(0.437 0.215 263);
c:blue-9	color: oklch(0.383 0.191 263);
c:blue-10	color: oklch(0.329 0.164 263);
c:blue-11	color: oklch(0.274 0.137 263);
c:blue-12	color: oklch(0.22 0.11 263);
c:indigo-1	color: oklch(0.97 0.014 277);
c:indigo-2	color: oklch(0.906 0.046 277);
c:indigo-3	color: oklch(0.842 0.079 277);
c:indigo-4	color: oklch(0.778 0.114 277);
c:indigo-5	color: oklch(0.714 0.151 277);
c:indigo-6	color: oklch(0.65 0.189 277);
c:indigo	color: oklch(0.585 0.204 277);
c:indigo-7	color: oklch(0.525 0.204 277);
c:indigo-8	color: oklch(0.464 0.204 277);
c:indigo-9	color: oklch(0.403 0.204 277);
c:indigo-10	color: oklch(0.342 0.204 277);
c:indigo-11	color: oklch(0.281 0.174 277);
c:indigo-12	color: oklch(0.22 0.136 277);
c:violet-1	color: oklch(0.97 0.015 293);
c:violet-2	color: oklch(0.909 0.048 293);
c:violet-3	color: oklch(0.849 0.082 293);
c:violet-4	color: oklch(0.788 0.118 293);
c:violet-5	color: oklch(0.727 0.156 293);
c:violet-6	color: oklch(0.666 0.195 293);
c:violet	color: oklch(0.606 0.219 293);
c:violet-7	color: oklch(0.541 0.219 293);
c:violet-8	color: oklch(0.477 0.219 293);
c:violet-9	color: oklch(0.413 0.219 293);
c:violet-10	color: oklch(0.349 0.194 293);
c:violet-11	color: oklch(0.284 0.158 293);
c:violet-12	color: oklch(0.22 0.122 293);
c:lavender-1	color: oklch(0.97 0.016 294);
c:lavender-2	color: oklch(0.926 0.039 294);
c:lavender-3	color: oklch(0.883 0.063 294);
c:lavender-4	color: oklch(0.839 0.088 294);
c:lavender-5	color: oklch(0.796 0.114 294);
c:lavender-6	color: oklch(0.752 0.141 294);
c:lavender	color: oklch(0.709 0.159 294);
c:lavender-7	color: oklch(0.627 0.159 294);
c:lavender-8	color: oklch(0.546 0.159 294);
c:lavender-9	color: oklch(0.464 0.159 294);
c:lavender-10	color: oklch(0.383 0.159 294);
c:lavender-11	color: oklch(0.301 0.159 294);
c:lavender-12	color: oklch(0.22 0.122 294);
c:magenta-1	color: oklch(0.97 0.024 322);
c:magenta-2	color: oklch(0.919 0.066 322);
c:magenta-3	color: oklch(0.869 0.11 322);
c:magenta-4	color: oklch(0.818 0.156 322);
c:magenta-5	color: oklch(0.768 0.204 322);
c:magenta-6	color: oklch(0.717 0.255 322);
c:magenta	color: oklch(0.667 0.259 322);
c:magenta-7	color: oklch(0.592 0.259 322);
c:magenta-8	color: oklch(0.518 0.246 322);
c:magenta-9	color: oklch(0.443 0.21 322);
c:magenta-10	color: oklch(0.369 0.175 322);
c:magenta-11	color: oklch(0.294 0.14 322);
c:magenta-12	color: oklch(0.22 0.104 322);
c:pink-1	color: oklch(0.97 0.017 354);
c:pink-2	color: oklch(0.918 0.048 354);
c:pink-3	color: oklch(0.865 0.082 354);
c:pink-4	color: oklch(0.813 0.12 354);
c:pink-5	color: oklch(0.761 0.163 354);
c:pink-6	color: oklch(0.708 0.212 354);
c:pink	color: oklch(0.656 0.212 354);
c:pink-7	color: oklch(0.583 0.212 354);
c:pink-8	color: oklch(0.511 0.21 354);
c:pink-9	color: oklch(0.438 0.18 354);
c:pink-10	color: oklch(0.365 0.15 354);
c:pink-11	color: oklch(0.293 0.12 354);
c:pink-12	color: oklch(0.22 0.091 354);
c:coral-1	color: oklch(0.97 0.015 8);
c:coral-2	color: oklch(0.929 0.037 8);
c:coral-3	color: oklch(0.888 0.061 8);
c:coral-4	color: oklch(0.848 0.086 8);
c:coral-5	color: oklch(0.807 0.114 8);
c:coral-6	color: oklch(0.766 0.144 8);
c:coral	color: oklch(0.725 0.177 8);
c:coral-7	color: oklch(0.641 0.177 8);
c:coral-8	color: oklch(0.557 0.177 8);
c:coral-9	color: oklch(0.473 0.177 8);
c:coral-10	color: oklch(0.388 0.156 8);
c:coral-11	color: oklch(0.304 0.122 8);
c:coral-12	color: oklch(0.22 0.088 8);
c:zinc-1	color: oklch(0.97 0.015 286);
c:zinc-2	color: oklch(0.882 0.015 286);
c:zinc-3	color: oklch(0.794 0.015 286);
c:zinc-4	color: oklch(0.706 0.015 286);
c:zinc-5	color: oklch(0.618 0.015 286);
c:zinc-6	color: oklch(0.53 0.015 286);
c:zinc	color: oklch(0.442 0.015 286);
c:zinc-7	color: oklch(0.405 0.015 286);
c:zinc-8	color: oklch(0.368 0.015 286);
c:zinc-9	color: oklch(0.331 0.015 286);
c:zinc-10	color: oklch(0.294 0.015 286);
c:zinc-11	color: oklch(0.257 0.015 286);
c:zinc-12	color: oklch(0.22 0.015 286);
c:gray-1	color: oklch(0.97 0.014 264);
c:gray-2	color: oklch(0.9 0.023 264);
c:gray-3	color: oklch(0.83 0.023 264);
c:gray-4	color: oklch(0.761 0.023 264);
c:gray-5	color: oklch(0.691 0.023 264);
c:gray-6	color: oklch(0.621 0.023 264);
c:gray	color: oklch(0.551 0.023 264);
c:gray-7	color: oklch(0.496 0.023 264);
c:gray-8	color: oklch(0.441 0.023 264);
c:gray-9	color: oklch(0.386 0.023 264);
c:gray-10	color: oklch(0.33 0.023 264);
c:gray-11	color: oklch(0.275 0.023 264);
c:gray-12	color: oklch(0.22 0.023 264);
c:slate-1	color: oklch(0.97 0.014 257);
c:slate-2	color: oklch(0.901 0.041 257);
c:slate-3	color: oklch(0.831 0.041 257);
c:slate-4	color: oklch(0.762 0.041 257);
c:slate-5	color: oklch(0.693 0.041 257);
c:slate-6	color: oklch(0.624 0.041 257);
c:slate	color: oklch(0.554 0.041 257);
c:slate-7	color: oklch(0.499 0.041 257);
c:slate-8	color: oklch(0.443 0.041 257);
c:slate-9	color: oklch(0.387 0.041 257);
c:slate-10	color: oklch(0.331 0.041 257);
c:slate-11	color: oklch(0.276 0.041 257);
c:slate-12	color: oklch(0.22 0.041 257);
c:silver-1	color: oklch(0.97 0.014 261);
c:silver-2	color: oklch(0.927 0.019 261);
c:silver-3	color: oklch(0.885 0.019 261);
c:silver-4	color: oklch(0.842 0.019 261);
c:silver-5	color: oklch(0.799 0.019 261);
c:silver-6	color: oklch(0.756 0.019 261);
c:silver	color: oklch(0.714 0.019 261);
c:silver-7	color: oklch(0.631 0.019 261);
c:silver-8	color: oklch(0.549 0.019 261);
c:silver-9	color: oklch(0.467 0.019 261);
c:silver-10	color: oklch(0.385 0.019 261);
c:silver-11	color: oklch(0.302 0.019 261);
c:silver-12	color: oklch(0.22 0.019 261);
c:black	color: #000000;
c:current	color: currentColor;
c:transparent	color: transparent;
c:white	color: #ffffff;

Variants

Prefix any class with a variant to apply it only under that condition. Variants stack, as in @md:h:c:indigo-8.

Breakpoints

Apply a class from a viewport width up. Each breakpoint covers its width & every width above it.

@xs:c:indigo-8	From 32rem up.
@sm:c:indigo-8	From 40rem up.
@md:c:indigo-8	From 48rem up.
@lg:c:indigo-8	From 64rem up.
@xl:c:indigo-8	From 80rem up.
@xxl:c:indigo-8	From 96rem up.

Containers

Apply a class from a container's width up, not the viewport's. Mark the parent with ct:is first.

@c:xs:c:indigo-8	Container from 32rem up.
@c:sm:c:indigo-8	Container from 40rem up.
@c:md:c:indigo-8	Container from 48rem up.
@c:lg:c:indigo-8	Container from 64rem up.
@c:xl:c:indigo-8	Container from 80rem up.
@c:xxl:c:indigo-8	Container from 96rem up.

Media

Apply a class when the device or the page matches a condition, or on the first frame an element renders.

@pc:c:indigo-8	On a touch screen.
@prm:c:indigo-8	With reduced motion on.
@st:c:indigo-8	On the first frame.

States

Apply a class only while the element is in a state, such as hovered, focused or checked.

h:c:indigo-8	On :hover.
f:c:indigo-8	On :focus.
fv:c:indigo-8	On :focus-visible.
a:c:indigo-8	On :active.
d:c:indigo-8	On :disabled.
fc:c:indigo-8	On :first-child.
c:c:indigo-8	On :checked.
e:c:indigo-8	On :empty.
fw:c:indigo-8	On :focus-within.
i:c:indigo-8	On :invalid.
in:c:indigo-8	On :indeterminate.
lc:c:indigo-8	On :last-child.
nc:c:indigo-8	On :nth-child.
r:c:indigo-8	On :required.
ro:c:indigo-8	On :read-only.
v:c:indigo-8	On :valid.

Pseudo Elements

Style a part of the element rather than the element itself, such as its placeholder or the selected text.

a::c:indigo-8	On ::after.
b::c:indigo-8	On ::before.
p::c:indigo-8	On ::placeholder.
s::c:indigo-8	On ::selection.

Opacity

Add a slash & a step after a color to set its opacity.

c:indigo-8/50

At 50% opacity, in steps of 5.