# Color

Set the text color for an element.

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

Chrome 1 · Edge 12 · Firefox 1 · Safari 1

| Class | Properties | Value |
|-------|------------|-------|
| `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.

| Class | Applies |
|-------|---------|
| `@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.

| Class | Applies |
|-------|---------|
| `@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.

| Class | Applies |
|-------|---------|
| `@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.

| Class | Applies |
|-------|---------|
| `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.

| Class | Applies |
|-------|---------|
| `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.

| Class | Applies |
|-------|---------|
| `c:indigo-8/50` | At 50% opacity, in steps of 5. |