This question already has an answer here:
Let's say I have a hex such as: 5fc9f8
Is there a function that accepts "levels of darkness" (-10 to 10) and returns a hex that reflects that?
By darkness I mean add black/remove black from the color.
This question already has an answer here:
Let's say I have a hex such as: 5fc9f8
Is there a function that accepts "levels of darkness" (-10 to 10) and returns a hex that reflects that?
By darkness I mean add black/remove black from the color.
import UIKit extension String { subscript (range: Range<Int>) -> String { return range.startIndex < 0 || range.endIndex > count(self) ? "Out of Range" : substringWithRange(Range(start:advance(startIndex,range.startIndex),end:advance(startIndex,range.endIndex))) } var hexaCGFloat: CGFloat { return CGFloat(strtoul(self, nil, 16)) } } extension UIColor { var rgbComponents:(red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) { var r:CGFloat = 0, g:CGFloat = 0, b:CGFloat = 0, a:CGFloat = 0 if getRed(&r, green: &g, blue: &b, alpha: &a) { return (r,g,b,a) } return (0,0,0,0) } var hsbComponents:(hue: CGFloat, saturation: CGFloat, brightness: CGFloat, alpha: CGFloat) { var h:CGFloat = 0, s:CGFloat = 0, b:CGFloat = 0, a:CGFloat = 0 if getHue(&h, saturation: &s, brightness: &b, alpha: &a){ return (h,s,b,a) } return (0,0,0,0) } var hslComponents:(hue: CGFloat, saturation: CGFloat, lightness: CGFloat, alpha: CGFloat) { let rgb = rgbComponents, hsb = hsbComponents let maximum = max(rgb.red, rgb.green, rgb.blue) let minimum = min(rgb.red, rgb.green, rgb.blue) let range = maximum - minimum let lightness = (maximum + minimum) / 2.0 let saturation = range == 0 ? 0 : range / { return lightness < 0.5 ? lightness * 2 : 2 - (lightness * 2) }() return (hsb.hue, saturation, lightness, hsb.alpha) } convenience init(hue: CGFloat, var saturation:CGFloat , var lightness:CGFloat , alpha: CGFloat) { lightness *= 2 saturation *= lightness <= 1 ? lightness : 2 - lightness self.init(hue: hue, saturation: lightness == 0 ? 0 : (2*saturation)/(lightness+saturation), brightness: (lightness+saturation)/2, alpha: 1) } convenience init(htmlColor:String, alpha: Double) { self.init(red: htmlColor[0...1].hexaCGFloat / 255.0, green: htmlColor[2...3].hexaCGFloat / 255.0, blue: htmlColor[4...5].hexaCGFloat / 255.0, alpha: CGFloat(alpha) ) } }
Testing
let color = UIColor(htmlColor: "5fc9f8", alpha: 1) let colorHSL = color.hslComponents let lighterColor = UIColor(hue:colorHSL.hue, saturation: colorHSL.saturation, lightness: min(colorHSL.lightness * 1.3,1.0), alpha: 1) let darkerColor = UIColor(hue:colorHSL.hue, saturation: colorHSL.saturation, lightness: max(colorHSL.lightness * 0.5,0.0), alpha: 1)
RGB (Red Green Blue colors, what the hex code represents) is not consistent with color transformations like brightness. The easiest way is to convert the RGB color to HSB (Hue Saturation Brightness) or HSL (Hue Saturation lightness), adjust the brightness or luminescence to the desired brightness, and convert it back to RGB.
Let's say you set the background color by:
self.view.backgroundColor = UIColor.redColor()
I'm not going to tell you how to change the brightness by a certain amount, that is up to you, but I'm going to give you exactly what you need to change the brightness of your backgroundColor
(in this case):
//if you want the full brightness... brightness: 1.0 self.view.backgroundColor = UIColor(hue: 1.0, saturation: 1.0, brightness: 0.5, alpha: 1.0)
This makes the brightness decrease by 50%, since brightness: 0.5
not brightness: 1.0
but as you can see, it will be easy to tie this to a function to either increase or decrease the brightness of the backgroundColor
(in this case).
This function will split RGB input value into each component color then add '1' to each (decreasing black, as you put it). Then it will recombine it to an RGB string and return the value.
Changing the += to -= in a Darken function will "add black".
function Lighten(RGB) { var R = parseInt(RGB.substring(0, 2)); var G = parseInt(RGB.substring(2, 4)); var B = parseInt(RGB.substring(4, 6)); R += 1; G += 1; B += 1; RGB = R.toString() + G.toString() + B.toString(); return RGB; }
You could also add a second parameter to take a fixed amount to increase by.