---
title: Naming Colors
teaser: The why and how of naming the colors you use in your design and development
  projects.
tags: color,design,osx
author: Reda Lemeden
published_on: 2015-11-03
---

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](https://thoughtbot.com/blog/Its-only-color).
-   When naming your colors, use distinctive and memorable names. For instance,
    _Sapphire_ and _Brick_ are more specific than _Blue_ and _Red_. We built
    [Kromatic](http://kromatic.thoughtbot.com) for that purpose. You can also find
    free online alternatives if that's your preference.
    ![A screenshot of Kromatic](https://images.thoughtbot.com/naming-colors/rBGxT9kSSWqIbbj2rLpP_kromatic.png)

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

    ```scss
    // Local Palette
    $ralph-red: #C42E2E;

    // Global Variable
    $primary-color: $ralph-red;
    ```

    And here is another in Swift:

    ```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:

    ```scss
    // Local Palette
    $ralph-red: #C42E2E;

    // Global Variables
    $primary-color: $ralph-red;
    $title-color: $primary-color
    ```

      Or in Swift:

    ```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.