Get lighter and darker color variations for a given UIColor
Updated
Use below UIColor Extension:
extension UIColor { func lighter(by percentage: CGFloat = 30.0) -> UIColor? { return self.adjust(by: abs(percentage) ) } func darker(by percentage: CGFloat = 30.0) -> UIColor? { return self.adjust(by: -1 * abs(percentage) ) } func adjust(by percentage: CGFloat = 30.0) -> UIColor? { var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0 if self.getRed(&red, green: &green, blue: &blue, alpha: &alpha) { return UIColor(red: min(red + percentage/100, 1.0), green: min(green + percentage/100, 1.0), blue: min(blue + percentage/100, 1.0), alpha: alpha) } else { return nil } }}
Usage:
let color = UIColor(red:0.96, green:0.54, blue:0.10, alpha:1.0)color.lighter(30) // returns lighter color by 30%color.darker(30) // returns darker color by 30%
instead of .lighter()
and .darker()
, you can use .adjust()
with positive values for lightening and negative values for darkening
color.adjust(-30) // 30% darker colorcolor.adjust(30) // 30% lighter color
Output:
I want to provide another version using brightness & saturation instead of RGB
extension UIColor { /** Create a lighter color */ func lighter(by percentage: CGFloat = 30.0) -> UIColor { return self.adjustBrightness(by: abs(percentage)) } /** Create a darker color */ func darker(by percentage: CGFloat = 30.0) -> UIColor { return self.adjustBrightness(by: -abs(percentage)) } /** Try to increase brightness or decrease saturation */ func adjustBrightness(by percentage: CGFloat = 30.0) -> UIColor { var h: CGFloat = 0, s: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0 if self.getHue(&h, saturation: &s, brightness: &b, alpha: &a) { if b < 1.0 { let newB: CGFloat = max(min(b + (percentage/100.0)*b, 1.0), 0.0) return UIColor(hue: h, saturation: s, brightness: newB, alpha: a) } else { let newS: CGFloat = min(max(s - (percentage/100.0)*s, 0.0), 1.0) return UIColor(hue: h, saturation: newS, brightness: b, alpha: a) } } return self }}
SwiftUI: Color - iOS 14 / macOS 10.16
extension Color { public func lighter(by amount: CGFloat = 0.2) -> Self { Self(UIColor(self).lighter(by: amount)) } public func darker(by amount: CGFloat = 0.2) -> Self { Self(UIColor(self).darker(by: amount)) }}
Reqires one of the followings (or both) for iOS or (and) macOS
AppKit: NSColor
extension NSColor { func mix(with color: NSColor, amount: CGFloat) -> Self { var red1: CGFloat = 0 var green1: CGFloat = 0 var blue1: CGFloat = 0 var alpha1: CGFloat = 0 var red2: CGFloat = 0 var green2: CGFloat = 0 var blue2: CGFloat = 0 var alpha2: CGFloat = 0 getRed(&red1, green: &green1, blue: &blue1, alpha: &alpha1) color.getRed(&red2, green: &green2, blue: &blue2, alpha: &alpha2) return Self( red: red1 * CGFloat(1.0 - amount) + red2 * amount, green: green1 * CGFloat(1.0 - amount) + green2 * amount, blue: blue1 * CGFloat(1.0 - amount) + blue2 * amount, alpha: alpha1 ) } func lighter(by amount: CGFloat = 0.2) -> Self { mix(with: .white, amount: amount) } func darker(by amount: CGFloat = 0.2) -> Self { mix(with: .black, amount: amount) }}
UIKit: UIColor
extension UIColor { func mix(with color: UIColor, amount: CGFloat) -> Self { var red1: CGFloat = 0 var green1: CGFloat = 0 var blue1: CGFloat = 0 var alpha1: CGFloat = 0 var red2: CGFloat = 0 var green2: CGFloat = 0 var blue2: CGFloat = 0 var alpha2: CGFloat = 0 getRed(&red1, green: &green1, blue: &blue1, alpha: &alpha1) color.getRed(&red2, green: &green2, blue: &blue2, alpha: &alpha2) return Self( red: red1 * CGFloat(1.0 - amount) + red2 * amount, green: green1 * CGFloat(1.0 - amount) + green2 * amount, blue: blue1 * CGFloat(1.0 - amount) + blue2 * amount, alpha: alpha1 ) } func lighter(by amount: CGFloat = 0.2) -> Self { mix(with: .white, amount: amount) } func darker(by amount: CGFloat = 0.2) -> Self { mix(with: .black, amount: amount) }}