Tools for creating a color palette

It’s an awkward time to be publishing this article. New ways to define color, most notably OKLCH and OKLAB, are improvements over the what’s been previously available (RGB/Hex/HSL syntax). Unfortunately they’re still too new to have been incorporated into many design tools. For assessing color contrast APCA (Advanced Perceptual Contrast Algorithm) looks to be an improvement over how contrast tools currently work, but this too hasn’t been incorporated into many tools just yet.

Let’s dive in an see what’s currently available.

OKLCH.com

If you do want to work with what is arguably the best color syntax, OKLCH.com offers a decent way to select colors. Alternatively you can use the color selector built into Chrome devtools.

Prism

Prism was created by the design team at GitHub.

In a blog post, the GitHub team list its features:

• Create or import color scales.
• Adjust colors in a perceptually uniform color space (HSLuv).
• Check contrast of color pairs.
• Edit lightness curves across multiple color scales at once.
• Export color palettes to production-ready code (JSON).

UI Colors

UI colors creates different shades from a single color and helpfully shows the colors applied to some example UI elements.

Pika

Pika is a free Mac-only color picker for those moments where you want to steal a color you see on screen.

Supa Palette

If you want to create and manage color palette’s without leaving Figma, Supa Palette is a pretty good choice. Compared to all the free tools in this list, Supa Palete is relatively expensive at $59 for a lifetime license.

Leonardo

Leonardo offers a range of relatively complex color tools.

Coolers

If you don’t know where to start, coolers is a fun tool. It’ll keep showing you different color palettes until you find something you like.

Canva color wheel

The company behind the massively popular Canva design tool provides a free online color wheel for selecting colors.