FigmaColorPicker

A standalone macOS 14+ SwiftUI color picker extracted from Solid. No third-party dependencies.

Includes the original saturation/brightness and saturation/lightness surfaces, hue and alpha sliders, HSB/RGB/HSL numeric inputs, HEX input/output, and screen eyedropper. Original MIT attribution is in LICENSE.

Installation

In Xcode, choose File > Add Package Dependencies > Add Local and select this directory. Link the FigmaColorPicker product to your app target.

For another Swift package:

dependencies: [
    .package(url: "https://github.com/winddpan/FigmaColorPicker", branch: "main")
],
targets: [
    .target(
        name: "YourApp",
        dependencies: [.product(name: "FigmaColorPicker", package: "FigmaColorPicker")]
    )
]

Color button

import SwiftUI
import FigmaColorPicker

struct ContentView: View {
    @State private var color = NSColor.systemRed

    var body: some View {
        FigmaColorPicker(selection: $color)
    }
}

Custom trigger

@State private var color = NSColor.systemBlue
@State private var showsPicker = false

var body: some View {
    Button("Choose color") { showsPicker = true }
        .figmaColorPickerPopover(
            isPresented: $showsPicker,
            selection: $color,
            arrowEdge: .bottom
        )
}

These are the only two public entry points. Editor controls and conversion helpers are internal. The popover is 320 points wide and uses SwiftUI's native dismissal. The panel, fields, borders, and checkerboard adapt to the host's light/dark appearance. The demo includes a Light/Dark segmented control to preview both.

Data ownership

• The caller's Binding<NSColor> is the source of truth. Edits write through immediately; dismissal keeps them. Implement any save/cancel transaction in the caller by binding to a draft color.
• External binding changes update an open editor; separate pickers share no state.
• The editor keeps temporary component coordinates to preserve hue and saturation at achromatic colors, plus selected model, HEX input draft, and sampling state.
• Display P3 input stays in Display P3. Other convertible inputs are edited in sRGB. Values are bounded to the standard 0...1 editing range. Nonconvertible colors (such as pattern colors) display a black editing fallback; opening the popover alone does not overwrite the original value.
• Select HEX in the same model menu to display and edit the current color as six-digit RRGGBB, without a hash prefix; alpha is never shown in this field. Alpha is carried by the separate alpha input alongside HEX, which stays in sync with the sliders, sampling, and external updates. Input accepts 6 or 8 hex digits in the current editing color space; pasted values may include #. The last two digits of an eight-digit input set alpha, while six-digit input leaves alpha untouched. An eight-digit value is applied as soon as it is typed or pasted, and the field collapses back to six digits. Press Return to commit; invalid input leaves the color unchanged. Escape restores the current value.
• There is no Defaults, Core Data, saved-color library, or global publisher. The library never touches the pasteboard itself: while the popover is open, ⌘X, ⌘C, ⌘V, and ⌘A are forwarded to the focused field editor through the responder chain. That keeps them working in hosts whose app has no Edit menu, such as a menu bar app, where macOS otherwise has nothing to route them through.

The original Solid app is retained separately as the extraction source.

Verification

swift build
swift test

The tests cover grayscale normalization, P3/alpha preservation, achromatic hue and saturation, and strict hex parsing. Example/PickerDemo is a standalone consumer for manually checking presentation, live changes, external updates, and reopening:

cd Example/PickerDemo
swift run