Accent Color

Set the accent color for form controls.

baselinelimited

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

Variants

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

Breakpoints

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

@xs:ac:indigo-8	From 32rem up.
@sm:ac:indigo-8	From 40rem up.
@md:ac:indigo-8	From 48rem up.
@lg:ac:indigo-8	From 64rem up.
@xl:ac:indigo-8	From 80rem up.
@xxl:ac: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:ac:indigo-8	Container from 32rem up.
@c:sm:ac:indigo-8	Container from 40rem up.
@c:md:ac:indigo-8	Container from 48rem up.
@c:lg:ac:indigo-8	Container from 64rem up.
@c:xl:ac:indigo-8	Container from 80rem up.
@c:xxl:ac: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:ac:indigo-8	On a touch screen.
@prm:ac:indigo-8	With reduced motion on.
@st:ac: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:ac:indigo-8	On :hover.
f:ac:indigo-8	On :focus.
fv:ac:indigo-8	On :focus-visible.
a:ac:indigo-8	On :active.
d:ac:indigo-8	On :disabled.
fc:ac:indigo-8	On :first-child.
c:ac:indigo-8	On :checked.
e:ac:indigo-8	On :empty.
fw:ac:indigo-8	On :focus-within.
i:ac:indigo-8	On :invalid.
in:ac:indigo-8	On :indeterminate.
lc:ac:indigo-8	On :last-child.
nc:ac:indigo-8	On :nth-child.
r:ac:indigo-8	On :required.
ro:ac:indigo-8	On :read-only.
v:ac: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::ac:indigo-8	On ::after.
b::ac:indigo-8	On ::before.
p::ac:indigo-8	On ::placeholder.
s::ac:indigo-8	On ::selection.

Opacity

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

ac:indigo-8/50

At 50% opacity, in steps of 5.