Get Slightly Lighter and Darker Color from UIColor

I render coloured cells based on a status value:

![status-images][1]


For this I wrote a swift extension based on some old objc code after I got an error using CryingHippo's suggestion:

extension UIColor{

func darker(darker: CGFloat) -> UIColor{

var red: CGFloat = 0.0
var green: CGFloat = 0.0
var blue: CGFloat = 0.0

if self.colorSpace == UIColorSpace.genericGrayColorSpace(){

red = whiteComponent - darker
green = whiteComponent - darker
blue = whiteComponent - darker
} else {
red = redComponent - darker
green = greenComponent - darker
blue = blueComponent - darker
}

if red < 0{
green += red/2
blue += red/2
}

if green < 0{
red += green/2
blue += green/2
}

if blue < 0{
green += blue/2
red += blue/2
}

return UIColor(
calibratedRed: red,
green: green,
blue: blue,
alpha: alphaComponent
)
}

func lighter(lighter: CGFloat) -> UIColor{
return darker(-lighter)
}
}

The same works for `NSColor` as well. Simply replace `UIColor` with `NSColor`.


[1]:

# TL;DR:

### Swift:

extension UIColor {

var lighterColor: UIColor {
return lighterColor(removeSaturation: 0.5, resultAlpha: -1)
}

func lighterColor(removeSaturation val: CGFloat, resultAlpha alpha: CGFloat) -> UIColor {
var h: CGFloat = 0, s: CGFloat = 0
var b: CGFloat = 0, a: CGFloat = 0

guard getHue(&h, saturation: &s, brightness: &b, alpha: &a)
else {return self}

return UIColor(hue: h,
saturation: max(s - val, 0.0),
brightness: b,
alpha: alpha == -1 ? a : alpha)
}
}

Usage:

let lightColor = somethingDark.lighterColor

### Objective-C:

- (UIColor *)lighterColorRemoveSaturation:(CGFloat)removeS
resultAlpha:(CGFloat)alpha {
CGFloat h,s,b,a;
if ([self getHue:&h saturation:&s brightness:&b alpha:&a]) {
return [UIColor colorWithHue:h
saturation:MAX(s - removeS, 0.0)
brightness:b
alpha:alpha == -1? a:alpha];
}
return nil;
}

- (UIColor *)lighterColor {
return [self lighterColorRemoveSaturation:0.5
resultAlpha:-1];
}



@rchampourlier was right in his comment to @user529758 (The accepted answer) - The HSB (Or HSV) and RGB solutions give completely different results. RGB just adds (Or makes the color closer to) white, and the HSB solution brings the color closer to the edge in the Brigtness scale - which basically start with black and ends with the pure color...

Basically Brightness (Value) makes the color less or more closer to black, where Saturation makes it less or more closer to white...

As seen here:

![HSV color graph][1]


So the solution to make a color actually brighter (i.e. closer to white...) will be to make it's Saturation value **smaller**, resulting this solution:

- (UIColor *)lighterColor {
CGFloat h,s,b,a;
if ([self getHue:&h saturation:&s brightness:&b alpha:&a]) {
return [UIColor colorWithHue:h
saturation:MAX(s - 0.3, 0.0)
brightness:b /*MIN(b * 1.3, 1.0)*/
alpha:a];
}
return nil;
}


[1]:

**`Sebyddd` solution as an extension:**

extension UIColor {
func darker() -> UIColor {

var r:CGFloat = 0, g:CGFloat = 0, b:CGFloat = 0, a:CGFloat = 0

if self.getRed(&r, green: &g, blue: &b, alpha: &a){
return UIColor(red: max(r - 0.2, 0.0), green: max(g - 0.2, 0.0), blue: max(b - 0.2, 0.0), alpha: a)
}

return UIColor()
}

func lighter() -> UIColor {

var r:CGFloat = 0, g:CGFloat = 0, b:CGFloat = 0, a:CGFloat = 0

if self.getRed(&r, green: &g, blue: &b, alpha: &a){
return UIColor(red: min(r + 0.2, 1.0), green: min(g + 0.2, 1.0), blue: min(b + 0.2, 1.0), alpha: a)
}

return UIColor()
}
}

**Usage:**

let darkerYellow = UIColor.yellow.darker()
let lighterYellow = UIColor.yellow.lighter()

Here is a UIColor category that also allows control over the amount of color change.

- (UIColor *)lighterColorWithDelta:(CGFloat)delta
{
CGFloat r, g, b, a;
if ([self getRed:&r green:&g blue:&b alpha:&a])
return [UIColor colorWithRed:MIN(r + delta, 1.0)
green:MIN(g + delta, 1.0)
blue:MIN(b + delta, 1.0)
alpha:a];
return nil;
}

- (UIColor *)darkerColorWithDelta:(CGFloat)delta
{
CGFloat r, g, b, a;
if ([self getRed:&r green:&g blue:&b alpha:&a])
return [UIColor colorWithRed:MAX(r - delta, 0.0)
green:MAX(g - delta, 0.0)
blue:MAX(b - delta, 0.0)
alpha:a];
return nil;
}

***A Swift extension based on @Sebyddd answer:***

import Foundation
import UIKit

extension UIColor{
func colorWith(brightness: CGFloat) -> UIColor{
var r:CGFloat = 0, g:CGFloat = 0, b:CGFloat = 0, a:CGFloat = 0

if getRed(&r, green: &g, blue: &b, alpha: &a){
return UIColor(red: max(r + brightness, 0.0), green: max(g + brightness, 0.0), blue: max(b + brightness, 0.0), alpha: a)
}

return UIColor()
}
}

**Tested in Xcode 10 with Swift 4.x for iOS 12**

Start with your color as a UIColor and pick a darkening factor (as a CGFloat)

let baseColor = UIColor.red
let darkenFactor: CGFloat = 2
The type CGColor has an optional value `components` which break down the color into RGBA (as a CGFloat array with values between 0 and 1). You can then reconstruct a UIColor using RGBA values taken from the CGColor and manipulate them.

let darkenedBase = UIColor(displayP3Red: startColor.cgColor.components![0] / darkenFactor, green: startColor.cgColor.components![1] / darkenFactor, blue: startColor.cgColor.components![2] / darkenFactor, alpha: 1)
In this example, each of the RGB valuse were divided by 2, making the color half as dark as it was before. The alpha value remained the same, but you could alternatively apply the darken factor on the alpha value rather than the RGB.

for darker color, this is the simplest:
theColor = [theColor shadowWithLevel:s]; //s:0.0 to 1.0

I just wanted to give the same result, in RGB, than

- placing the color with alpha x% over a white background to lighten
- placing the color with alpha x% over a black background to darken

Which gives the same result, AFAIK, than picking the color in a gradient 'color to white' or 'color to black', at x% of the gradient size.

For that purpose, the math is simple:

extension UIColor {
func mix(with color: UIColor, amount: CGFloat) -> UIColor {
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 UIColor(
red: red1 * (1.0 - amount) + red2 * amount,
green: green1 * (1.0 - amount) + green2 * amount,
blue: blue1 * (1.0 - amount) + blue2 * amount,
alpha: alpha1
)
}
}


**Here are examples with some colors**

[![Examples Darker and Lighter][1]][1]


[1]:

All other answers in this thread use **either the RGB color system** or simply change the **hue or brightness value of the HSB system**. As explained in detail in [**this great blog post**][1] the *correct* way of making a color lighter or darker is to change its `luminance` value. None of the other answers does that. If you want to do it right, then **use my solution** or **write your own** after reading the blog post.

---

Unfortunately it's **quite a hassle** to change any of the attributes of a UIColor **by default**. Also Apple doesn't even support any LAB-based color space like HCL in the `UIColor` class (the `L` in LAB is the `luminance` value we are looking for).

Using **[HandyUIKit](

[To see links please register here]

)** (install it via Carthage) adds support for **HCL** and makes your life **a lot easier**:

import HandyUIKit

let color = UIColor(red: 0.5, green: 0.5, blue: 0.5, alpha: 1.0)

// create a new UIColor object with a specific luminance (slightly lighter)
color.change(.luminance, to: 0.7)

There is also an option to apply a **relative change** (recommended):

// create a new UIColor object with slightly darker color
color.change(.luminance, by: -0.2)

Note that HandyUIKit also adds **some other handy UI features** into your project – checkout its [README on GitHub](

[To see links please register here]

) for more details.

I hope it helps!

*Disclaimer: I'm the author of HandyUIKit.*


[1]:

[To see links please register here]

**Swift 5**

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 r:CGFloat=0, g:CGFloat=0, b:CGFloat=0, a:CGFloat=0;
if self.getRed(&r, green: &g, blue: &b, alpha: &a) {
return UIColor(red: min(r + percentage/100, 1.0),
green: min(g + percentage/100, 1.0),
blue: min(b + percentage/100, 1.0),
alpha: a)
} else {
return nil
}
}
}