Hex Colors in Swift: How the Magic of #FF5733 Works

Why is #FF5733 Not Just a Random Set of Characters?

Have you ever wondered what lies behind the familiar notation #FF5733 in your code? For most developers, it's just "some orange-pink color." But if you dig deeper, behind this six-digit code lies elegant mathematics, bitwise operations, and a history rooted in old monitors and HTML specifications.

In this article, we'll break down hex colors in Swift from scratch. You'll learn how RGB channels work, why the hex format is so popular, and — most importantly — how to write your own UIColor (or Color for SwiftUI) that accepts hexadecimal strings. And yes, we'll look at real code you can use today.

If you've ever searched for the answer to "How to use hex color values in Swift" on Stack Overflow — you've come to the right place. Only now with a deep explanation.

Anatomy of a Hex Color: Where Do These Numbers Come From?

Let's start with the basics. A color on screen is a combination of three basic components: Red, Green, and Blue. Each can take a value from 0 to 255. Why 255? Because that's the maximum number that can be stored in one byte (8 bits).

The hex format is simply a compact way to write these three numbers.

\n
• #FF5733 breaks down into three pairs: FF, 57, 33.
\n
• FF in decimal = 255 (maximum red).
\n
• 57 = 87 (green).
\n
• 33 = 51 (blue).
\n
• Final color: RGB(255, 87, 51) — a bright coral.
\n

The hexadecimal system (base 16) uses digits 0 through 9 and letters A through F. This allows you to write a number from 0 to 255 using just two characters. Convenient, right?

Why is Hex So Popular in Web and iOS?

Historically, hex codes came from web design. As CSS was developing, #RRGGBB became the standard for specifying colors. Swift and UIKit adopted this tradition, but with one nuance: there is no built-in hex string parser in UIColor.

Every iOS developer has written an extension for UIColor at least once, turning "#FF5733" into a UIColor. It has become a kind of "rite of passage." And today, we'll go through this rite together.

Writing Your Own Hex Parser in Swift (Step by Step)

Let's create a convenient and safe initializer for UIColor that accepts a hex string. We'll break down each step.

Step 1: Basic Structure

import UIKit\n\nextension UIColor {\n    convenience init?(hex: String) {\n        // Magic will happen here\n    }\n}\n

We use convenience init? (failable) because the string might be invalid.

Step 2: Clean the String

Users might pass "#FF5733", "FF5733", or even "0xFF5733". We need to remove any extraneous characters.

var hexString = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()\n\nif hexString.hasPrefix("#") {\n    hexString.removeFirst()\n}\n\nif hexString.hasPrefix("0X") {\n    hexString.removeFirst(2)\n}\n

Step 3: Check the Length

A standard hex code is 6 characters (RRGGBB). But there is also an 8-character format (RRGGBBAA), where AA is the alpha channel (opacity). We'll support both.

guard hexString.count == 6 || hexString.count == 8 else {\n    return nil\n}\n

Step 4: Parse the String into Numbers

Now for the interesting part. We need to convert the string into a hexadecimal number, and then extract the RGB components from it.

guard let hexValue = UInt64(hexString, radix: 16) else {\n    ret