Design & Product

Hueshift

March - April 2023

1. Purpose
2. Interface Design
3. User Experience & Testing
4. Try Hueshift.io 🎨 🖼️

Hueshift is a tool that helps you generate harmonious color palettes using a recursive machine learning process.

Often in design, you’ll need to take a color palette and define a set of light to dark steps for each color.

In interface design, these values can be used to create depth and dimension.

One color with a lighter and darker step can be overlaid to produce elements with a monochrome, “single color” look.

It helps you layer related information in a predictable pattern to how colors increase & decrease in lightness & darkness.

Just one color can touch a range of situations, with a clear separation of information.

This predictability can be especially useful when creating light & dark themes. It’s easier to balance your main accent shade against your background & foreground colors when you have steps that feel natural in distance.

It’s also useful when creating subtle shading with a natural feel, while maintaining vibrant readability.

I created Hueshift as a tool to automate this process. It uses a two-stage machine learning process to help you:

• Choose interesting colors that complement each other.
• Automatically generate a set of light to dark shades for each color.

There are no high-fidelity mockups for this project. Hueshift was designed & built directly in React.

Tools used:

• VS Code
• React
• Tailwind CSS
• Affinity Designer (Figure Diagrams & Example References)
• Hueshift (Color Palettes for Figure Diagrams)

Purpose

What I found lacking in similar tools are the methods of generating harmonious colors.

Most tools are limited to either mathematical methods, or manual selection.

I wanted to create a tool that bridged the gap between mathematical precision and the organic artistry of human-selection.

Hueshift recursively generates harmonious colors starting from the base hue.

This method allows for a wider range of generated palettes, with colors that still feel naturally harmonious.

Interface Design

Hueshift takes on an interface that is purposefully form over function.

In a world where UI is reduced to a single chat box, I wanted to take a different approach.

I wanted to imagine an interface that is as engaging & artistically inspiring as it is functional to use.

Inspiration

Inspiration for the palette board came from those wall of swatches inside real-world paint stores.

The palette board attempts to capture the dynamic nature of a real-world swatch wall in a paint store.

Features

Hueshift is highly interactive.

You can click to copy any shade as a hex code.

You can drag & drop rows of swatches to reorder them or toss them out.

Using the sliders, you can adjust the hue of the base color. You can also adjust palette-wide lightness & saturation.

You can generate up to 8 harmonious color swatches in a single palette.

Enable Greytone to generate a greyscale palette.

You can copy rows of swatches as JSON, or copy the entire palette as JSON.

Click the Palettes ⬇️ button to download a palette.json file of all your starred palettes.

{
  "50": "#f2fdfc",
  "100": "#cbfbf6",
  "200": "#98f6ef",
  "300": "#5deae6",
  "400": "#2bd4d2",
  "500": "#14b6b8",
  "600": "#0d9196",
  "700": "#0f7175",
  "800": "#115a5f",
  "900": "#134b4e",
  "950": "#042a2f",
  "hue": 180
}

With Hueshift Pro, you can edit the colors used to influence the model that generates harmonious colors.

If you feel like shades generated are “missing something”, you can add or remove colors to influence the model to generate entirely new shades and palettes.

Hueshift ships with 98 pre-defined color models, with 21 color models enabled by default.

It also ships with 19 greytone models, with 5 greytone models enabled by default.

User Experience & Testing

I conducted light user testing with some designer & marketing friends to see how they used Hueshift and their thoughts on the process provided by the tool.

Testing Process

Feedback was collected through various forms, mainly text messaging and Discord. With a small test group, I wanted to meet people where they were.

I sent around a survey as text that people could easily reply to rather than ask them to fill out a form. I provided an open space for suggestions & comments.

I sent them a succinct set of targeted questions to understand their usage patterns:

1. Did you produce any palettes that you used, or would use in a project?
2. Was there any point you said, “I hope/wonder if Hueshift could do this?” What were trying to do?
3. What did you find cumbersome about the process or interface?
4. What reasons hold you back from using Hueshift in your workflow?

Feedback Summary

“…really fun to play with!”

Through this research, the feature for dragging a row of swatches out of the palette to remove it surfaced. Many people didn’t understand how to get rid of swatches that they didn’t want, and just wanted to “toss them out”.

I also received feedback from basically everyone for one feature:

“Can I generate a palette from an image?”

While this was out of the project scope, it’s a great suggestion for a future release.

Conclusions

In all, most found the process mostly intuitive and easy to navigate. However, no designers really mentioned they’ll actually use the tool. The honest feedback I received was picking colors manually in-app was just quicker and easier than using a totally separate tool.

With that said, my marketing friends were very excited about its potential, but it was still just a bit too hands-on for them.

I would like to revisit this project and incorporate the feedback I received. I think making the process even more streamlined would help increase the tool’s usability and get people to actually adopt it.

Try Hueshift.io 🎨 🖼️

Embedded below ⬇️ or at beta.hueshift.io (best viewed in a separate tab).

Tips:

• Click the Help button to open the Help Guide.

• Switch your system color scheme to see light and dark modes.

• Click Upgrade to Pro to unlock the Full Version of the app (it’s free).

📚 Book a meeting to discuss your project. ➔

👋🏼alfred.r.duarte@gmail.com Message Copy