Obtenez des variations de couleur plus claires et plus sombres pour un UIColor donné
Comment obtenir différentes variations plus claires et plus sombres d'une UIColor donnée dans Swift?
Mis à jour
Utilisez ci-dessous 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
}
}
}
Utilisation:
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%
au lieu de .lighter() et .darker(), vous pouvez utiliser .adjust() avec des valeurs positives pour l'éclaircissement et des valeurs négatives pour l'obscurcissement
color.adjust(-30) // 30% darker color
color.adjust(30) // 30% lighter color
Sortie:
Je souhaite fournir une autre version utilisant la luminosité et la saturation au lieu de RVB
extension UIColor {
/**
Create a ligher 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
}
}
La réponse de Kenji-Tran fonctionne bien tant que votre couleur de départ n'est pas le noir (valeur de luminosité 0). Avec l’ajout de quelques lignes de code supplémentaire, vous pouvez également rendre le noir plus clair (c’est-à-dire l’éclaircir en niveaux de gris ou en valeur de couleur).
Note: / Je n'ai pas pu ajouter ce changement en utilisant un Edit et je ne suis pas autorisé à commenter la réponse de Kenji-Tran à cause de mon représentant "nouveau garçon", donc je n'ai trouvé aucun autre moyen de partager mes connaissances sur SO puis en postant une nouvelle réponse. J'espère que ça va.
extension UIColor {
/**
Create a ligher 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 {
/**
Below is the new part, which makes the code work with black as well as colors
*/
let newB: CGFloat
if b == 0.0 {
newB = max(min(b + percentage/100, 1.0), 0.0)
} else {
newB = 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
}
}
Version avec modification des valeurs RVB
Ici, je mets une simple extension UIColor qui est basée sur les réponses précédentes. Cela fonctionne parfaitement pour moi.
En dessous de la démo:
Code de manipulation des couleurs
public extension UIColor {
/**
Create a lighter color
*/
public func lighter(by percentage: CGFloat = 30.0) -> UIColor {
return self.adjustBrightness(by: abs(percentage))
}
/**
Create a darker color
*/
public func darker(by percentage: CGFloat = 30.0) -> UIColor {
return self.adjustBrightness(by: -abs(percentage))
}
/**
Changing R, G, B values
*/
func adjustBrightness(by percentage: CGFloat = 30.0) -> UIColor {
var red: CGFloat = 0.0
var green: CGFloat = 0.0
var blue: CGFloat = 0.0
var alpha: CGFloat = 0.0
if self.getRed(&red, green: &green, blue: &blue, alpha: &alpha) {
let pFactor = (100.0 + percentage) / 100.0
let newRed = (red*pFactor).clamped(to: 0.0 ... 1.0)
let newGreen = (green*pFactor).clamped(to: 0.0 ... 1.0)
let newBlue = (blue*pFactor).clamped(to: 0.0 ... 1.0)
return UIColor(red: newRed, green: newGreen, blue: newBlue, alpha: alpha)
}
return self
}
}
Fonction clampée Extension permettant de conserver facilement des valeurs comprises entre min et max.
extension Comparable {
func clamped(to range: ClosedRange<Self>) -> Self {
if self > range.upperBound {
return range.upperBound
} else if self < range.lowerBound {
return range.lowerBound
} else {
return self
}
}
}
Testé sous Xcode 10 avec Swift 4.x pour iOS 12
Commencez avec votre couleur UIColor et choisissez un facteur d'assombrissement (CGFloat).
let baseColor = UIColor.red
let darkenFactor: CGFloat = 2
Le type CGColor a une valeur optionnelle components qui décompose la couleur en RGBA (sous forme de tableau CGFloat avec des valeurs comprises entre 0 et 1). Vous pouvez ensuite reconstruire une UIColor en utilisant les valeurs RGBA extraites de CGColor et les manipuler.
let darkenedBase = UIColor(displayP3Red: startColor.cgColor.components![0] / darkenFactor, green: startColor.cgColor.components![1] / darkenFactor, blue: startColor.cgColor.components![2] / darkenFactor, alpha: 1)
Dans cet exemple, chacune des valeurs RVB a été divisée par 2, ce qui a rendu la couleur aussi sombre qu’elle l’était auparavant. La valeur alpha est restée la même, mais vous pouvez également appliquer le facteur d'assombrissement sur la valeur alpha plutôt que sur le RVB.
À l’aide de la fonction lukszar clampled, j’ai écrit cette fonction pour l’extension UIColor, en utilisant les proportions réelles des valeurs RVB. J'espère que c'est utile
public extension UIColor {
public func lighter(by percentage: CGFloat = 30.0) -> UIColor {
return self.adjustBrightness(by: abs(percentage))
}
public func darker(by percentage: CGFloat = 30.0) -> UIColor {
return self.adjustBrightness(by: -abs(percentage))
}
func adjustBrightness(by percentage: CGFloat = 30.0) -> UIColor {
let ratio = percentage/100
var red: CGFloat = 0.0
var green: CGFloat = 0.0
var blue: CGFloat = 0.0
var alpha: CGFloat = 0.0
if self.getRed(&red, green: &green, blue: &blue, alpha: &alpha) {
let newRed = (red + ((ratio < 0) ? red * ratio : (1 - red) * ratio)).clamped(to: 0.0 ... 1.0)
let newGreen = (green + ((ratio < 0) ? green * ratio : (1 - green) * ratio)).clamped(to: 0.0 ... 1.0)
let newBlue = (blue + ((ratio < 0) ? blue * ratio : (1 - blue) * ratio)).clamped(to: 0.0 ... 1.0)
return UIColor(red: newRed, green: newGreen, blue: newBlue, alpha: alpha)
}
return self
}
}