Obtenez des variations de couleurs plus claires et plus foncées pour une UIColor donnée.

Question

Comment obtenir des variations plus claires et plus foncées d'une UIColor donnée en Swift ?

Answer 1

Mise à jour de

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'assombrissement.

color.adjust(-30) // 30% darker color
color.adjust(30) // 30% lighter color

Sortie :

Answer 2

Je veux fournir une autre version utilisant la luminosité et la saturation au lieu du RGB.

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
  }
}

Answer 3

Version avec modification des valeurs RVB

Ici, j'ai mis simple UIColor qui est basé sur les réponses précédentes. Elle fonctionne parfaitement pour moi.

Démonstration ci-dessous :

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 de serrage Extension permettant de conserver facilement les valeurs 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
        }
    }
}

Answer 4

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émentaires, vous pouvez également rendre le noir plus "léger" (c'est-à-dire l'éclaircir à une valeur de niveau de gris ou de couleur).

Note : Je n'ai pas été en mesure d'ajouter cette modification en utilisant une édition et je ne suis pas autorisé à commenter la réponse de Kenji-Tran en raison de ma réputation de "nouveau garçon", donc je n'ai pas trouvé d'autre moyen de partager mes connaissances sur le SO que de poster une nouvelle réponse. J'espère que cela vous convient.

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
  }
}

Answer 5

Testé dans Xcode 10 avec Swift 4.x pour iOS 12

Commencez avec votre couleur sous forme de UIColor et choisissez un facteur d'assombrissement (sous forme de CGFloat).

let baseColor = UIColor.red
let darkenFactor: CGFloat = 2

Le type CGColor a une valeur optionnelle components qui décompose la couleur en RGBA (comme un tableau CGFloat avec des valeurs 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 rend la couleur moitié moins foncée qu'auparavant. La valeur alpha est restée la même, mais vous pourriez aussi appliquer le facteur d'assombrissement sur la valeur alpha plutôt que sur la valeur RVB.