Skip to content
ColorTokensKitby Penguin Design Ventures
Contents
Function

.normalizedHue and .rounded(to:)

Wrap any angle into 0° to 360° and round numbers the way the library stores every hue.

Updated View as Markdown

Keep hues you compute in range with normalizedHue: it wraps any angle into 0° to 360° and rounds it to 0.01°, the way the library stores every hue. rounded(to:) rounds a number to the decimal places you pass:

swift
let brandHue = 166.99
let oppositeHue = (brandHue + 180).normalizedHue   // 346.99
let backHue = (-30.0).normalizedHue                // 330
let shortHue = 166.98765.rounded(to: 2)            // 166.99

Comparing hues#

The library stores hues this way, so compare a hue you computed with one you read only after normalizing it:

swift
let hue = Color(hex: "#00B386").toOKLCH().h   // 166.99
hue == (166.99 + 360).normalizedHue           // true

You don't need it for values you pass in: OKLCHColor, LCHColor and the ramp generator wrap hues themselves, so OKLCHColor(l: 0.5, c: 0.1, h: 370).h is 10.

How it behaves#

Both work on Double and CGFloat. normalizedHue turns 360 into 0. rounded(to:) rounds halves away from zero, so 0.125.rounded(to: 2) is 0.13.

API#

swift
public extension Double {   // and CGFloat
    var normalizedHue: Double { get }         // wrapped to 0 to 360, rounded to 0.01°
    func rounded(to places: Int) -> Double
}
ParameterTypeWhat it does
placesIntDecimal places to keep.

normalizedHue returns the angle in 0 to 360; rounded(to:) returns the number rounded to places decimal places.

Sources#

See also

  • .toOKLCH() Read a color's lightness, chroma and hue the way the palette sees them, to compare or adjust it.
  • ProTheme Make a theme from a hex, a hue or OKLCH numbers, and every stop and token keeps its contrast.
  • .rotateHue(by:) Make an accent or a whole second theme from your brand color, at the same lightness.
  • .lerp(_:t:) Find the color partway between two others, for your own blends, chart scales or animations.