# ColorTokensKit

> ColorTokensKit is a Swift package that turns one hue into a 20-stop color palette for SwiftUI, with semantic tokens for light and dark mode, color functions, harmonies, smooth OKLCH gradients and contrast checks. Every hue shares one lightness per stop, so a stop has the same WCAG contrast in every hue. This wiki explains how to use it and why it works; every color value in it is computed by code tested against the Swift package.

Install with Swift Package Manager from https://github.com/metasidd/ColorTokensKit-Swift.git. Supports iOS 16.0, macOS 13.0, tvOS 16.0, watchOS 9.0, visionOS 1.0. Source: https://github.com/metasidd/ColorTokensKit-Swift.

- [Home](https://colortokenskit.com/index.md): The most complete color system for Swift: 740 colors in 37 themes, tokens that handle dark mode, contrast that holds in every hue, and one-line theming.

## The basics

- [What are tokens?](https://colortokenskit.com/basics/what-are-tokens/index.md): Colors picked one at a time never line up. Tokens name each job and pick its color in both modes.
- [Why use ColorTokensKit over native colors?](https://colortokenskit.com/basics/why-colortokenskit/index.md): What you gain over SwiftUI's system colors, asset catalogs and hex values, and what it costs.
- [What does the library offer?](https://colortokenskit.com/basics/color-library/index.md): 36 color themes, ready-to-use tokens with dark mode, a theme for your brand, and state functions.
- [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.
- [How accessible is it?](https://colortokenskit.com/basics/how-accessible/index.md): What the palette guarantees for contrast in every hue and mode, and what you still need to check.

## Getting started

- [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.
- [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.
- [Using your first tokens](https://colortokenskit.com/getting-started/first-tokens/index.md): Color text, buttons, cards and lists with tokens, then theme a movie card in one line.
- [Replacing your app colors](https://colortokenskit.com/getting-started/replacing-colors/index.md): Move backgrounds, text, outlines, states, gradients and charts to tokens, one screen at a time.
- [Managing dark mode](https://colortokenskit.com/getting-started/dark-mode/index.md): Get dark mode without extra code: tokens switch stops for you, and your own colors can too.
- [Building for interaction states](https://colortokenskit.com/getting-started/interaction-states/index.md): Give buttons and rows hover, pressed, selected and disabled colors that stay readable in both modes.
- [Components and examples](https://colortokenskit.com/getting-started/components/index.md): Copy the common mobile components, from buttons to paywalls, each built from tokens for both modes.

## Advanced setup

- [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.
- [Color theory](https://colortokenskit.com/advanced/color-theory/index.md): Pair stops that always read, and pick secondary hues that match your brand, in both modes.
- [Gradient theory](https://colortokenskit.com/advanced/gradient-theory/index.md): Add depth with gradients that stay vivid, from a single color or a recipe, in both modes.
- [Using tokens in charts](https://colortokenskit.com/advanced/charts/index.md): Give every chart series equal contrast, plus a second cue for readers who can't tell hues apart.
- [High contrast modes](https://colortokenskit.com/advanced/high-contrast/index.md): Respect Increase Contrast with one rule for every family: text and borders two stops stronger.

## API & functions

- [ProTheme](https://colortokenskit.com/api/protheme/index.md): Make a theme from a hex, a hue or OKLCH numbers, and every stop and token keeps its contrast.
- [Ready-made themes](https://colortokenskit.com/api/named-themes/index.md): 37 themes to use as they are, from proPink to proRose, each with 20 stops and every token.
- [Stops: ._50 to ._1000](https://colortokenskit.com/api/stops/index.md): Twenty fixed colors per theme, lightest to darkest, with the same contrast in every hue.
- [.lighten(by:)](https://colortokenskit.com/api/lighten/index.md): Add highlights and lighter steps to any color, landing on an exact palette stop.
- [.darken(by:)](https://colortokenskit.com/api/darken/index.md): Make hover and pressed fills from any color, an exact stop darker in both modes.
- [.soften(by:)](https://colortokenskit.com/api/soften/index.md): Make quieter text and fills from any token: lighter in light mode, darker in dark mode.
- [.strengthen(by:)](https://colortokenskit.com/api/strengthen/index.md): Make any token stand out more: darker in light mode, lighter in dark mode.
- [.saturate(by:)](https://colortokenskit.com/api/saturate/index.md): Make one color more vivid for an accent, at the same lightness and contrast.
- [.desaturate(by:)](https://colortokenskit.com/api/desaturate/index.md): Gray out disabled and finished states, and every label stays just as readable.
- [.rotateHue(by:)](https://colortokenskit.com/api/rotate-hue/index.md): Make an accent or a whole second theme from your brand color, at the same lightness.
- [.blend(with:by:)](https://colortokenskit.com/api/blend/index.md): Mix two colors into one that follows dark mode, or fade a color out cleanly.
- [.invert()](https://colortokenskit.com/api/invert/index.md): Get the mirrored stop of any color for the opposite surface, with its hue kept.
- [.complement](https://colortokenskit.com/api/complement/index.md): Give a price or badge an accent that stands apart from your brand, at the same contrast.
- [.triad](https://colortokenskit.com/api/triad/index.md): Secondary and tertiary colors for tags and categories, at the same contrast as your brand.
- [.analogous(count:spread:)](https://colortokenskit.com/api/analogous/index.md): Close neighbors of your color for banners, illustrations and gradients, at matching contrast.
- [.splitComplement(spread:)](https://colortokenskit.com/api/split-complement/index.md): Two accents that stand apart from your brand, softer than its opposite, at the same contrast.
- [.tetrad(offset:)](https://colortokenskit.com/api/tetrad/index.md): Four colors in two opposite pairs for tags and categories, all at your color's contrast.
- [.square](https://colortokenskit.com/api/square/index.md): Four hues spaced evenly around the wheel for chart series and categories, at one contrast.
- [.harmony(_:)](https://colortokenskit.com/api/harmony/index.md): Build the harmony someone picks at runtime, from a picker or a setting, in one call.
- [.tints(count:)](https://colortokenskit.com/api/tints/index.md): Lighter steps of any color, one stop apart, to tell apart the parts of one thing.
- [.shades(count:)](https://colortokenskit.com/api/shades/index.md): Darker steps of any color, one stop apart, for stacked cards that recede.
- [.monochromatic(count:)](https://colortokenskit.com/api/monochromatic/index.md): Show ordered data, like cheap to pricey days, in evenly spaced steps of one hue.
- [.proGradient()](https://colortokenskit.com/api/pro-gradient/index.md): Fill cards and buttons with gradients that stay vivid end to end, in light and dark mode.
- [.proRadialGradient()](https://colortokenskit.com/api/pro-radial-gradient/index.md): Draw glows and spotlights that fade from the center outward without going gray.
- [.proAngularGradient()](https://colortokenskit.com/api/pro-angular-gradient/index.md): Draw rings and dials that sweep through your colors, with no seam where the ends meet.
- [ProGradient recipes](https://colortokenskit.com/api/gradient-recipes/index.md): Make a gradient from one color with a preset like .tonal or .fade, or write your own in a line.
- [Color(light:dark:)](https://colortokenskit.com/api/light-dark/index.md): Make any color switch between light and dark mode, the way every token does.
- [.contrastRatio(to:method:)](https://colortokenskit.com/api/contrast-ratio/index.md): Check WCAG 2 and APCA contrast in Swift, and keep your color pairs passing with a unit test.
- [Color(hex:)](https://colortokenskit.com/api/color-hex/index.md): Turn a hex value from your design file into a SwiftUI color, with or without transparency.
- [.getHexString()](https://colortokenskit.com/api/get-hex-string/index.md): Log a color or hand it to a design tool as an sRGB hex string, with alpha when it's translucent.
- [.getLCHString()](https://colortokenskit.com/api/get-lch-string/index.md): Log a color's lightness, chroma and hue in one short line, to check a color at a glance.
- [.toRGB()](https://colortokenskit.com/api/to-rgb/index.md): Read a color's red, green and blue channels, even past sRGB, to hand to other graphics code.
- [.toOKLCH()](https://colortokenskit.com/api/to-oklch/index.md): Read a color's lightness, chroma and hue the way the palette sees them, to compare or adjust it.
- [.toOKLab()](https://colortokenskit.com/api/to-oklab/index.md): Get a color in OKLab, where straight-line math between colors looks even, for your own blends.
- [.toLCH()](https://colortokenskit.com/api/to-lch/index.md): Read a color as CIELab lightness, chroma and hue, to match LCH numbers or check contrast.
- [.toLAB()](https://colortokenskit.com/api/to-lab/index.md): Change a color's lightness alone in CIELab, the lightness that decides contrast.
- [.toXYZ()](https://colortokenskit.com/api/to-xyz/index.md): Get a color's CIE XYZ values, where y is the relative luminance contrast is built on.
- [.toColor()](https://colortokenskit.com/api/to-color/index.md): Turn a stop or a color value back into a SwiftUI Color you can draw with.
- [.lerp(_:t:)](https://colortokenskit.com/api/lerp/index.md): Find the color partway between two others, for your own blends, chart scales or animations.
- [.normalizedHue and .rounded(to:)](https://colortokenskit.com/api/normalized-hue/index.md): Wrap any angle into 0° to 360° and round numbers the way the library stores every hue.

## Platforms

- [Using ColorTokensKit in UIKit](https://colortokenskit.com/platforms/uikit/index.md): Give UIKit views the palette's tokens as UIColors that follow dark mode on every iOS version tested.
- [Using ColorTokensKit in AppKit](https://colortokenskit.com/platforms/appkit/index.md): Give AppKit views the palette's tokens as NSColors that follow the Mac's light and dark appearance.
- [Using ColorTokensKit on watchOS](https://colortokenskit.com/platforms/watchos/index.md): Every token gives its dark stop on Apple Watch, so your watch app gets dark-mode contrast as is.
- [Using ColorTokensKit on visionOS](https://colortokenskit.com/platforms/visionos/index.md): Use the palette on Apple Vision Pro, where tokens give their dark stops and color goes on buttons.

## Under the hood

- [Why OKLCH?](https://colortokenskit.com/under-the-hood/why-oklch/index.md): Every hue looks evenly matched at each stop, so you can swap families without rechecking contrast.
- [How the ramps are built](https://colortokenskit.com/under-the-hood/how-ramps-are-built/index.md): The lightness and chroma behind every stop, so any hue you pick gives the same contrast.
- [What does equal lightness cost?](https://colortokenskit.com/under-the-hood/trade-offs/index.md): What equal contrast costs, from quieter reds to olive yellows, and what you can do about each.
- [How do other color systems choose their colors?](https://colortokenskit.com/under-the-hood/other-color-systems/index.md): Compare how Material, Radix, Tailwind and others pick colors, and what each choice costs you.
- [Fitting colors into Display P3](https://colortokenskit.com/under-the-hood/gamut-mapping/index.md): Stay inside Display P3 without losing contrast: chroma drops, lightness holds.
- [How colors land on exact stops](https://colortokenskit.com/under-the-hood/palette-snapping/index.md): Derived colors land on exact stops, so you know their contrast before you run the app.
- [How gradients blend and ease](https://colortokenskit.com/under-the-hood/gradient-blends-and-easing/index.md): Why plain gradients turn gray, how each blend travels between colors, and where easing puts them.

## Reference

- [Glossary of color terms](https://colortokenskit.com/reference/glossary/index.md): Look up any color term on this site in plain words, from stop and token to chroma and gamut.
- [Troubleshooting ColorTokensKit](https://colortokenskit.com/reference/troubleshooting/index.md): Fix the problems people hit most, from colors that ignore dark mode to hex strings that vanish.
- [Changelog](https://colortokenskit.com/reference/changelog/index.md): See what each release changed before you update, from the first release to the latest.

## Optional

- [The whole wiki in one file](https://colortokenskit.com/llms-full.txt): every article above, one after another.