Given a hex for a color, how can I make that color lighter and darker? [duplicate]

匿名 (未验证) 提交于 2019-12-03 02:33:02

问题:

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.

回答1:

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) 


回答2:

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.

See here or here for how to convert RGB to HSL.



回答3:

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).



回答4:

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.



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!