The Colors of Steampunk

“Steampunk is what happens when goths discover brown.” This widely cited statement by author Jess Nevins demonstrates the degree to which steampunk is associated with a single color. Brown, including its many shades, is the color of leather, wood, and rust, as well as the sepia tones often seen in 19th century photographs. Combined with reddish-yellows that suggest brass, it’s the basis of many steampunk palettes and a strong visual cue for the steampunk aesthetic.

Of course, steampunk imagery can include the full spectrum of reproducible colors, especially in the more-whimsical strains of the genre inspired by Art Nouveau and fantasy works such as Alice in Wonderland. But brown tends to dominate, as do other colors regarded as “warm,” such as yellows, reds, and oranges. You’re less likely to see cool colors such as blue and green.

That’s not just a subjective judgment, but one that can be demonstrated by applying some mad science and analyzing steampunk-themed images found online. In this article, I’ll examine colors in steampunk imagery in a more-or-less systematic way. I’ll also suggest tools you can use to build aesthetically pleasing steampunk palettes regardless of their “brownishness.” Such tools can be useful whether you want to stay within the traditional steampunk palette or break free.

I’ll be mentioning color models such as RGB, HSL, HSB, CMYK, and LAB, which provide mathematical ways to describe different colors. If you’re not already familiar with these, Wikipedia has an overview of color models and a list of commonly used color spaces. I’ll also refer to hex color codes, which provide a shorthand method of describing RGB color. The HTML Color Codes website has a good explanation of hex codes along with visual tools for specifying colors in RGB, HSL, and CMYK. The ColorHexa website is another good source of information about hex codes and color spaces.

Steampunk colors in Flickr

We’ll begin by going to Flickr, the popular photo-hosting site. I’ll show you how the site’s search function provides a method for conducting a “poll” of steampunk-themed images.

If you enter “steampunk” as a search term, the site displays a total of 765,199 images (the last time we checked). Atop the search results, you’ll see a series of color tiles that allow you to filter the images by predominant color. For example, if you click on the red tile, you’ll see that red is the predominant color in 25,463 steampunk images.

Here are the results for the other colors, ranked by frequency.

Dark orange: 124,673 (This is essentially the same as brown. In the HSB and HSL color models, if you choose orange as the hue, you’ll get brown by lowering the brightness or lightness values.)

Pale pink: 95,143 (This color matches skin tones in many photos.)

Blue: 64,088 (This color matches blue sky and other backgrounds in many images.)

Orange: 30,504

School bus yellow: 23,039

Cyan: 22,314 (Again, largely blue sky and other backgrounds.)

Pink: 9,271

Lemon yellow: 8,733

Violet: 8,440

Green: 6,908

Dark lime green: 5,744

As you can see, dark orange (aka brown) is the predominant color in almost 20 percent of the images. And aside from photos with a lot of blue sky, warm colors prevail over cool ones.

Adobe’s steampunk colors

Flickr’s search function lets you find images where certain individual colors are predominant, but it doesn’t provide any clues about the range of colors within steampunk images. For that, we’ll turn to Adobe Color, a set of online tools from the company behind Photoshop and other graphics software. Adobe Color is tightly integrated with other Adobe products, but you can use some of the features even if you’re not a customer.

Adobe’s software is popular among professional photographers and graphic designers. One advantage of Adobe Color is that it incorporates imagery from many of these users, so you can get a good idea of how creative professionals are using colors in steampunk projects.

First, go to Adobe Color’s Explore section and enter “steampunk” in the search field. You will see images and color palettes from three sources:

1. Color themes uploaded by Adobe users and tagged with “steampunk.” Each theme consists of five harmonized colors, providing a good starting point for creating steampunk designs.

2. Themes extracted from steampunk design projects on Behance. This is an Adobe website that allows designers to post portfolios of their work and get feedback from peers. Each theme consists of five colors sampled from the designs.

3. Themes extracted from steampunk images on Adobe Stock, the company’s stock photography service. Many of these are uploaded by professional photographers who use Adobe Photoshop or Lightroom.

By default, the search function shows themes from all three sources, but you can use the View menu in the upper right to filter by source.

As you can see, shades of brown, yellow, and orange are predominant. Some themes include blues and greens, but those colors tend to be dark and/or desaturated.

Now try entering “Wonderland” as a search term. Here you see more variety in the color themes, and more saturated colors. These themes might work if you want a look that’s lighter or more whimsical. You’ll get similar results if you search for “Art Nouveau.”

The Create section in Adobe Color lets you create your own color themes. You can build them from scratch, from existing themes, or from images you’ve uploaded. When you create them, you can choose from a variety of color harmony rules developed over the years by experts in color theory. These rules are designed to ensure that different color combinations are aesthetically pleasing. (The HTML Color Codes website referenced above has a simple explanation of color harmonies.)

Anyone can build themes in Adobe Color, but you’ll have to be an Adobe user if you want to download them.

Other online color-theming tools include Paletton, Coolors, and ColourLovers. ImageColorPicker.com and HTML Color Codes will show you the color values in any part of an uploaded image. Image Color Extract is an open-source program that can extract colors from an uploaded image and list them in order of frequency.

A closer look at brown

Brown comes in many shades, but the closest we have to an “official” or standard version is the one specified in the ISCC-NBS Color System, originally developed in the 1930s by the Inter-Society Color Council and U.S. National Bureau of Standards. The system consists of 13 basic color categories, including brown, and 267 “Level 3” categories that combine the basic categories in various ways, such as “Light olive brown” and “Strong reddish brown.” The Colour Tools for Painters website has the complete chart of Level 3 categories with their RGB values.

This chart shows the basic ISCC-NBS brown plus other common shades of the color. The appearance of each color will vary depending on the display characteristics of your computer monitor or mobile device.

Observations about brown:

“Brown is solid and dependable, and can be associated with nature depending on the context in which it is used,” writes designer and author Cameron Chapman.

“Brown is a natural color that evokes a sense of strength and reliability,” writes Kendra Cherry, an author and consultant who specializes in educational psychology. “It’s often seen as solid, much like the earth, and it’s a color often associated with resilience, dependability, security, and safety.” However, it “can also create feelings of loneliness, sadness, and isolation,” she writes.

“Brown represents the earth, and it’s a symbol of balance and of nature,” writes color consultant Kate Smith. “Since brown is a warm neutral, it complements and balances a wide range of colors, and its earthiness gives designers the opportunity to play with splashes of more vibrant hues without overwhelming a project.”

In advertising, brown is associated with ruggedness, according to a study by Lauren I. Labrecque & George R. Milne published in the Journal of the Academy of Marketing Science.

We can only speculate about whether any of this has a bearing on steampunk’s popularity.

If you are consciously aiming for a steampunk look, it’s clear that some colors will achieve that goal more than others. But expanding beyond those colors can also help your designs stand apart in ways that some might find appealing.

Disclosure: The author is a paid contributor to Adobe Create, an online magazine from Adobe.