Color Compass

a color navigator for Figma
Color Compass

Quickly navigate the color spectrum with designer-focused accuracy.

Instead of eyeballing and colour picking randomly from the entire spectrum, simply feed a base colour to this plugin to generate tints, shades, tones, and complementary colours.

Increase or decrease the step value to hone in on the exact shade you want.

Experiment with different swatches and update elements on the canvas directly from the plugin.


I’ve used a lot of art and design tools over the years but always felt that navigating colour in these programs were a disappointing and lacklustre experience.

Colour management and palette building is usually a pretty big weakness of mine. I don’t like playing guessing games with colours and it is easy for me to spend excessive amounts of time trying to correct colours by randomly colour picking on the fly. This is made harder by the fact that ambient light can affect the colours on a monitor, which makes it increasingly harder to spot differences between warm and cool shades.

As I was working on projects and designing with code as I often do, I attempted to create the colour navigator I’d always envisioned for a design tool.

Features

  • Navigating different colours is mathematically accurate
  • Update elements on the canvas directlyfrom the plugin quickly and efficiently
  • Enter a custom hex code to update the plugin’s active colour if no element is selected. By default the plugin will use the fill from the selected element first.
  • Copy the hex code from the plugin by clicking on the clipboard icon
  • Keep clicking on Update to generate random colour palettes based on the active colour.
  • Click on the plus button next to a palette label to add the swatches to your document.
  • This plugin will work on any element that is able to display a solid fill, stroke, or background

Building a palette

 

View the source code

If you want to view the source code, click here. And if you have any feature requests or bugs please submit an issue on GitHub.

 

Try it yourself

Click here to view and install the plugin.


See all projects