Value-driven Color

There are times when you want to display a graph of data and add meaningful colors based on their values. Such as the one below.

What we can do is to put a fixed number of colors, and use a switch statement with their case statement as ranges.

static func colorForPercent(_ percentage: Double) -> UIColor {
switch percentage {
case 0..<0.33:
return UIColor(hex: 0xE02020)
case 0.33..<0.66:
return UIColor(hex: 0xFA6400)
case 0.66..<1:
return UIColor(hex: 0xF7B500)
case 1:
return UIColor(hex: 0x6DD400)
default:
fatalError("Bad Input: percentage must satisfy 0 <= percentage <= 1")
}
}
view raw FixedColors.swift hosted with ❤ by GitHub

What if we wanted a gradual change of colors, with a unique color corresponding to each value? Moreover, what if the y-values are not always 100?

My solution comes down in calculating each component of the RGB values of the resulting color, with the desired intermediate colors hard-coded.

extension UIColor {
static func colorForPercent(_ percentage: Double) -> UIColor {
switch percentage {
case 00.5:
return firstHalf(percentage: percentage * 2)
case 0.51:
return secondHalf(percentage: (percentage 0.5) * 2)
default:
fatalError("Bad Input: percentage must satisfy 0 <= percentage <= 1")
}
}
static fileprivate func firstHalf(percentage: Double) -> UIColor {
let begin = UIColor.systemGreen.cgColor.components!
let end = UIColor.systemYellow.cgColor.components!
return createColor(begin: begin, end: end, percentage: percentage)
}
static fileprivate func secondHalf(percentage: Double) -> UIColor {
let begin = UIColor.systemYellow.cgColor.components!
let end = UIColor.systemRed.cgColor.components!
return createColor(begin: begin, end: end, percentage: percentage)
}
static fileprivate func createColor(begin: [CGFloat], end: [CGFloat], percentage: Double) -> UIColor {
var colorDiff = begin
for i in 0 ..< 3 {
colorDiff[i] = begin[i] + (end[i] begin[i]) * CGFloat(percentage)
}
return UIColor(red: colorDiff[0], green: colorDiff[1], blue: colorDiff[2], alpha: 1)
}
}
view raw DynamicColors.swift hosted with ❤ by GitHub

This approach gets the job done, but from a design point of view, I personally like finite number of colors. In fact, the app that is shown in this blog post is currently using a finite number of colors. These colors are the template colors in the Sketch app, and I thought they looked beautiful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s