Created
July 17, 2021 22:09
-
-
Save kylehowells/203f5da6acba9078561e981a92efcfb8 to your computer and use it in GitHub Desktop.
Swift Playground showing 3 different ways to interpolate between colors
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import UIKit | |
| extension UIColor { | |
| func interpolateRGBColorTo(_ end: UIColor, fraction: CGFloat) -> UIColor? { | |
| let f = min(max(0, fraction), 1) | |
| guard let c1 = self.cgColor.components, let c2 = end.cgColor.components else { return nil } | |
| let r: CGFloat = CGFloat(c1[0] + (c2[0] - c1[0]) * f) | |
| let g: CGFloat = CGFloat(c1[1] + (c2[1] - c1[1]) * f) | |
| let b: CGFloat = CGFloat(c1[2] + (c2[2] - c1[2]) * f) | |
| let a: CGFloat = CGFloat(c1[3] + (c2[3] - c1[3]) * f) | |
| return UIColor(red: r, green: g, blue: b, alpha: a) | |
| } | |
| func interpolateRGBSquaredColorTo(_ end: UIColor, fraction: CGFloat) -> UIColor? { | |
| let f = min(max(0, fraction), 1) | |
| guard let c1 = self.cgColor.components, let c2 = end.cgColor.components else { return nil } | |
| let startR:CGFloat = c1[0] * c1[0] | |
| let startG:CGFloat = c1[1] * c1[1] | |
| let startB:CGFloat = c1[2] * c1[2] | |
| let endR:CGFloat = c2[0] * c2[0] | |
| let endG:CGFloat = c2[1] * c2[1] | |
| let endB:CGFloat = c2[2] * c2[2] | |
| var r: CGFloat = CGFloat(startR + (endR - startR) * f) | |
| r = sqrt(r) | |
| var g: CGFloat = CGFloat(startG + (endG - startG) * f) | |
| g = sqrt(g) | |
| var b: CGFloat = CGFloat(startB + (endB - startB) * f) | |
| b = sqrt(b) | |
| let a: CGFloat = CGFloat(c1[3] + (c2[3] - c1[3]) * f) | |
| return UIColor(red: r, green: g, blue: b, alpha: a) | |
| } | |
| func interpolateHSBColorTo(_ end: UIColor, fraction: CGFloat) -> UIColor? { | |
| let f = min(max(0, fraction), 1) | |
| let startHSB = self.hsba | |
| let endHSB = end.hsba | |
| var startHue:CGFloat = startHSB.h | |
| var endHue:CGFloat = endHSB.h | |
| let diffHue = endHue - startHue | |
| if diffHue < 0 { | |
| if diffHue < -0.5 { | |
| endHue += 1 | |
| } | |
| } else { | |
| if abs(diffHue) > 0.5 { | |
| startHue | |
| startHue = startHue + 1 | |
| startHue | |
| } | |
| } | |
| var hue = startHue + ((endHue - startHue) * f) | |
| hue = wrap(kX: hue, kLowerBound: 0, kUpperBound: 1) | |
| let saturation = startHSB.s + ((endHSB.s - startHSB.s) * f) | |
| let brightness = startHSB.b + ((endHSB.b - startHSB.b) * f) | |
| let alpha = startHSB.a + ((endHSB.a - startHSB.a) * f) | |
| return UIColor(hue: hue, saturation: saturation, brightness: brightness, alpha: alpha) | |
| } | |
| var hsba:(h: CGFloat, s: CGFloat,b: CGFloat,a: CGFloat) { | |
| var h: CGFloat = 0, s: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0 | |
| self.getHue(&h, saturation: &s, brightness: &b, alpha: &a) | |
| return (h: h, s: s, b: b, a: a) | |
| } | |
| } | |
| func wrap(kX:CGFloat, kLowerBound:CGFloat, kUpperBound:CGFloat) -> CGFloat { | |
| let range_size = (kUpperBound - kLowerBound) | |
| var vX:CGFloat = kX | |
| if (vX < kLowerBound) { | |
| vX = range_size * ((kLowerBound - vX) / range_size + 1) | |
| } | |
| return kLowerBound + ((vX - kLowerBound).truncatingRemainder(dividingBy: range_size)) // % range_size | |
| } | |
| let color1 = UIColor(red: 0.035, green: 0.216, blue: 0.933, alpha: 1.00) | |
| let color2 = UIColor(red: 0.933, green: 0.794, blue: 0.000, alpha: 1.00) | |
| color1.interpolateRGBColorTo(color2, fraction:0.0) | |
| color1.interpolateRGBColorTo(color2, fraction:0.1) | |
| color1.interpolateRGBColorTo(color2, fraction:0.2) | |
| color1.interpolateRGBColorTo(color2, fraction:0.3) | |
| color1.interpolateRGBColorTo(color2, fraction:0.4) | |
| color1.interpolateRGBColorTo(color2, fraction:0.5) | |
| color1.interpolateRGBColorTo(color2, fraction:0.6) | |
| color1.interpolateRGBColorTo(color2, fraction:0.7) | |
| color1.interpolateRGBColorTo(color2, fraction:0.8) | |
| color1.interpolateRGBColorTo(color2, fraction:0.9) | |
| color1.interpolateRGBColorTo(color2, fraction:1.0) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.0) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.1) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.2) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.3) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.4) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.5) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.6) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.7) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.8) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.9) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:1.0) | |
| color1.interpolateHSBColorTo(color2, fraction:0.0) | |
| color1.interpolateHSBColorTo(color2, fraction:0.1) | |
| color1.interpolateHSBColorTo(color2, fraction:0.2) | |
| color1.interpolateHSBColorTo(color2, fraction:0.3) | |
| color1.interpolateHSBColorTo(color2, fraction:0.4) | |
| color1.interpolateHSBColorTo(color2, fraction:0.5) | |
| color1.interpolateHSBColorTo(color2, fraction:0.6) | |
| color1.interpolateHSBColorTo(color2, fraction:0.7) | |
| color1.interpolateHSBColorTo(color2, fraction:0.8) | |
| color1.interpolateHSBColorTo(color2, fraction:0.9) | |
| color1.interpolateHSBColorTo(color2, fraction:1.0) | |
| let colorRed = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.00) | |
| let colorYellow = UIColor(red: 1.0, green: 1.0, blue: 0.0, alpha: 1.00) | |
| colorYellow.interpolateRGBColorTo(colorRed, fraction:0.0) | |
| colorYellow.interpolateRGBColorTo(colorRed, fraction:0.1) | |
| colorYellow.interpolateRGBColorTo(colorRed, fraction:0.2) | |
| colorYellow.interpolateRGBColorTo(colorRed, fraction:0.3) | |
| colorYellow.interpolateRGBColorTo(colorRed, fraction:0.4) | |
| colorYellow.interpolateRGBColorTo(colorRed, fraction:0.5) | |
| colorYellow.interpolateRGBColorTo(colorRed, fraction:0.6) | |
| colorYellow.interpolateRGBColorTo(colorRed, fraction:0.7) | |
| colorYellow.interpolateRGBColorTo(colorRed, fraction:0.8) | |
| colorYellow.interpolateRGBColorTo(colorRed, fraction:0.9) | |
| colorYellow.interpolateRGBColorTo(colorRed, fraction:1.0) | |
| colorYellow.interpolateRGBSquaredColorTo(colorRed, fraction:0.0) | |
| colorYellow.interpolateRGBSquaredColorTo(colorRed, fraction:0.1) | |
| colorYellow.interpolateRGBSquaredColorTo(colorRed, fraction:0.2) | |
| colorYellow.interpolateRGBSquaredColorTo(colorRed, fraction:0.3) | |
| colorYellow.interpolateRGBSquaredColorTo(colorRed, fraction:0.4) | |
| colorYellow.interpolateRGBSquaredColorTo(colorRed, fraction:0.5) | |
| colorYellow.interpolateRGBSquaredColorTo(colorRed, fraction:0.6) | |
| colorYellow.interpolateRGBSquaredColorTo(colorRed, fraction:0.7) | |
| colorYellow.interpolateRGBSquaredColorTo(colorRed, fraction:0.8) | |
| colorYellow.interpolateRGBSquaredColorTo(colorRed, fraction:0.9) | |
| colorYellow.interpolateRGBSquaredColorTo(colorRed, fraction:1.0) | |
| colorYellow.interpolateHSBColorTo(colorRed, fraction:0.0) | |
| colorYellow.interpolateHSBColorTo(colorRed, fraction:0.1) | |
| colorYellow.interpolateHSBColorTo(colorRed, fraction:0.2) | |
| colorYellow.interpolateHSBColorTo(colorRed, fraction:0.3) | |
| colorYellow.interpolateHSBColorTo(colorRed, fraction:0.4) | |
| colorYellow.interpolateHSBColorTo(colorRed, fraction:0.5) | |
| colorYellow.interpolateHSBColorTo(colorRed, fraction:0.6) | |
| colorYellow.interpolateHSBColorTo(colorRed, fraction:0.7) | |
| colorYellow.interpolateHSBColorTo(colorRed, fraction:0.8) | |
| colorYellow.interpolateHSBColorTo(colorRed, fraction:0.9) | |
| colorYellow.interpolateHSBColorTo(colorRed, fraction:1.0) | |
| _ = { | |
| let color1 = UIColor.blue | |
| let color2 = UIColor.red | |
| color1.interpolateRGBColorTo(color2, fraction:0.0) | |
| color1.interpolateRGBColorTo(color2, fraction:0.1) | |
| color1.interpolateRGBColorTo(color2, fraction:0.2) | |
| color1.interpolateRGBColorTo(color2, fraction:0.3) | |
| color1.interpolateRGBColorTo(color2, fraction:0.4) | |
| color1.interpolateRGBColorTo(color2, fraction:0.5) | |
| color1.interpolateRGBColorTo(color2, fraction:0.6) | |
| color1.interpolateRGBColorTo(color2, fraction:0.7) | |
| color1.interpolateRGBColorTo(color2, fraction:0.8) | |
| color1.interpolateRGBColorTo(color2, fraction:0.9) | |
| color1.interpolateRGBColorTo(color2, fraction:1.0) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.0) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.1) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.2) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.3) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.4) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.5) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.6) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.7) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.8) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.9) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:1.0) | |
| color1.interpolateHSBColorTo(color2, fraction:0.0) | |
| color1.interpolateHSBColorTo(color2, fraction:0.1) | |
| color1.interpolateHSBColorTo(color2, fraction:0.2) | |
| color1.interpolateHSBColorTo(color2, fraction:0.3) | |
| color1.interpolateHSBColorTo(color2, fraction:0.4) | |
| color1.interpolateHSBColorTo(color2, fraction:0.5) | |
| color1.interpolateHSBColorTo(color2, fraction:0.6) | |
| color1.interpolateHSBColorTo(color2, fraction:0.7) | |
| color1.interpolateHSBColorTo(color2, fraction:0.8) | |
| color1.interpolateHSBColorTo(color2, fraction:0.9) | |
| color1.interpolateHSBColorTo(color2, fraction:1.0) | |
| }() | |
| _ = { | |
| let color1 = UIColor.blue | |
| let color2 = UIColor.yellow | |
| color1.interpolateRGBColorTo(color2, fraction:0.0) | |
| color1.interpolateRGBColorTo(color2, fraction:0.1) | |
| color1.interpolateRGBColorTo(color2, fraction:0.2) | |
| color1.interpolateRGBColorTo(color2, fraction:0.3) | |
| color1.interpolateRGBColorTo(color2, fraction:0.4) | |
| color1.interpolateRGBColorTo(color2, fraction:0.5) | |
| color1.interpolateRGBColorTo(color2, fraction:0.6) | |
| color1.interpolateRGBColorTo(color2, fraction:0.7) | |
| color1.interpolateRGBColorTo(color2, fraction:0.8) | |
| color1.interpolateRGBColorTo(color2, fraction:0.9) | |
| color1.interpolateRGBColorTo(color2, fraction:1.0) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.0) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.1) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.2) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.3) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.4) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.5) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.6) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.7) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.8) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.9) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:1.0) | |
| color1.interpolateHSBColorTo(color2, fraction:0.0) | |
| color1.interpolateHSBColorTo(color2, fraction:0.1) | |
| color1.interpolateHSBColorTo(color2, fraction:0.2) | |
| color1.interpolateHSBColorTo(color2, fraction:0.3) | |
| color1.interpolateHSBColorTo(color2, fraction:0.4) | |
| color1.interpolateHSBColorTo(color2, fraction:0.5) | |
| color1.interpolateHSBColorTo(color2, fraction:0.6) | |
| color1.interpolateHSBColorTo(color2, fraction:0.7) | |
| color1.interpolateHSBColorTo(color2, fraction:0.8) | |
| color1.interpolateHSBColorTo(color2, fraction:0.9) | |
| color1.interpolateHSBColorTo(color2, fraction:1.0) | |
| }() | |
| _ = { | |
| let color1 = UIColor.red | |
| let color2 = UIColor.green | |
| color1.interpolateRGBColorTo(color2, fraction:0.0) | |
| color1.interpolateRGBColorTo(color2, fraction:0.1) | |
| color1.interpolateRGBColorTo(color2, fraction:0.2) | |
| color1.interpolateRGBColorTo(color2, fraction:0.3) | |
| color1.interpolateRGBColorTo(color2, fraction:0.4) | |
| color1.interpolateRGBColorTo(color2, fraction:0.5) | |
| color1.interpolateRGBColorTo(color2, fraction:0.6) | |
| color1.interpolateRGBColorTo(color2, fraction:0.7) | |
| color1.interpolateRGBColorTo(color2, fraction:0.8) | |
| color1.interpolateRGBColorTo(color2, fraction:0.9) | |
| color1.interpolateRGBColorTo(color2, fraction:1.0) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.0) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.1) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.2) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.3) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.4) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.5) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.6) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.7) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.8) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.9) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:1.0) | |
| color1.interpolateHSBColorTo(color2, fraction:0.0) | |
| color1.interpolateHSBColorTo(color2, fraction:0.1) | |
| color1.interpolateHSBColorTo(color2, fraction:0.2) | |
| color1.interpolateHSBColorTo(color2, fraction:0.3) | |
| color1.interpolateHSBColorTo(color2, fraction:0.4) | |
| color1.interpolateHSBColorTo(color2, fraction:0.5) | |
| color1.interpolateHSBColorTo(color2, fraction:0.6) | |
| color1.interpolateHSBColorTo(color2, fraction:0.7) | |
| color1.interpolateHSBColorTo(color2, fraction:0.8) | |
| color1.interpolateHSBColorTo(color2, fraction:0.9) | |
| color1.interpolateHSBColorTo(color2, fraction:1.0) | |
| }() | |
| _ = { | |
| let color1 = UIColor.purple | |
| let color2 = UIColor.green | |
| color1.interpolateRGBColorTo(color2, fraction:0.0) | |
| color1.interpolateRGBColorTo(color2, fraction:0.1) | |
| color1.interpolateRGBColorTo(color2, fraction:0.2) | |
| color1.interpolateRGBColorTo(color2, fraction:0.3) | |
| color1.interpolateRGBColorTo(color2, fraction:0.4) | |
| color1.interpolateRGBColorTo(color2, fraction:0.5) | |
| color1.interpolateRGBColorTo(color2, fraction:0.6) | |
| color1.interpolateRGBColorTo(color2, fraction:0.7) | |
| color1.interpolateRGBColorTo(color2, fraction:0.8) | |
| color1.interpolateRGBColorTo(color2, fraction:0.9) | |
| color1.interpolateRGBColorTo(color2, fraction:1.0) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.0) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.1) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.2) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.3) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.4) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.5) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.6) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.7) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.8) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:0.9) | |
| color1.interpolateRGBSquaredColorTo(color2, fraction:1.0) | |
| color1.interpolateHSBColorTo(color2, fraction:0.0) | |
| color1.interpolateHSBColorTo(color2, fraction:0.1) | |
| color1.interpolateHSBColorTo(color2, fraction:0.2) | |
| color1.interpolateHSBColorTo(color2, fraction:0.3) | |
| color1.interpolateHSBColorTo(color2, fraction:0.4) | |
| color1.interpolateHSBColorTo(color2, fraction:0.5) | |
| color1.interpolateHSBColorTo(color2, fraction:0.6) | |
| color1.interpolateHSBColorTo(color2, fraction:0.7) | |
| color1.interpolateHSBColorTo(color2, fraction:0.8) | |
| color1.interpolateHSBColorTo(color2, fraction:0.9) | |
| color1.interpolateHSBColorTo(color2, fraction:1.0) | |
| }() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment