iOS Color Palette Generator

Create beautiful, accessible color palettes for your iOS apps

Custom Palette

System Colors for Foreground Content

Label

HEX
#000000
UIColor
UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1.0)

A text label that contains primary content.

label

Secondary Label

HEX
#3C3C43
UIColor
UIColor(red: 0.235, green: 0.235, blue: 0.263, alpha: 1.0)

A text label that contains secondary content.

secondaryLabel

Tertiary Label

HEX
#3C3C43
UIColor
UIColor(red: 0.235, green: 0.235, blue: 0.263, alpha: 1.0)

A text label that contains tertiary content.

tertiaryLabel

Quaternary Label

HEX
#3C3C43
UIColor
UIColor(red: 0.235, green: 0.235, blue: 0.263, alpha: 1.0)

A text label that contains quaternary content.

quaternaryLabel

Placeholder Text

HEX
#3C3C43
UIColor
UIColor(red: 0.235, green: 0.235, blue: 0.263, alpha: 1.0)

Placeholder text in controls or text views.

placeholderText

Separator

HEX
#3C3C43
UIColor
UIColor(red: 0.235, green: 0.235, blue: 0.263, alpha: 1.0)

A separator that allows some underlying content to be visible.

separator

Opaque Separator

HEX
#C6C6C8
UIColor
UIColor(red: 0.776, green: 0.776, blue: 0.784, alpha: 1.0)

A separator that doesn't allow any underlying content to be visible.

opaqueSeparator

Link

HEX
#007AFF
UIColor
UIColor(red: 0.000, green: 0.478, blue: 1.000, alpha: 1.0)

Text that functions as a link.

link

Background Colors

System Background

HEX
#FFFFFF
UIColor
UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.0)

Primary background for the overall view

systemBackground

Secondary System Background

HEX
#F2F2F7
UIColor
UIColor(red: 0.949, green: 0.949, blue: 0.969, alpha: 1.0)

Secondary background for grouping content

secondarySystemBackground

Tertiary System Background

HEX
#FFFFFF
UIColor
UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.0)

Tertiary background for grouping content

tertiarySystemBackground

Grouped Background

HEX
#F2F2F7
UIColor
UIColor(red: 0.949, green: 0.949, blue: 0.969, alpha: 1.0)

Primary background for grouped content

systemGroupedBackground

Secondary Grouped Background

HEX
#FFFFFF
UIColor
UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.0)

Secondary background for grouped content

secondarySystemGroupedBackground

Tertiary Grouped Background

HEX
#F2F2F7
UIColor
UIColor(red: 0.949, green: 0.949, blue: 0.969, alpha: 1.0)

Tertiary background for grouped content

tertiarySystemGroupedBackground

UIColor Extension

import UIKit

extension UIColor {
    static var customLightest: UIColor {
        UIColor { traitCollection in
            switch traitCollection.userInterfaceStyle {
            case .dark:
                return UIColor(hex: "undefined")
            default:
                return UIColor(hex: "undefined")
            }
        }
    }

    static var customLight: UIColor {
        UIColor { traitCollection in
            switch traitCollection.userInterfaceStyle {
            case .dark:
                return UIColor(hex: "undefined")
            default:
                return UIColor(hex: "undefined")
            }
        }
    }

    static var customBase: UIColor {
        UIColor { traitCollection in
            switch traitCollection.userInterfaceStyle {
            case .dark:
                return UIColor(hex: "undefined")
            default:
                return UIColor(hex: "undefined")
            }
        }
    }

    static var customDark: UIColor {
        UIColor { traitCollection in
            switch traitCollection.userInterfaceStyle {
            case .dark:
                return UIColor(hex: "undefined")
            default:
                return UIColor(hex: "undefined")
            }
        }
    }

    static var customDarkest: UIColor {
        UIColor { traitCollection in
            switch traitCollection.userInterfaceStyle {
            case .dark:
                return UIColor(hex: "undefined")
            default:
                return UIColor(hex: "undefined")
            }
        }
    }

}

extension UIColor {
    convenience init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int = UInt64()
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (255, 0, 0, 0)
        }
        self.init(red: CGFloat(r) / 255, green: CGFloat(g) / 255, blue: CGFloat(b) / 255, alpha: CGFloat(a) / 255)
    }
}