Background Color

Set the background color for an element.

baselinewidely

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

Variants

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

Breakpoints

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

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

Opacity

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

bg:indigo-8/50

At 50% opacity, in steps of 5.