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