SwiftUI Colour picker wheel
  • July 11, 2025

A colour wheel made all in SwiftUI.

There are 2 different colour wheels to choose from.

  • The first main one uses CIHueSaturationValueGradient CIFilter to draw itself, then uses RadialGradient and .blur to smooth it out. Named ColourWheel in code.
  • The second one uses SwiftUI’s AngularGradient with all 360 hues to draw the gradient, then a RadialGradient and .blur to smooth it out. Named NewColourWheel in code.

If you would like to use the slider to change brightness/value, use ColourWheel, as NewColourWheel does not support setting value at this point in time.

They both interact the same and output in [Red, Green, Blue] or [Hue, Saturation].

previewjpg

GitHub


View Github

#colorpicker #colorpickerview
YOU MIGHT ALSO LIKE...
FigmaPreviewSwiftUI

A Figma component preview for your SwiftUI views. You can use Figma components instead of real views within your app ...

SafePreviewDevice

Motivation At WWDC 2019, Apple announced SwiftUI a new library for building UI in a simple and fast way. Xcode’s ...

PreviewView

Make use of SwiftUI previews for rapidly prototyping your UIViewControllers and UIViews! The SwiftUI preview canvas is tied to a specific version of ...

PreviewDevice

Requirements   Dev environment: Xcode 13+, macOS 12+ iOS 13.0+, macOS 10.15+, Mac Catalyst 13.0+, tvOS 13.0+, watchOS 6.0+ Usage

SwiftUIWheelPicker

Horizontal wheel picker for SwiftUI Requirements iOS 13.0+ Installation CocoaPods