API & functions
Every function and property by name, with an example you can copy.
Themes and stops
- ProThemeMake a theme from a hex, a hue or OKLCH numbers, and every stop and token keeps its contrast.
- Ready-made themes37 themes to use as they are, from proPink to proRose, each with 20 stops and every token.
- Stops: ._50 to ._1000Twenty fixed colors per theme, lightest to darkest, with the same contrast in every hue.
Adjustments
- .lighten(by:)Add highlights and lighter steps to any color, landing on an exact palette stop.
- .darken(by:)Make hover and pressed fills from any color, an exact stop darker in both modes.
- .soften(by:)Make quieter text and fills from any token: lighter in light mode, darker in dark mode.
- .strengthen(by:)Make any token stand out more: darker in light mode, lighter in dark mode.
- .saturate(by:)Make one color more vivid for an accent, at the same lightness and contrast.
- .desaturate(by:)Gray out disabled and finished states, and every label stays just as readable.
- .rotateHue(by:)Make an accent or a whole second theme from your brand color, at the same lightness.
- .blend(with:by:)Mix two colors into one that follows dark mode, or fade a color out cleanly.
- .invert()Get the mirrored stop of any color for the opposite surface, with its hue kept.
Harmonies
- .complementGive a price or badge an accent that stands apart from your brand, at the same contrast.
- .triadSecondary and tertiary colors for tags and categories, at the same contrast as your brand.
- .analogous(count:spread:)Close neighbors of your color for banners, illustrations and gradients, at matching contrast.
- .splitComplement(spread:)Two accents that stand apart from your brand, softer than its opposite, at the same contrast.
- .tetrad(offset:)Four colors in two opposite pairs for tags and categories, all at your color's contrast.
- .squareFour hues spaced evenly around the wheel for chart series and categories, at one contrast.
- .harmony(_:)Build the harmony someone picks at runtime, from a picker or a setting, in one call.
Lightness sets
Gradients
- .proGradient()Fill cards and buttons with gradients that stay vivid end to end, in light and dark mode.
- .proRadialGradient()Draw glows and spotlights that fade from the center outward without going gray.
- .proAngularGradient()Draw rings and dials that sweep through your colors, with no seam where the ends meet.
- ProGradient recipesMake a gradient from one color with a preset like .tonal or .fade, or write your own in a line.
Utilities
- Color(light:dark:)Make any color switch between light and dark mode, the way every token does.
- .contrastRatio(to:method:)Check WCAG 2 and APCA contrast in Swift, and keep your color pairs passing with a unit test.
- Color(hex:)Turn a hex value from your design file into a SwiftUI color, with or without transparency.
- .getHexString()Log a color or hand it to a design tool as an sRGB hex string, with alpha when it's translucent.
- .getLCHString()Log a color's lightness, chroma and hue in one short line, to check a color at a glance.
- .toRGB()Read a color's red, green and blue channels, even past sRGB, to hand to other graphics code.
- .toOKLCH()Read a color's lightness, chroma and hue the way the palette sees them, to compare or adjust it.
- .toOKLab()Get a color in OKLab, where straight-line math between colors looks even, for your own blends.
- .toLCH()Read a color as CIELab lightness, chroma and hue, to match LCH numbers or check contrast.
- .toLAB()Change a color's lightness alone in CIELab, the lightness that decides contrast.
- .toXYZ()Get a color's CIE XYZ values, where y is the relative luminance contrast is built on.
- .toColor()Turn a stop or a color value back into a SwiftUI Color you can draw with.
- .lerp(_:t:)Find the color partway between two others, for your own blends, chart scales or animations.
- .normalizedHue and .rounded(to:)Wrap any angle into 0° to 360° and round numbers the way the library stores every hue.