Create Beautiful Color Schemes with Spectrum

We’ve written before about the proliferation of apps that only do one thing, and do it very well. There’s something to be said for simplistic, minimalist tools that you bust out only when you need them, plow through the task, and close them again with blinding efficiency. One of the categories of apps that I find this to be the most true is graphics and design apps. Tools like Photoshop and Illustrator have ruled supreme as workhorse, Swiss Army Knife-style apps for some time, but innovative and well-designed apps are popping up all over that aim to replace single functions from these apps, and they often do it better than the larger programs.

Today we’re going to take a look at Spectrum, which is a beautifully designed app from developer Eigenlogik. Its designed to make it simple to create color palattes in a simple, beautiful interface. Put on your creative hat, and let’s dig in to find out more about how Spectrum works.

Like the article? You should subscribe and follow us on twitter.

Interface

First, take a second to notice the staggering level of visual polish that is exhibited in Spectrum. It’s beautiful enough to make you think color palattes are interesting even if you’ve never thought so before.

Your palette library is the main view.

Your palette library is the main view.

This is the main screen that you’ll see in Spectrum: your palette library. I’ll go more into the functionality in a bit, but notice a few of the gorgeous visual elements. The purple ribbon indicates the palette in which you are currently working. The beautiful wood texture makes your color palettes really pop off the screen. Finally, notice the iconographic nature of the controls in Spectrum. Rather than buttons with text, nearly every function is facilitated by simple icon-based controls.

Edit your palette using the color wheel.

If you click the Edit button on a palette, you’ll be taken to the color wheel, which sports similar icon-based controls.

Functionality

The library controls are fairly straight forward. You can add tags to your palettes, give them names, and then search through your library using the tags or titles. The three buttons on each palette will let you either duplicate, delete, or edit the palette. Let’s take a look at palette editing.

You can also edit the palette by using the Shades and Tints picker.

You can also edit the palette by using the Shades and Tints picker.

When you choose to edit a palette, you are show the color wheel by default. The swatches in your palette are displayed across the top, and the active color is indicated by the faint teal glow underneath it. Colors can be added or removed by using the + and – buttons on the top toolbar. There are a number of different settings you can use with the color wheel. Each color is indicated by a small node on the wheel, and the way these nodes move in relation to each other can be set by using the icons in the lower right corner of the window. You can manipulate the nodes individually in Freeform mode, or get precise color relations by using Monochromatic, Analogous, Complementary, Split Complementary, Equilangular, or Rotation Lock modes. The luminosity can be set using the vertical slider on the right, and as the screenshot above shows, there is an entirely different screen for selecting Shades and Tints.

For more granular control, and more precise, value-based settings that artists and designers are used to, there is a Color Inspector.

The Color Inspector gives you more granular control over your colors.

The Color Inspector gives you more granular control over your colors.

The Color Inspector can be opened by clicking the magnifying glass icon in the top-right corner of the window, and gives you access to the RGB and HSV values of your color. For those users who are proficient in coding, you can find the hex value for your color at the bottom of the Color Inspector, which brings me to the next section of our tour: real world application.

Real World Application

The way the app functions within itself really is nice and stylish, but where Spectrum really shines is in how it can be integrated into your workflow. First, the aforementioned hex code for a color can obviously be copied-and-pasted into HTML/CSS code, for example, or into your art app (Photoshop, perhaps) to use the colors in your designs. Additionally, you can simply click and drag a color from virtually anywhere within Spectrum into a code editor, and the hex key will automatically be inserted into your code.

You’ll also notice that there are a few icons in the Spectrum interface that I haven’t touched on yet. Let’s start with the Camera icon, located adjacent to the Color Inspector icon.

Use the Colors from an Image feature to extract a color palette from an image on your computer.

Use the Colors from an Image feature to extract a color palette from an image on your computer.

The Colors from an Image function lets you use an image from your computer to automatically generate a color palette. Here, I’ve chosen my favorite picture of Theodore Roosevelt fighting Sasquatch. The handles on the rectangle that surrounds the image in the screenshot above can be dragged, which lets you choose a specific portion of an image from which to generate a palette, and the slider along the bottom sets the number of colors in your palette. Once the settings are where you want them, simply click Done and your palette will be generated and added directly to your library.

The icon next to the Camera is the Screen Color Picker. This icon turns your cursor into a magnified color picker and will let you grab a color from anywhere on your computer screen, from an interface element, or even straight from a webpage in your browser.

Finally, the Eye icon next to the + and – buttons is your Preview Palette function. This is a particularly neat feature, as it will let you see how the colors you’re working with will interact together, in various shapes and on various backgrounds.

Preview your palettes in a number of different environments.

Preview your palettes in a number of different environments.

The Preview Palette function is a full screen mode that lets you use the left and right arrow keys on your keyboard to change the shape and layout of your colors (cycling through various arrangements of stripes, circles, flower-like shapes) and the up and down keys to cycle through white, black, light gray and dark gray background colors.

The Verdict

I’m not a world-renowned designer or artist, but the utility that Spectrum provides is clear, and in my opinion can’t be overstated. Its beautiful design makes it easy and enjoyable to use, and the real-world functionality is implemented brilliantly.

The app is a bit on the premium side, price-wise, at $19.99 on the Mac App Store. That said, I imagine that designers and developers who are accustomed to paying hundreds of dollars for powerhouse software like Photoshop might find the utility offered by Spectrum to be well worth the price. That said, we’d love to hear your thoughts in the comments. Is Spectrum’s beautiful design enough to make you tempted to buy it, or is it a bit too premium for a color palatte app for your taste?


Summary

Spectrum is a beautifully designed color palette creator and manager, loaded with useful features for real-world application.

9
  • William Salas

    Loos FANCY.

    yet…

    There is no output for Photoshop, Illustrator, After Effects, In Design.

    Rendering it Null IMHO.

    Kuler is free and doesn’t need no fancy preview environments. It does what it does and that is it. Case closed.

    https://kuler.adobe.com/

    • http://www.eigenlogik.com Eigenlogik

      Hi there,

      I’m the developer of Spectrum. You can, in fact, export color schemes from Spectrum to Photoshop, Illustrator and other Creative Suite apps.

      Spectrum can export to ASE (Adobe Swatch Exchange), CSS, PNG or indeed any custom file format that you can define using the built-in templating language.

      • Ronald Chan

        Oh Snap!

      • William Salas

        Kuler is still free. Snap away as you wish.

    • foljs

      Kuler is free and doesn’t need no fancy preview environments. It does what it does and that is it. Case closed.

      Well, if you are cheap, yes, case closed indeed.

      If you like a good, fast, native app instead of a constrained (just 5 hues? WTF?) web offering though, the case is far from closed.

  • http://itismattadams.com Matt Adams

    Color me impressed! If only it had the ability to output .ACO files, until then I’ll stick with COLOURlovers.

    - Matt

    • http://www.eigenlogik.com Eigenlogik

      Spectrum supports the newer .ASE format which you can use in Adobe’s CS2 or newer.

  • Erica

    I’ve been waiting years for a color app like this! Is there a free trial so that I can try it before I buy?

    • http://www.eigenlogik.com Eigenlogik

      Hi Erica,

      Unfortunately, Apple’s rules prohibit trial versions on the Mac App Store. If they do start allowing them in the future, you can rest assured a trial version of Spectrum will be available.

      The quick tour video on the website attempts to provide a realistic demonstration of what you can expect: http://www.eigenlogik.com/spectrum/tour

  • Tim

    This looks great, however, I am not going to pay $20 for something that I can do just as well and easily for free with other tools.
    Eigenlogik, you need to lower your price for an app this is really only a one trick pony.
    And in fact, if you are already using something like Photoshop or Illustrator, you are already using the best tool for making color schemes. Simply draw several vector shapes next to each other and edit their colors, live, right there, in the app you intend to use them.

    • http://www.eigenlogik.com Eigenlogik

      Hi Tim,

      If all Spectrum did was just allow you to change the colors of a series of swatches, I’d agree with you. However, it does far more than that.

      - You can extract colors from images (using an algorithm that takes into account the subtleties of the human vision system’s perception of color).

      - You can change schemes in lock-step in accordance to color theory rules.

      - You can export your schemes directly to CSS, SCSS, Less, Objective-C, etc.

      - You can capture colors from other apps using the built-in screen loupe.

      - You can define your own custom snippets and templates.

      - You can preview your schemes in fullscreen using different backgrounds and visualizations.

      - You can control the color profile, the type of color wheel, the list goes on…

      So, I’d contest the “one trick pony” characterization. It’s a powertool for designers and developers who want a more specialized color design environment than what their image editor or the free online tools offer.

      Considering the effort that went into the development of Spectrum, and the fact that it’s actively being updated with new features (and all v1.x updates are free), I’d consider it a fair price. (In comparison, the other popular color scheme app retails for $49.99)

  • http://www.pcweenies.com Krishna Sadasivam

    I use Adobe Kuler – it’s free and there’s also a web version should I not be near my Adobe suite. $20 is too much money for an app like Spectrum.

  • oneightyone

    All things aside people, the app is clean, interface looks straightforward, and if you’re looking for a colour app, this does the job; and from the sounds of it, does it well.

    How much is $20 really? Come on. That’s lunch, on a good day. Or a few long-distance phone calls. How can the price be your major complaint? That’s a pretty weak argument. Especially if you’ve never used the app before. (myself included)

    That’s where the trial should come into play. Then we can decide whether it’s worth $20 to us.

  • Viki

    Looks great!!! Can this app work with apps such as Sketchbook pro 6, ArtRage, Painter? Will there be a iOS version?

    • http://www.eigenlogik.com Eigenlogik

      Hi Viki,

      Yes, an iOS version is planned.

      Support for ArtRage and Painter color sets will be available in one of the upcoming updates.

      (In fact, since Painter’s color sets are plain text files, you can already use Spectrum’s built-in templating feature for exporting .pcs files.)

      For apps which don’t support any of the formats exported by Spectrum (ASE, CSS, PNG), there are two options:

      1) If they use the standard OS X color panel, you can directly drag and drop swatches from Spectrum
      2) You can export your scheme as a PNG image and use the app’s built-in color picking tool.

  • http://www.heymonkeydesign.com Lenny Terenzi

    What a bunch of whiny cheapskates. $20 is not too much for an app that has a ton of work put into it. I have Color Schemer and I am still thinking of buying this as the work that was put into is stunning.

    Great work!

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow