How UX design helps Coolors stand out

Jill Makin
Bootcamp
Published in
11 min readOct 24, 2021

--

When I first heard about user experience writing, I had only the vague notion that it served as a point of intersection between writing and design. As I pulled at that thread, the larger world of user experience design started to unravel before me, and in learning about the strategies and tools involved in crafting an exemplary user experience, I realized that writing and design are thoroughly intertwined.

With greater awareness of UX features, it’s clear that elements of UX design are ubiquitous — in apps, websites, even on hand sanitizer bottles. I started noticing when visuals and copy worked in conjunction and when they were missing or flawed. Instead of thoughtlessly navigating user interfaces, I now appreciate the purposeful execution of ideas that were meant to make the user experience positive and seamless.

While a digital product may be commendable for performing a useful function or providing a relevant service, less tangible elements such as efficiency, flexibility, and intuitive usability can set a product above the rest. Ideally, a product’s primary functionality should merge with a clear, navigable interface. At the center of creating products that embody these features is user experience design, a field that encompasses user research, navigability, interface design, and the messaging and visuals that guide the way a person uses the product.

A digital design product that presents clearly structured features and simple navigation while delivering its primary service is the web application Coolors. Coolors helps users view, create, and save color palettes, which can be added to projects or collections within the app. A wide variety of color code formats can be copied with a single click, allowing designers to apply their chosen colors in other design software programs almost instantly. Other features include evaluating color contrast between text and its background, identifying colors from images, and previewing the impact of different color blindness conditions on the colors in the palette.

Coolors was created by web designer and developer Fabrizio Bianchi, who was inspired to make the app after struggling to find a color palette generator that was not either too basic or too overwhelming. With Coolors, users can circumvent those problems by cultivating color schemes from existing palettes that offer inspiration and an array of customizable features (Stinson). As a designer and the person who continues to maintain and update the site, Bianchi has a vested interest in improving this tool and creating a digital product that makes work (and fun) easier for Coolors users.

In exploring the features that make Coolors unique as a color palette generator, it becomes evident that many of its formal elements in design are inextricably linked with functionality. Diving into certain aspects of the interface may seem at times like evaluating the explicit functions of Coolors, but those UI features often contribute to a positive user experience because they are the means by which a user accesses a tool, and pleasing visuals contribute to its ease of use. When the purpose of the app can be delivered to users in a well-made interface, it becomes increasingly convenient, efficient, or unexpected, all of which can be conflated with the innovativeness of the product concept rather than its design.

Still, Coolors stands out because it is both a useful product and a well-designed one, and when a user is able to focus more on using the product than on how it appears, UX principles have worked well. Exploring the minute details of UX design in this digital product demonstrates the impact of the little things and delineates the process of function translating directly into form. The user actions described below highlight examples from all of UX design, including interface design, microcopy, and navigability, that culminate in a productive and entertaining user experience within Coolors.

Confirm your email with a color code.

From the moment you sign up with a Coolors account (which is not required to use the site), the app takes an unexpected approach to guiding you through email address confirmation. Coolors breaks away from what is typically a boring and bothersome task by using a color code to confirm the user’s email, which contributes positively to the user experience by reminding users of the app’s purpose and giving them a surprise. For designers, this aspect of creating an account may help them feel more intimately connected to the product because they already work with colors and their codes on a regular basis. It’s also a lot more fun to enter a color code on the website because the corresponding color then pops up.

An account confirmation email that says “Confirm by using this color code” with a hex color code below.
A “Confirm your email” page with the hex color code from the email pasted in.

Enjoy clear and concise copy in the tutorial.

The look and feel of user interfaces get a lot of attention when it comes to how they shape the user experience, but content strategy and interface copy play a significant role in guiding the user through different features. In the case of the image below, Coolors offers succinct instructions for using the color palette generator and explains how to make the most of the palettes’ customizability in a few brief sentences. The opening line appeals to what users may already be thinking about as they take in the existing palettes; given that a palette or color may have caught their eye right away, the initial question of “Like a color?” uses colloquial language to acknowledge users’ first impressions early on in their experience with Coolors.

Without the detail provided in the written instructions below, it might take longer for some users to figure out how to keep their favorite colors in the palette while changing the others to find the best complements. Since learnability and efficiency are both crucial considerations for effective UX design, this brief explanation could have a significant impact on how quickly users learn to navigate Coolors, and most importantly, whether they are satisfied enough to return. Being aware of what the features are and how to use them can lead users to a more favorable view of the product.

A tutorial slide that says “Like a color? Click on the lock icon to keep it. Now only the best matching colors are picked.”

Instantly copy a color’s code.

Even if you don’t need to generate palettes and have no interest in saving them to collections or using Coolors regularly, the most immediate function within Coolors will still be a great feature for working on anything related to design. This is perhaps the best example of form following function; while viewing any palette, a color’s hex code can be copied with a single click. The interface copy then switches from the color code to “Copied!” to let the user know they have added the code to their clipboard. This microcopy is highly effective for confirming the result of a user’s action.

This feature doesn’t require an account and can be used immediately, making it nearly seamless to copy color codes that are then applied in Figma, Sketch, Adobe XD, or other design platforms. The ease of transferring a chosen color from the web app directly to a design project makes Coolors useful to design professionals and other creative users.

A color palette with beiges and greens.
A color palette with the text “Copied!” over the darkest green shade indicating that the user has copied the hex code by clicking on the color.
A “View palette” window with color codes in other formats for each color.

When viewing palettes, the round dot in the palette colors is a simple indicator of which color is currently selected. When it shifts between light and dark colors, the dot switches from black to white so as to appear in stark contrast against the color. As the user’s mouse hovers over the other colors, a greyed-out dot appears, inviting the perception of clickability and demonstrating clearly that those colors can be selected as well. The initial selection remains in place even as the user is invited to click elsewhere, mitigating any uncertainty as to which color is currently selected. This greying-out effect also appears as the mouse moves between the variety of color codes, which intuitively indicates that user action is possible there and another function is available. The clarity of the interface lends favor towards the function because the two are deeply integrated and appear as one to the end user. The copying of any desired color code type for the selected color can be accomplished with a single click, and in palette viewing mode, that action is prompted with the words “Click to copy” as the mouse moves over each code. Those three words communicate unequivocally both what the user will receive and how to get it. All of these features are minute details that make the functions clearer and help the user understand what different inputs can do.

Organize your saved palettes.

This feature, which allows users to name a palette, add tags, edit the colors, and save it to a project or collection, is notable for the layered interface that pops up. With so many potential actions, the division into the four tabs seen below (Info, Colors, Projects, and Collections) makes it far easier to use the features you actually need without having to scroll past others; with this interface, the user can see all of the available options under the selected tab at once. The user only needs to switch to the other tabs if they want to make changes beyond saving the palette with a name. This layout is designed well because it does not flood the end user with too much content, but it still contains plenty of customizing options.

A “Save palette” window with the option to name and tag the new palette or add it to a project or collection.

Compare hue, brightness, saturation, and temperature changes against the original palette.

The split-palette interface designed to deliver this feature allows for optimal comparison of the original against any changes the user makes. There are two key elements of UX design to consider here, particularly within the context of the function they modify. The adjustment tools on the right allow the user to edit aspects like hue or brightness, and the form — the interface — executes this well in two ways. First, through the newfound duality of the palette, which allows you to see the changes as they are being applied and consider the changes against the original palette. This design is ideal for enabling the user to see how much each change is impacting the overall appearance.

On the right side of the screen, we are given a diverse set of visuals to communicate the settings for hue, saturation, temperature, and other editable elements. There is a number, plus and minus signs, and a bar with a toggle. The bar fills in with color as each aspect is changed. What this does is offer the user numerous ways to visualize the changes and to make edits in increments of varying precision.

This interface is packing a lot of content without appearing noisy and crowded. If there were only the slider bar, the user could become frustrated with the lack of smaller, more incremental adjustments. On the other hand, if there were only numbers, they wouldn’t be able to scale up the edits as quickly, limiting their understanding of how hue or brightness affect the original colors. Since these visual tools are used together as part of the editing function, the end user has lots of flexibility and the chance to gravitate towards their preferences.

A screenshot of the web app Coolors, with the “Palette adjust” sidebar open to edit the hue, saturation, brightness, and temperature of the palette’s colors.

Learn to use Coolors’ icons.

In the generate mode, there is concrete use of visuals in the form of icons, which are listed vertically on each color. Upon first use, it is necessary to hover over them with the mouse to see what they actually do. After a moment, text pops up with a word or two that describe what happens when the icon is clicked. In the example below, a grid icon is revealed to indicate that the user can “View shades” by selecting it.

Without that guidance, a grid icon could correspond to plenty of other actions. At first glance, it could be interpreted as viewing the palette in a grid layout, which has little to do with viewing other shades. This scenario highlights the importance of the accompanying text. Within the context of UX design, the ambiguity of the grid icon’s message demonstrates the precision of language when compared to an approximately equivalent visual, especially when it is placed in a new product that the user has not encountered before. This balance works well for Coolors because there are not so many icons that they can’t be easily learned, and it is possible that even within a few uses, most users would quickly get the hang of them and remember the icons without the help of supplemental microcopy.

A screenshot of the palette generator in Coolors showing colors with icons over them to let the user view shades or lock a color in place.

Export your palettes.

This feature allows users to export their palettes in different ways depending on how they wish to use it. The options in this pop-up are presented visually as grey circles within a white, squarish frame, indicating that they are not a static part of the page and can be selected. Beyond that, they consist of simple, relevant visuals and text that make it easier to determine which option corresponds to a given export option. The combination of microcopy and icons leaves little room for uncertainty as to the meaning of each choice. The set of options below include desirable features such as sharing palettes with others or adding colors in web design with CSS.

A pop-up that says “Export Palette” and allows for exporting via “Copy URL, PDF, Image, CSS, ASE, SVG, Code, and Embed.”

On the whole, Coolors integrates well with existing design programs, and it’s an example of the thoughtful design that goes into a product created by a designer for other designers. Many of its features can be used intuitively, and the information presented in different elements is organized and appropriate within the available space. As a user myself, I never felt that there was too much or too little presented at once, making Coolors easy to understand and learn.

The aesthetic qualities of Coolors could be described as simple, with only three main menu tabs, big, bold fonts, and a colorful interface without animations or other visual distractions. The aesthetic simplicity is not to be confused with lack of complexity within the product; in fact, it’s especially valuable to have a simple interface when there are so many potential customizations and features to uncover. It creates a balance between the two that allows the user to focus on what Coolors does best: colors.

The user experience prowess of Coolors has been summed up by Liz Stinson for Wired: “Coolors isn’t earth-shattering. You can do a quick Google search and find a handful of color generators that provide the same results. The difference is in the details. With a simple interface and an addicting interaction, using Coolors feels less like design work and more like playing a game.”

--

--