This post presents an extension of UIColor supporting lighter and darker variants of a UIColor. Following the method in this post will allow you to generate lighter or darker variants of a UIColor on demand.

Extract RGBA Components

The first step is to extract red, green, blue, and alpha components from the current UIColor. Then, to each color component, add a componentDelta to make the color lighter or darker. Each color component value is between 0 and 1.

extension UIColor {
    private func makeColor(componentDelta: CGFloat) -> UIColor {
        var red: CGFloat = 0
        var blue: CGFloat = 0
        var green: CGFloat = 0
        var alpha: CGFloat = 0
        
        // Extract r,g,b,a components from the
        // current UIColor
        getRed(
            &red,
            green: &green,
            blue: &blue,
            alpha: &alpha
        )
        
        // Create a new UIColor modifying each component
        // by componentDelta, making the new UIColor either
        // lighter or darker.
        return UIColor(
            red: add(componentDelta, toComponent: red),
            green: add(componentDelta, toComponent: green),
            blue: add(componentDelta, toComponent: blue),
            alpha: alpha
        )
    }
}

Safety Add RGBA Component Values

Each color component value must be between 0 and 1. To ensure adding a componentDelta does not result in a value less than 0 or greater than 1, use the following function:

extension UIColor {    
    // Add value to component ensuring the result is 
    // between 0 and 1
    private func add(_ value: CGFloat, toComponent: CGFloat) -> CGFloat {
        return max(0, min(1, toComponent + value))
    }
}

Lighter and Darker UIColor

The last step is to implement the interface for obtaining a lighter or darker color. Modify the componentDelta value to control how much lighter or darker the resulting UIColor is.

extension UIColor {
    func lighter(componentDelta: CGFloat = 0.1) -> UIColor {
        return makeColor(componentDelta: componentDelta)
    }
    
    func darker(componentDelta: CGFloat = 0.1) -> UIColor {
        return makeColor(componentDelta: -1*componentDelta)
    }
}

UIColor Extension

That’s it! With the UIColor extension you can use lighter and darker UIColors on demand, for example:

let redColor = UIColor.red
let lightRed = redColor.lighter()
let darkRed = redColor.darker()
Example of lighter and darker UIColors generated using the UIColor extension