How to get SwiftUI color code from an image

A practical guide from the makers of Color Picker from photos

SwiftUI's Color initializer wants channel values from 0 to 1 — Color(red: 0.40, green: 0.62, blue: 0.65) — while every design reference you receive is a hex code or a picture. If you build iOS apps, you've done this conversion by hand, or pasted a hex extension into yet another project. There's a shorter path.

The usual workarounds (and their friction)

• Manual math: divide each RGB channel by 255. Error-prone and tedious for a full palette.
• A Color(hex:) extension: works, but it's boilerplate you re-add to each project, and reviewers still see magic strings.
• Asset catalog colors: the right long-term home for brand colors, but you still need the correct values to type into the catalog.

Extracting SwiftUI code directly from an image

With Color Picker from photos on your iPhone:

1. Save the mockup, screenshot or reference photo to your library and open it in the app.
2. The palette extracts automatically — up to 12 colors with coverage percentages, so a mockup's primary, background and accent colors are already separated.
3. Tap a color. Alongside HEX, RGB and HSL there's a SwiftUI row with a ready-made Color(red:green:blue:) snippet.
4. Tap copy, paste into Xcode. Done — no conversion step.

A clean workflow for a whole design

1. Extract the full palette from the design once.
2. Copy each color's values into your asset catalog (use the RGB row for the catalog's 0–255 input, or the SwiftUI row if you define colors in code).
3. Keep the extraction in the app's history as the source of truth — if a teammate asks "which teal is it?", the coverage percentages and codes are still there.

One scope note: the snippet gives you the color values in sRGB. If your app works in Display P3 or needs dynamic light/dark variants, define those in the asset catalog — the extracted values are your starting point.