Color Compass

🌈 Quickly navigate the color spectrum with designer-focused accuracy

Say goodbye to eyeballing and colour picking randomly from the colour palette! Feed a base colour to this plugin by clicking on an existing element or updating the hex code and clicking 'Update Base Color'. With just one color, get:

1. Tints and shades
2. Saturated and desaturated tones
3. Complementary, split complementary, triadic, analogous and tetradic harmonies
4. Dark mode and light mode themes: background, surface, border, accent and text
5. Random palettes built from harmony recipes for when you want a starting point
6. A blend ramp between your current color and the one before it or a pinned color
7. Set the step count anywhere from 3 to 1000

Choose your color model

OKLCH- Steps look evenly spaced, and every color in a harmony looks about as strong as your base color. This is the default.

HSL- Every color is pushed to full strength, so greens and yellows come out bright and blues come out darker. Bolder, but less even.

LCH- very close to OKLCH but can lean blue.

A transportable swatch library between files

Save the colors you like into custom groups. Click a tab to open that group, click it again to rename it, and drag tabs to put them in the order you want. Drag a swatch onto another tab to move it there. The bookmark next to each palette saves that whole palette into the open group in one click. Everything is stored on your own machine and remains between sessions.

Apply swatches to your canvas

1. Click any swatch to recolor your selection
2. Add a whole palette to the canvas as one auto-layout frame
3. Copy any hex to your clipboard in one click, or click a palette's name to export the whole palette as a hex list, CSS variables, Tailwind colors or JSON
4. Add a palette to your file as Figma variables, with dark and light mode as two modes of one collection (part of the upgrade)

Blend, lock, and explore

1. Blend between any two colors: drop a swatch on the Blend pill, or pin the color you have.
2. Lock any swatches you like in the random, dark mode and light mode palettes and only the rest change when you re-roll.
3. Drag a saved swatch onto another group's tab to move it there, and Undo puts it back exactly where it was.
4. Use the Vision dropdown to see every swatch as someone with colour blindness sees it without affecting the colours

Works in most files

Use the plugin in Figma design, FigJam, Figma Slides and Figma Buzz.

Free vs upgrade

The free version is for exploring color and getting it out of the plugin: every palette in every model, applying any swatch to your selection, copying a palette as a hex list, CSS variables, Tailwind colors or JSON, and one group of saved colors.

A one-off upgrade gives you additional functionality: apply saved palettes or a random, dark, or light palette to a selection, add palettes to the canvas as a frame of swatches, save colors as variables to your file, and save as many swatch groups as you like. Upgrade from inside the plugin whenever you want.

---

♥️ If you have any feedback or suggestions please leave a comment or email me at jaclyntan02@gmail.com.