Table of Contents

If you are building a Rails application, there is a very good chance that you are displaying lists of data to your users, be that tags on a blog post, categories for products, or initials for user avatars. While displaying the text is one part, making it visually distinct and consistent is the other. In this article, we will focus on the visual-side of your data: generating consistent, aesthetic colors for your UI elements without the headache of managing them manually.

A demonstration of how color_hash can deterministically transform text into color values

A demonstration of how color_hash can deterministically transform text into color values

The Problem with Colors

By default, when developers want to assign colors to dynamic data, they usually reach for one of two approaches. The first is Randomization: picking a random hex code at runtime. This is a simplistic approach, and makes it easy to get something on the screen during prototyping ("Look, the tags have colors!"). In practice, however, this system is a UX nightmare: refresh the page, and the "Urgent" tag turns from red to a calm pastel green. It lacks consistency and meaning.

The second approach is Database Storage: adding a color column to your database tables. You can opt-in to this and build color pickers into your admin panels, giving you full control. However, this is clunky. It requires database migrations, extra disk space, and - most annoyingly - administrative overhead. Every time a new tag or category is created, someone has to manually decide on a color.

Deterministic Hashing

That leaves us wondering - can't we find a middle ground between chaos (random) and high-maintenance (stored) that is still consistent and human-pleasing?

The solution is Deterministic Hashing. The idea is simple: instead of picking a random color or storing one, we mathematically calculate a color based on the string value itself. If you pass the string "Engineering" into the function, it should spit out #3498db. And importantly, it should spit out #3498db every single time, today, tomorrow, and on every user's screen.

This practice keeps your UI consistent- users will subconsciously start associating specific colors with specific tags - while completely removing the need to store color data in your database.

Introducing ColorHash

So, deterministic colors are amazing - but how do you implement them in your own app, in a way that looks good? A raw hash of a string usually results in muddy, unappealing colors. We need control over the aesthetic.

We built the ColorHash gem to solve this problem. It generates colors based on a given string using the HSL color space, ensuring that the results are deterministic and, by default, aesthetically pleasing.

Installation

The first step is to add the gem to your application's Gemfile:

bundle add color_hash

Usage in Rails

Using it is incredibly straightforward. Let's say you have a Tag model and you want to generate a badge background color in your view. You can instantiate the generator and ask for a hex value:

generator = ColorHash.new
color = generator.hex("Engineering")
# => "#d2797c"

Because it is deterministic, "Engineering" will always be that specific shade of red. "Marketing" might be a cool teal. You don't need to save anything.

Customizing the Palette

One of the less obvious benefits of ColorHash is the ability to enforce a "brand" or "theme" on your generated colors. If your application uses a dark mode or a specific pastel theme, you don't want neon bright colors popping up.

You can customize the Hue, Saturation, and Lightness ranges to fit your design system. For example, to generate only "cool" colors in the blue/purple spectrum with a fixed pastel lightness:

# Restrict Hue to 180-240 (Cyans and Blues)
# Fix Saturation and Lightness for a uniform look
cool_generator = ColorHash.new(
  hue: [{ min: 180, max: 240 }],
  saturation: [0.5],
  lightness: [0.6]
)

cool_generator.hex("v1.0 Release")
# => "#5faab6" (A nice muted cyan)

A Practical Helper

To make this scalable across your Rails views, we recommend creating a simple ViewHelper. This allows you to generate consistent avatar backgrounds or tag pills anywhere in your app.

module ColorHelper
  def string_to_color(str)
    # Memoize the generator to avoid re-initializing it
    @color_generator ||= ColorHash.new
    @color_generator.hex(str)
  end
end

Now, in your views, you can simply do:

<span class="badge" style="background-color: <%= string_to_color(tag.name) %>">
  <%= tag.name %>
</span>

And that's everything needed to have your UI elements render with consistent, distinct colors without a single database migration.

Afterword

Computers don't care what color a tag is, but humans rely heavily on visual cues to parse information quickly. Deterministic hashing puts consistent, meaningful UI patterns within reach, without the overhead of manual management.

P.S.: We open-sourced this library to help the community build better UIs faster. Check it out on GitHub!