watchOS: Complications

Feb 7 2023 Swift 5.6, watchOS 8.5, Xcode 13

Part 2: Tinted & Custom Complications

9. Tint Complications

Episode complete

Play next episode

About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 8. Update with Push Notifications Next episode: 10. Tint SwiftUI Complications

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Pro subscription. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

This video Tint Complications was last updated on Feb 7 2023

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.


We’ve got a new sample app for this episode, so, open up the starter Happy xcode project.


By default, if the user selects a tint color for the watch face, watchOS will desaturate the full-color image.

Layered images

When you need more control over how the image looks while tinted, you can split it into two separate images.

  let full = UIImage(named: "full"),
  let background = UIImage(named: "background"),
  let outlines = UIImage(named: "outlines")
else {
  fatalError("Images are missing from the asset catalog.")
let template = CLKComplicationTemplateGraphicExtraLargeCircularImage(
  imageProvider: CLKFullColorImageProvider(
    // 2
    fullColorImage: full,
    tintedImageProvider: .init(
      onePieceImage: full,
      twoPieceImageBackground: background,
      twoPieceImageForeground: outlines