Why is the iOS RGB 0–1 instead of 0–255?

iOS APIs use CGFloat for all color channel values — same range as Apple's other graphics APIs (Core Animation, Core Graphics). 0–1 normalisation. The tool divides automatically.

What's DisplayP3 mode?

Apple's wide-color gamut (introduced with iPhone 7). Outputs Color(.displayP3, red:…) — useful when targeting the full color range of modern iOS devices. Falls back gracefully on older devices.

How do I make an adaptive dark-mode color?

The tool can output UIColor(dynamicProvider:) syntax with light and dark variants. SwiftUI equivalent uses Color(uiColor:) with the same dynamic color. Newer SwiftUI also supports .colorScheme modifier.

swiftui · uicolor · srgb · displayp3 · live

Convert HEX to SwiftUI / UIColor

Five canonical Swift constructors for the same color — including sRGB and displayP3 variants. Copy-ready Swift literals.

SwiftUI Color Converter

Input

#3B82F6

hex

Forms

outputs

Gamut

sRGB + P3

supported

Status

ready

live

input · color

HEX value

Live swatch

output · preview

SwiftUI Color (sRGB)

Color(red: 0.231, green: 0.510, blue: 0.965)

SwiftUI Color (HEX init)

Color(hex: "3b82f6")

UIColor (sRGB)

UIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1.0)

UIColor (displayP3)

UIColor(displayP3Red: 0.231, green: 0.510, blue: 0.965, alpha: 1.0)

Color extension call

Color.fromHex("3b82f6")

Quick Start

How to convert HEX to Swift colors

One HEX → five common Swift constructors for SwiftUI and UIKit.

01
Paste HEX
From your design tool or brand kit.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
in · colorhex · sRGB
```
#3b82f6
```
loaded · normalisedOKLCH · ready
02
Pick a constructor
SwiftUI Color(red:green:blue:) or UIKit UIColor(...).
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
pickhex · rgb · hslP3gamut-mappedlive
form · optionsswiftui · live
```
Color(red: .23, …)
```
options applied · livelive
03
sRGB or P3
Use displayP3 to take advantage of wide-gamut iPhones/iPads.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
gamutWCAG 2.2APCAAA · AAAcontrast
gamut · convertedp3 · ready
```
displayP3Red: .23
```
converted · liveWCAG-aware
04
Copy & paste
One click to clipboard, paste into Xcode.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
✓ Copied
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to convert to Swift colors

iOS/macOS theming, design system parity.

iOS theming

Mirror your web brand color into a SwiftUI Color. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

UIKit migration

Use UIColor variants when interop with older code. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Wide gamut

displayP3 unlocks richer colors on modern devices. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

Asset catalog

Manually enter into .colorset JSON files. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick prototyping

Skip the manual /255 math. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Bridge Figma → Xcode without hand conversion. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Why divide by 255?

Swift Color uses 0.0-1.0 floats for each channel — natural for shaders and color math.

Does Color(hex:) exist?

Not built-in — but it's a common extension. We include the constructor signature.

Should I use displayP3?

If your brand uses vivid colors, yes. Otherwise sRGB is universally compatible.

What about Catalyst / macOS?

Same constructors work — Color and UIColor (NSColor via interop).

Is anything sent to a server?

No — conversion runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!