Challenge
Finding the right color palette for your artwork can be challenging. As novice designers we often have a single color in mind or a quality we want to convey such as “warm”, “cold”, etc. However, most of us lack the knowledge of color theory necessary to materialize our vision into a color palette.
Outcome
The outcome of this exploratory project was a color palette recommendation system that responds to user actions such as active color change, text search, and the placement of images on the canvas.
The Process
Understand
Based on user-studies conducted by the Product Managers and Designers on my team, the vision for this project was to create a feed of color palette recommendations inside our popular graphics editor. During this phase I scoped out the techincal feasibility.
Design
Recommendations are received based on three triggers: 1) change of active color, 2) placement of raster images on the canvas, 3) in-app search. Trigger 1 returns palettes that include the active color. When raster images are detected, the objects in the image are extracted (“house”, “mountain”, “grass”, etc.) and used to search for relevant palettes. When the user performs a keyword search in the panel (“forest“, “ocean”, “warm”, “cold”), the most relevant color palettes are returned.
Prototype
The prototype was built as a custom panel inside the graphics editor using modern JavaScript frameworks such as React.js and Redux. Search queries were fulfilled by an elasticsearch cluster on the backend.
