Color Resources for UI Designers

Most UI color problems come from not having a proper scale. These tools either give you a scale, help you build one, or help you verify it's accessible.

Tailwind CSS Color System (tailwindcss.com/docs/customizing-colors)

Best for: A reference scale you can use directly or adapt.

Tailwind's color palettes — 22 hues from slate to rose, each in 11 shades (50 through 950) — have become the de facto reference for UI color scales. Even if you're not using Tailwind in code, the naming convention (brand-500, brand-600, etc.) is widely understood across design and engineering teams.

Many design teams import the Tailwind color palette as their base scale and then select which values to use as their semantic tokens. The advantage: your design and engineering teams are speaking the same color language.

Find it at tailwindcss.com/docs/customizing-colors.

Radix UI Colors (radix-ui.com/colors)

Best for: Semantic, accessible color palettes for UI components.

Radix Colors provides 12-step scales for 30 hues, specifically designed for UI contexts. Each step has a defined use case — Step 1-2 for backgrounds, 3-5 for interactive elements, 6-8 for borders, 9-10 for solid color, 11-12 for text. This semantic structure removes guesswork from picking which shade to use where.

All Radix color scales are built to meet WCAG contrast requirements when used according to the step guidelines. They also include automatic dark mode equivalents — each light-mode scale has a matching dark-mode version.

Available as CSS variables you can drop directly into a codebase.

Coolors (coolors.co)

Best for: Generating and exploring color palettes quickly.

Coolors generates random color palettes and lets you lock colors you like while regenerating the rest. Useful for brand palette exploration and finding combinations you wouldn't have reached analytically.

The contrast checker tool shows WCAG compliance for any foreground/background combination. The palette library lets you explore thousands of community-submitted palettes.

Less useful for: building a systematic color scale for a design system. More useful for: early-stage brand color exploration.

Leonardo (leonardocolor.io)

Best for: Building accessible color scales mathematically.

Adobe's Leonardo tool generates color scales that are perceptually uniform — meaning the visual difference between each step is consistent, not just the numeric difference. This solves the common problem of auto-generated scales that look uneven (too light at the top, too dark at the bottom).

You input a base color, a background color, and the contrast ratios you want to hit, and Leonardo generates a scale where every step meets those contrast targets. This is the right tool for building a rigorous, accessible color system from scratch.

Available at leonardocolor.io.

Realtime Colors (realtimecolors.com)

Best for: Testing your color palette on a real UI in the browser.

Realtime Colors puts your color palette onto a sample interface — header, hero, cards, buttons, form inputs — so you can see how the palette feels in context, not just as swatches. You can also generate full CSS variable exports and see the Figma palette link.

The fastest way to check whether a palette works in practice before committing to it.

ColorSlurp (Mac/iOS)

Best for: Sampling, managing, and converting colors on Mac.

ColorSlurp is a color picker and palette manager for Mac and iOS. The magnifier lets you sample any color from anywhere on your screen. Useful for picking colors from reference images, screenshots, or browser-rendered UI.

The contrast checker built into ColorSlurp lets you quickly verify any two colors without opening a separate tool.

Available on the Mac App Store, free with a paid upgrade for advanced features.

Build your palette in Figma

Choosing the right tool

• Starting a new brand palette: Coolors to explore, Tailwind or Radix as a structural reference
• Building an accessible design system scale: Leonardo for generation, Radix as a reference for semantic structure
• Checking contrast quickly: ColorSlurp (Mac), or the Stark plugin in Figma
• Seeing how a palette looks on real UI: Realtime Colors before finalizing anything