.lighten(by:)

Add a highlight or a lighter step to any color with lighten(by:). It moves the color up the palette by whole stops, one by default, and returns a Color that still follows dark mode:

let fill = brand.backgroundTertiary   // _200 in light mode, _700 in dark

Text("Booked")
    .font(.headline)
    .padding(.vertical, 10)
    .padding(.horizontal, 16)
    .foregroundStyle(brand.foregroundPrimary)
    .background([fill.lighten(), fill].proGradient())   // tops out at _150 in light, _650 in dark

Light falls from above in both modes, so the top edge is one stop lighter in each. Pick a color and a number of stops below. A palette color lands on an exact stop, and the panel names it:

Color.proBlue._600.toColor().lighten()

With the defaults, proBlue._600 lightens to exactly proBlue._550.

Lighter in both modes#

lighten() goes lighter in light mode and in dark mode. Lighter text is quieter on a white page but louder on a black one, so for quieter text use soften(by:), which moves toward the page in each mode:

let lighter = brand.foregroundSecondary.lighten(by: 2)   // _700 in light mode, _100 in dark
let softer = brand.foregroundSecondary.soften(by: 2)     // _700 in light mode, _300 in dark

VStack(alignment: .leading, spacing: 4) {
    Text("3 nights from October 12").foregroundStyle(lighter)   // louder in dark mode
    Text("3 nights from October 12").foregroundStyle(softer)    // quieter in both
}
.font(.subheadline)

Colors off the palette#

Step both colors below. proBlue._600 lands on each stop in turn, while #3C80C4, which sits between stops, moves by the same step in lightness and keeps its hue:

So a system color or your own hex color lightens by the same visual step as a palette color, without jumping onto the nearest stop.

How it behaves#

A palette color lands on an exact stop of its family, so it has that stop's contrast in every hue. Past _50 it stays at _50, and white stays white. Gray moves along gray's own stops.

A color off the palette keeps its hue and chroma as it gets lighter, as much as Display P3 can show. Fitting colors into Display P3 explains the limit. The result keeps the color's opacity, and each mode lightens that mode's color.

API#

public extension Color {
    func lighten(by stops: Int = 1) -> Color
}

It returns a new Color that resolves in each appearance, so it follows light and dark mode like the color you started from.

Sources#

• Color+Adjustments.swift, which defines lighten(by:).
• ColorAdjustment.swift, which moves a color along the stops.

See also

• .darken(by:) Make hover and pressed fills from any color, an exact stop darker in both modes.
• .strengthen(by:) Make any token stand out more: darker in light mode, lighter in dark mode.
• Stops: ._50 to ._1000 Twenty fixed colors per theme, lightest to darkest, with the same contrast in every hue.
• How colors land on exact stops Derived colors land on exact stops, so you know their contrast before you run the app.