Naming Colors

As designers and developers, we deal with colors in everything we touch in our day-to-day work: websites, apps, editors, terminals, etc. As such, the way we name and group them greatly affects how reusable and refactor-friendly our code is.

While color management is a broad topic that’s outside the scope of this article, here are some general tips, in no particular order, to make naming and organizing your digital palettes a little easier:

• Group all your color definitions in one file to make things easier to find.
• Limit your palette to three colors.

• When naming your colors, use distinctive and memorable names. For instance, Sapphire and Brick are more specific than Blue and Red. We built Kromatic for that purpose. You can also find free online alternatives if that’s your preference.

• Name your reusable color variables—or functions, for that matter—based on their semantic role. For instance use names such as primary,brand-color, and border-color instead of light-gray, darker-red, and gray-2. This sounds like it contradicts the previous point, but it doesn’t have to if you follow the next advice.

• Keep your palette definition local, and provide semantic ways to use it across the project. Here is one example in Sass:

  // Local Palette
  $ralph-red: #C42E2E;
  
  // Global Variable
  $primary-color: $ralph-red;
  

  And here is another in Swift:

  import UIKit
  
  extension UIColor {
    // Local Palette
    private class func ralphRed() -> UIColor {
      return UIColor(hue: 1, saturation: 0.765, brightness: 0.768, alpha: 1)
    }
  
    // Global Function
    class func primaryColor() -> UIColor { return ralphRed() }
  }
  

  The advantage of this approach is that it keeps your global colors semantic but still manages to provide some context about the palette by locally describing its individual colors.

• Resist the temptation to tamper with colors inline. For instance, instead of changing the lightness of a color in various places of the project, create a variable or function in your palette file and reuse it.

• Don’t be afraid of using “aliases” to make your color variables even more granular. Examples:

  // Local Palette
  $ralph-red: #C42E2E;
  
  // Global Variables
  $primary-color: $ralph-red;
  $title-color: $primary-color
  

  Or in Swift:

  import UIKit
  
  extension UIColor {
    private class func ralphRed() -> UIColor {
      return UIColor(hue: 1, saturation: 0.765, brightness: 0.768, alpha: 1)
    }
  
    class func primaryColor() -> UIColor { return ralphRed() }
    class func titleColor() -> UIColor { return primaryColor() }
  }
  

  This way any future changes will trickle down to all your UI elements without having to abuse Find & Replace.

While most of these tips will require a bit more work up front, they will save you a lot of time and headaches when tweaking your color palette down the road.