# What does the library offer?

36 color themes, ready-to-use tokens with dark mode, a theme for your brand, and state functions.

We offer 36 color themes, plus gray, and everything you need to use them in your app: ready-to-use tokens that handle dark mode, a theme for your brand's own color, and functions for pressed and disabled states. Here are the themes, each from light to dark:

Every family from light to dark, in Display P3 hex:

| Family          | OKLCH hue | `_50`   | `_200`  | `_350`  | `_500`  | `_650`  | `_800`  | `_950`  |
| --------------- | --------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |
| `proGray`       | none      | #ffffff | #dddddd | #b1b1b1 | #818182 | #535353 | #2c2c2c | #0d0d0d |
| `proPink`       | 0°        | #fef2f5 | #fbc4d5 | #f88eb2 | #cb6c8d | #985069 | #683446 | #3b1b26 |
| `proRuby`       | 10°       | #fef2f3 | #fdc4cb | #fc8ea0 | #ce6c7e | #9a505d | #69343e | #3c1b21 |
| `proRed`        | 20°       | #fef2f1 | #fec5c3 | #fd8f8e | #cf6d6e | #9b5151 | #6a3535 | #3c1c1c |
| `proTomato`     | 30°       | #fef2ef | #fdc6ba | #fd917c | #cf6f5e | #9b5245 | #6a362c | #3c1c16 |
| `proCoral`      | 40°       | #fef3ee | #fcc8b2 | #fb946b | #cd724d | #9a5438 | #693724 | #3b1d11 |
| `proOrange`     | 50°       | #fdf3ec | #f9c9ab | #f6985a | #c9753d | #97572c | #67391b | #3a1e0c |
| `proBrown`      | 60°       | #fcf3eb | #f6cca6 | #f09d4a | #c47a2d | #935a20 | #643c12 | #382007 |
| `proAmber`      | 70°       | #fbf4ea | #f1cea1 | #e8a23c | #bc7e1d | #8d5e14 | #603e09 | #362103 |
| `proGold`       | 80°       | #faf4ea | #ebd09e | #dea732 | #b4830e | #866108 | #5b4103 | #332301 |
| `proMustard`    | 90°       | #f9f5ea | #e5d39d | #d2ac2e | #a9880b | #7e6506 | #554303 | #2f2401 |
| `proYellow`     | 100°      | #f7f5ea | #ded59e | #c5b232 | #9e8d0d | #766908 | #4f4603 | #2c2601 |
| `proOlive`      | 110°      | #f5f6ea | #d6d8a1 | #b6b73b | #91911c | #6c6c13 | #484809 | #272703 |
| `proChartreuse` | 120°      | #f4f6eb | #cedaa5 | #a6bb49 | #83952c | #616f1f | #414a12 | #232907 |
| `proLime`       | 130°      | #f2f7ec | #c6dcaa | #95bf58 | #74983c | #56712b | #394c1a | #1e2a0b |
| `proGrass`      | 140°      | #f0f7ee | #bedeb1 | #84c269 | #649b4c | #497437 | #304e23 | #182b10 |
| `proGreen`      | 150°      | #eff7ef | #b6dfb9 | #71c47a | #539d5b | #3c7543 | #264f2b | #132b16 |
| `proJade`       | 160°      | #eef8f1 | #b0e0c1 | #5ec68b | #409f6b | #2e764f | #1c5034 | #0d2c1b |
| `proEmerald`    | 170°      | #edf8f3 | #aae0ca | #4ac79d | #2b9f7b | #1e775b | #11503c | #062c20 |
| `proMint`       | 180°      | #ecf8f5 | #a5e0d3 | #37c7af | #0e9f8a | #087767 | #035045 | #022c25 |
| `proTeal`       | 190°      | #ebf8f7 | #a3e0dc | #26c6c0 | #0e9e99 | #087672 | #034f4d | #012c2a |
| `proTurquoise`  | 200°      | #ebf8f9 | #a1dfe4 | #1ec4d1 | #0e9ca6 | #08747c | #034e54 | #012b2f |
| `proCyan`       | 210°      | #ebf7fa | #a2deec | #24c2e0 | #0e9ab3 | #087386 | #034d5b | #012b33 |
| `proCerulean`   | 220°      | #ecf7fc | #a5ddf4 | #35bfee | #0e98c2 | #087291 | #034c63 | #012a38 |
| `proSky`        | 230°      | #ecf7fd | #a9dbfa | #48bcfa | #2895cd | #1c6f9a | #0f4b69 | #06293b |
| `proAzure`      | 240°      | #edf6fe | #afd9fe | #64b7fd | #3d92d6 | #2c6ca0 | #1b496d | #0c283e |
| `proBlue`       | 250°      | #eff6ff | #b8d7fe | #7ab4fd | #508edc | #3a69a5 | #254771 | #122640 |
| `proCobalt`     | 260°      | #f0f5ff | #bfd5fe | #8ab0fd | #618ae0 | #4766a9 | #2e4473 | #172542 |
| `proIndigo`     | 270°      | #f2f5ff | #c6d3fe | #98acfd | #7086e2 | #5363aa | #374274 | #1d2442 |
| `proIris`       | 280°      | #f3f4ff | #ccd1fe | #a4a9fd | #7f82e1 | #5e60a9 | #3f4074 | #212242 |
| `proViolet`     | 290°      | #f5f4ff | #d3cefe | #b0a4fd | #8d7edd | #695da6 | #463e72 | #262141 |
| `proGrape`      | 300°      | #f6f3ff | #daccfe | #be9ffd | #997ad7 | #725aa2 | #4d3c6e | #2a203f |
| `proPurple`     | 310°      | #f8f3fe | #e2c9fb | #cc99fd | #a577cf | #7b589b | #533a6a | #2e1f3c |
| `proOrchid`     | 320°      | #f9f2fc | #e9c8f5 | #d895f1 | #af73c5 | #835593 | #593864 | #311e39 |
| `proPlum`       | 330°      | #fbf2fb | #efc6ee | #e392e3 | #b871b9 | #8a538a | #5d375e | #341d35 |
| `proMagenta`    | 340°      | #fcf2f9 | #f4c5e6 | #ec90d4 | #c06fab | #905280 | #623656 | #371c30 |
| `proRose`       | 350°      | #fdf2f7 | #f8c5de | #f38ec4 | #c66d9d | #945075 | #65354f | #391b2b |

## 36 color themes of 20 stops

```swift
let pink = Color.proPink     // a theme, by name
pink._400                    // one of its 20 stops, by number
pink.allStops.count          // 20
Color.allProHues["Pink"]     // the same theme, found by name
```

Each theme is a [color family](https://colortokenskit.com/reference/glossary/index.md#color-family) of 20 [stops](https://colortokenskit.com/basics/what-are-tokens/index.md), from `_50`, nearly white, to `_1000`, nearly black: 740 colors in all. Pick a cell for its hex, hue and the Swift that makes it:

Every stop of every family, as Display P3 hex:

| Family          | \_50    | \_100   | \_150   | \_200   | \_250   | \_300   | \_350   | \_400   | \_450   | \_500   | \_550   | \_600   | \_650   | \_700   | \_750   | \_800   | \_850   | \_900   | \_950   | \_1000  |
| --------------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |
| `proGray`       | #ffffff | #f5f5f5 | #e9e9e9 | #dddddd | #cfcfcf | #c0c0c0 | #b1b1b1 | #a1a1a1 | #909091 | #818182 | #717272 | #626262 | #535353 | #454545 | #383838 | #2c2c2c | #212121 | #171718 | #0d0d0d | #000001 |
| `proPink`       | #fef2f5 | #fde3ea | #fcd4e0 | #fbc4d5 | #fab3c9 | #f9a1be | #f88eb2 | #ea82a6 | #dc769a | #cb6c8d | #ba6381 | #a95975 | #985069 | #88465d | #783d52 | #683446 | #582c3b | #492331 | #3b1b26 | #2d131c |
| `proRuby`       | #fef2f3 | #fee3e6 | #fdd4d9 | #fdc4cb | #fdb3bd | #fca1af | #fc8ea0 | #ed8295 | #df7688 | #ce6c7e | #bd6373 | #ab5968 | #9a505d | #8a4652 | #7a3d48 | #69343e | #592c34 | #4a232a | #3c1b21 | #2e1318 |
| `proRed`        | #fef2f1 | #fee4e2 | #fed5d3 | #fec5c3 | #feb4b1 | #fea2a0 | #fd8f8e | #ef8383 | #e17777 | #cf6d6e | #be6364 | #ad5a5a | #9b5151 | #8b4747 | #7a3e3e | #6a3535 | #5a2c2c | #4b2424 | #3c1c1c | #2e1414 |
| `proTomato`     | #fef2ef | #fee4de | #fed6cd | #fdc6ba | #feb5a6 | #fda492 | #fd917c | #ef8571 | #e07966 | #cf6f5e | #be6555 | #ac5c4d | #9b5245 | #8b483c | #7a3f34 | #6a362c | #5a2d25 | #4b251e | #3c1c16 | #2e140f |
| `proCoral`      | #fef3ee | #fde5db | #fdd7c7 | #fcc8b2 | #fcb79c | #fba684 | #fb946b | #ec8860 | #de7c54 | #cd724d | #bc6846 | #ab5e3f | #9a5438 | #894a31 | #79412a | #693724 | #592e1d | #4a2617 | #3b1d11 | #2e150b |
| `proOrange`     | #fdf3ec | #fce6d8 | #fbd8c2 | #f9c9ab | #f8ba92 | #f7a977 | #f6985a | #e88c4f | #da8043 | #c9753d | #b86b37 | #a86132 | #97572c | #874d26 | #774320 | #67391b | #573015 | #492711 | #3a1e0c | #2d1607 |
| `proBrown`      | #fcf3eb | #fae7d5 | #f8d9be | #f6cca6 | #f4bd8a | #f2ad6d | #f09d4a | #e2913f | #d48431 | #c47a2d | #b36f28 | #a36524 | #935a20 | #83501b | #734616 | #643c12 | #55320e | #46290a | #382007 | #2b1704 |
| `proAmber`      | #fbf4ea | #f8e8d3 | #f4dbbb | #f1cea1 | #eec084 | #ebb164 | #e8a23c | #da9630 | #cc891f | #bc7e1d | #ad7319 | #9d6817 | #8d5e14 | #7e530f | #6f480d | #603e09 | #513407 | #442b05 | #362103 | #291802 |
| `proGold`       | #faf4ea | #f5e9d2 | #f0ddb9 | #ebd09e | #e7c380 | #e2b55f | #dea732 | #d09b24 | #c38e0e | #b4830e | #a5780a | #956d09 | #866108 | #785605 | #694b04 | #5b4103 | #4d3602 | #402d02 | #332301 | #271901 |
| `proMustard`    | #f9f5ea | #f2ead2 | #ebdfb8 | #e5d39d | #dec77f | #d8ba5d | #d2ac2e | #c5a01f | #b7940d | #a9880b | #9b7c09 | #8d7108 | #7e6506 | #705a05 | #634f04 | #554303 | #483902 | #3c2f01 | #2f2401 | #241b01 |
| `proYellow`     | #f7f5ea | #eeebd2 | #e6e0b9 | #ded59e | #d5ca80 | #cdbe5e | #c5b232 | #b8a524 | #ab990d | #9e8d0d | #908009 | #837509 | #766908 | #695d05 | #5c5104 | #4f4603 | #433b02 | #373002 | #2c2601 | #211c01 |
| `proOlive`      | #f5f6ea | #ebecd3 | #e0e2bb | #d6d8a1 | #cbcd83 | #c0c263 | #b6b73b | #aaaa2f | #9d9d1f | #91911c | #858518 | #787816 | #6c6c13 | #60600f | #54540c | #484809 | #3d3d07 | #323205 | #272703 | #1d1d02 |
| `proChartreuse` | #f4f6eb | #e7edd5 | #dbe4bd | #cedaa5 | #c1d089 | #b3c56c | #a6bb49 | #9baf3d | #8ea230 | #83952c | #788827 | #6c7c23 | #616f1f | #56631a | #4b5616 | #414a12 | #363f0d | #2d340a | #232907 | #191e04 |
| `proLime`       | #f2f7ec | #e3eed7 | #d5e5c1 | #c6dcaa | #b6d391 | #a6c976 | #95bf58 | #8ab24d | #7ea541 | #74983c | #6a8b36 | #607e30 | #56712b | #4c6525 | #42591f | #394c1a | #2f4015 | #273510 | #1e2a0b | #151f07 |
| `proGrass`      | #f0f7ee | #e0efda | #cfe6c6 | #bedeb1 | #abd59a | #98cb82 | #84c269 | #78b55e | #6da852 | #649b4c | #5b8e44 | #52813e | #497437 | #416730 | #385a29 | #304e23 | #28421c | #203616 | #182b10 | #11200a |
| `proGreen`      | #eff7ef | #ddf0de | #cae7cb | #b6dfb9 | #a1d6a4 | #8acd8f | #71c47a | #66b86f | #5aab63 | #539d5b | #4b9053 | #44824b | #3c7543 | #35683b | #2e5c33 | #264f2b | #1f4324 | #19371d | #132b16 | #0c210f |
| `proJade`       | #eef8f1 | #daf0e1 | #c5e8d1 | #b0e0c1 | #97d7af | #7ccf9e | #5ec68b | #52b980 | #45ac74 | #409f6b | #399161 | #348458 | #2e764f | #276946 | #225c3d | #1c5034 | #17432b | #123823 | #0d2c1b | #072113 |
| `proEmerald`    | #edf8f3 | #d8f0e5 | #c2e8d8 | #aae0ca | #8fd8bb | #70cfac | #4ac79d | #3eba92 | #2ead85 | #2b9f7b | #259270 | #228466 | #1e775b | #196a50 | #155d46 | #11503c | #0d4432 | #093829 | #062c20 | #032117 |
| `proMint`       | #ecf8f5 | #d6f0ea | #bfe8de | #a5e0d3 | #88d8c7 | #66cfbb | #37c7af | #27baa3 | #11ad96 | #0e9f8a | #0c927e | #0a8473 | #087767 | #066a5b | #055d50 | #035045 | #02433a | #02382f | #022c25 | #01211b |
| `proTeal`       | #ebf8f7 | #d5f0ee | #bde8e5 | #a3e0dc | #84d8d3 | #60cfc9 | #26c6c0 | #13b9b3 | #11aba6 | #0e9e99 | #0c908c | #0a837f | #087672 | #066965 | #055c59 | #034f4d | #024341 | #023735 | #012c2a | #01211f |
| `proTurquoise`  | #ebf8f9 | #d4f0f2 | #bce8eb | #a1dfe4 | #82d7de | #5dced7 | #1ec4d1 | #13b7c3 | #11a9b4 | #0e9ca6 | #0c8f98 | #0a828a | #08747c | #06686e | #055b61 | #034e54 | #024247 | #02373b | #012b2f | #012023 |
| `proCyan`       | #ebf7fa | #d4eff6 | #bce7f1 | #a2deec | #83d5e8 | #5fcce4 | #24c2e0 | #13b5d2 | #11a8c3 | #0e9ab3 | #0c8da4 | #0a8095 | #087386 | #066678 | #055a69 | #034d5b | #02414d | #023640 | #012b33 | #012027 |
| `proCerulean`   | #ecf7fc | #d5eff9 | #bee6f6 | #a5ddf4 | #87d3f2 | #65c9f0 | #35bfee | #25b2e0 | #10a5d2 | #0e98c2 | #0c8bb1 | #0a7ea1 | #087291 | #066581 | #055972 | #034c63 | #024054 | #023546 | #012a38 | #011f2a |
| `proSky`        | #ecf7fd | #d7eefc | #c1e5fb | #a9dbfa | #8dd1fa | #6ec6fa | #48bcfa | #3bafec | #2ba2de | #2895cd | #2388bc | #1f7cab | #1c6f9a | #176389 | #135779 | #0f4b69 | #0b3f59 | #08344a | #06293b | #031e2e |
| `proAzure`      | #edf6fe | #d9edfe | #c4e3fe | #afd9fe | #98cefe | #7fc3fe | #64b7fd | #4fabf6 | #439ee8 | #3d92d6 | #3785c4 | #3279b2 | #2c6ca0 | #26608f | #20547e | #1b496d | #153d5d | #11324e | #0c283e | #071d30 |
| `proBlue`       | #eff6ff | #ddecff | #cbe1fe | #b8d7fe | #a4cbfe | #8fc0fe | #7ab4fd | #63a7fd | #579aef | #508edc | #4882ca | #4176b8 | #3a69a5 | #335e94 | #2c5282 | #254771 | #1e3b60 | #183150 | #122640 | #0b1c32 |
| `proCobalt`     | #f0f5ff | #e0ebff | #d0e0fe | #bfd5fe | #aec9fe | #9cbcfe | #8ab0fd | #77a3fd | #6996f3 | #618ae0 | #587ece | #4f72bb | #4766a9 | #3e5b97 | #365085 | #2e4473 | #263962 | #1f2f52 | #172542 | #101b33 |
| `proIndigo`     | #f2f5ff | #e3eaff | #d5defe | #c6d3fe | #b6c6fe | #a7b9fe | #98acfd | #889ffd | #7a91f5 | #7086e2 | #667acf | #5d6fbd | #5363aa | #495898 | #404d86 | #374274 | #2e3763 | #252e53 | #1d2442 | #141a33 |
| `proIris`       | #f3f4ff | #e6e9ff | #d9ddfe | #ccd1fe | #bfc4fe | #b1b6fe | #a4a9fd | #979afd | #8a8df4 | #7f82e1 | #7476ce | #696bbc | #5e60a9 | #535597 | #494b85 | #3f4074 | #343662 | #2b2c52 | #212242 | #181933 |
| `proViolet`     | #f5f4ff | #eae8ff | #dedbfe | #d3cefe | #c7c1fe | #bcb3fe | #b0a4fd | #a595fd | #9988f0 | #8d7edd | #8173cb | #7568b9 | #695da6 | #5d5295 | #514883 | #463e72 | #3b3461 | #302a51 | #262141 | #1c1832 |
| `proGrape`      | #f6f3ff | #ede6ff | #e4d9fe | #daccfe | #d1bdfe | #c7aefe | #be9ffd | #b391f8 | #a684ea | #997ad7 | #8c6fc6 | #7f65b4 | #725aa2 | #665091 | #59467f | #4d3c6e | #41325e | #35294e | #2a203f | #201730 |
| `proPurple`     | #f8f3fe | #f1e5fd | #e9d8fc | #e2c9fb | #dbbafb | #d3aafc | #cc99fd | #c08def | #b381e1 | #a577cf | #976cbe | #8962ad | #7b589b | #6e4d8b | #60447a | #533a6a | #46305a | #3a284b | #2e1f3c | #23162e |
| `proOrchid`     | #f9f2fc | #f4e5fa | #eed6f7 | #e9c8f5 | #e3b8f4 | #dea7f2 | #d895f1 | #cb8ae3 | #be7dd5 | #af73c5 | #a069b4 | #925fa4 | #835593 | #754b84 | #674274 | #593864 | #4b2f55 | #3e2647 | #311e39 | #25152b |
| `proPlum`       | #fbf2fb | #f7e4f6 | #f3d5f2 | #efc6ee | #ebb6ea | #e6a5e7 | #e392e3 | #d587d6 | #c87bc8 | #b871b9 | #a967a9 | #995d9a | #8a538a | #7b497b | #6c406d | #5d375e | #4f2e4f | #422542 | #341d35 | #281428 |
| `proMagenta`    | #fcf2f9 | #f9e4f3 | #f6d5ec | #f4c5e6 | #f1b4e0 | #eea3da | #ec90d4 | #de84c7 | #d078ba | #c06fab | #b0659d | #a05b8e | #905280 | #804872 | #713f64 | #623656 | #532d49 | #45243d | #371c30 | #2a1424 |
| `proRose`       | #fdf2f7 | #fbe3ef | #f9d4e6 | #f8c5de | #f6b3d5 | #f4a1cc | #f38ec4 | #e583b7 | #d777aa | #c66d9d | #b5638f | #a55a82 | #945075 | #854768 | #753e5b | #65354f | #562c42 | #472437 | #391b2b | #2c1320 |

On this site, a stop's hex value is [Display P3](https://colortokenskit.com/reference/glossary/index.md#display-p3), the way an iPhone shows it. Many stops are beyond sRGB, and the library's `getHexString()` clamps those into sRGB, so in Swift, name the stop instead of copying its hex.

## Ready-to-use tokens

Every theme comes with 20 tokens, each named for its job in your interface. A token picks one stop for light mode and one for dark, so your app gets dark mode without picking a single dark color. Here are all 20 for `proBlue`:

Every family has these 20 tokens, grouped on the live page into text and icons, backgrounds, surfaces and outlines. For `proBlue`, in Display P3 hex:

| Kind       | Token                         | Light mode            | Dark mode             | Use for                                              |
| ---------- | ----------------------------- | --------------------- | --------------------- | ---------------------------------------------------- |
| Foreground | `foregroundPrimary`           | `_1000` #0b1c32       | `_50` #eff6ff         | Primary text, selected icons                         |
| Foreground | `foregroundSecondary`         | `_800` #254771        | `_200` #b8d7fe        | Secondary text, unselected icons                     |
| Foreground | `foregroundTertiary`          | `_700` #335e94        | `_300` #8fc0fe        | Tertiary text, disabled icons                        |
| Foreground | `invertedForegroundPrimary`   | `_50` #eff6ff         | `_1000` #0b1c32       | Primary text on inverted backgrounds                 |
| Foreground | `invertedForegroundSecondary` | `_150` #cbe1fe        | `_800` #254771        | Secondary text on inverted backgrounds               |
| Foreground | `invertedForegroundTertiary`  | `_250` #a4cbfe        | `_700` #335e94        | Tertiary text on inverted backgrounds                |
| Background | `backgroundPrimary`           | `_50` #eff6ff         | `_1000` #0b1c32       | Main content and app background                      |
| Background | `backgroundSecondary`         | `_100` #ddecff        | `_800` #254771        | Secondary backgrounds, cards                         |
| Background | `backgroundTertiary`          | `_200` #b8d7fe        | `_700` #335e94        | Tertiary backgrounds, modals                         |
| Background | `invertedBackgroundPrimary`   | `_900` #183150        | `_50` #eff6ff         | Main background of inverted areas                    |
| Background | `invertedBackgroundSecondary` | `_800` #254771        | `_150` #cbe1fe        | Cards on inverted areas                              |
| Background | `invertedBackgroundTertiary`  | `_650` #3a69a5        | `_250` #a4cbfe        | Modals on inverted areas                             |
| Surface    | `surfacePrimary`              | `_200` #b8d7fe at 50% | `_700` #335e94 at 50% | Cards and sheets over other content                  |
| Surface    | `surfaceSecondary`            | `_200` #b8d7fe at 30% | `_700` #335e94 at 30% | Panels and dialogs                                   |
| Surface    | `surfaceTertiary`             | `_200` #b8d7fe at 10% | `_700` #335e94 at 10% | Tooltips and popovers                                |
| Surface    | `invertedSurfacePrimary`      | `_400` #63a7fd at 40% | `_600` #4176b8 at 40% | Cards and sheets on dark areas                       |
| Surface    | `invertedSurfaceSecondary`    | `_400` #63a7fd at 20% | `_600` #4176b8 at 20% | Panels and dialogs on dark areas                     |
| Outline    | `outlinePrimary`              | `_600` #4176b8        | `_350` #7ab4fd        | Edges people need to see, like fields and checkboxes |
| Outline    | `outlineSecondary`            | `_200` #b8d7fe        | `_800` #254771        | Decorative borders and dividers                      |
| Outline    | `outlineTertiary`             | `_100` #ddecff        | `_900` #183150        | Decorative hairlines and subtle borders              |

[Semantic tokens](https://colortokenskit.com/getting-started/semantic-tokens/index.md) lists the stops behind each one. `ColorTokens.swift` also puts the same names on `Color`, built on gray, for the parts of your app outside any theme.

## A theme for your brand's color

When your brand color isn't one of the 36 hues, make a theme from its hex:

- \#00B386

```swift
let brand = ProTheme(hex: "#00B386")

VStack(alignment: .leading, spacing: 4) {
    Text("Lisbon")
        .font(.headline)
        .foregroundStyle(brand.foregroundPrimary)     // _1000 in light mode, _50 in dark
    Text("3 nights from October 12")
        .font(.subheadline)
        .foregroundStyle(brand.foregroundSecondary)   // _800 in light mode, _200 in dark
}
.padding()
.frame(maxWidth: .infinity, alignment: .leading)
.background(brand.backgroundPrimary)                  // _50 in light mode, _1000 in dark
```

What this draws, with `#00B386`:

| Color                 | light mode                             | dark mode                             |
| --------------------- | -------------------------------------- | ------------------------------------- |
| `backgroundPrimary`   | #eaf8f2                                | color(display-p3 0.0176 0.1298 0.086) |
| `foregroundPrimary`   | color(display-p3 0.0176 0.1298 0.086)  | #eaf8f2                               |
| `foregroundSecondary` | color(display-p3 0.0797 0.3134 0.2262) | #9ce2c5                               |

The new theme sits between jade and emerald, keeps #00B386 as its own color, and has every stop and token the built-in themes have. [Replacing your app colors](https://colortokenskit.com/getting-started/replacing-colors/index.md) shows how to move your colors over.

## Functions for pressed and disabled states

```swift
let fill = brand.invertedBackgroundTertiary   // _650 in light mode, _250 in dark

HStack {
    Text("Book now").padding(12).background(fill)
    Text("Book now").padding(12).background(fill.darken(by: 2))       // pressed: _750 and _350
    Text("Sold out").padding(12).background(fill.desaturate(by: 1))   // disabled: gray, as light as fill
}
.foregroundStyle(brand.invertedForegroundPrimary)
```

What this draws, with `#00B386`:

| Color                        | light mode                             | dark mode                              |
| ---------------------------- | -------------------------------------- | -------------------------------------- |
| `invertedForegroundPrimary`  | #eaf8f2                                | color(display-p3 0.0176 0.1298 0.086)  |
| `invertedBackgroundTertiary` | color(display-p3 0.1368 0.4655 0.3425) | #79dab5                                |
| `_750/_350`                  | color(display-p3 0.0977 0.3637 0.2645) | color(display-p3 0.3144 0.7788 0.5953) |
| `#686868/#C8C8C8`            | #686868                                | #c8c8c8                                |

Each state comes from the color you already have, so it's still a palette color and the label stays readable. [Building for interaction states](https://colortokenskit.com/getting-started/interaction-states/index.md) shows every state, and [`darken(by:)`](https://colortokenskit.com/api/darken/index.md) and [`desaturate(by:)`](https://colortokenskit.com/api/desaturate/index.md) explain the two functions.

## Accessibility from day one

- proRed.\_600: #ad5a5a
- proGreen.\_600: #44824b
- proBlue.\_600: #4176b8

Every hue has the same lightness at each stop, so a stop has the same contrast in every theme: `_600` passes WCAG AA as text on white in all 36 hues, and every text token passes on its page background in both modes. In the chart above, set "See as" to "Lightness only", and each column of hues turns into one gray. [How accessible is it?](https://colortokenskit.com/basics/how-accessible/index.md) has the details.

## See also

- [How did we choose and build these colors?](https://colortokenskit.com/basics/how-the-colors-were-built/index.md): Why every hue shares one lightness and one chroma at each stop, and how the 36 hues were named.
- [Understanding semantic tokens](https://colortokenskit.com/getting-started/semantic-tokens/index.md): Learn the 20 tokens by the job each one does, and get dark mode and passing contrast with them.
- [Setting up themes](https://colortokenskit.com/advanced/themes/index.md): Recolor a view, a screen or your whole app from one value, with the same contrast in every hue.
- [Installing ColorTokensKit](https://colortokenskit.com/getting-started/installing/index.md): Add one package and one file of tokens, and every view gets the palette and dark mode.

---

From ColorTokensKit, by Penguin Design Ventures: https://colortokenskit.com/basics/color-library/ (updated September 26, 2026).