DEV Community

楊東霖
楊東霖

Posted on • Originally published at devplaybook.cc

Best Color Palette Tools for Developers and Designers in 2025 (Free & Paid)

#webdev #programming #productivity #devtools

Picking the right colors for a project takes longer than it should. You need palettes that look good, meet contrast requirements, work as design tokens, and don't require a full-time designer to maintain.

These tools solve different parts of that problem. Here's what works, what doesn't, and how to actually use them in a development workflow.

Why Developers Need Color Palette Tools

You're building a dashboard, SaaS app, or landing page. You need:

  1. A primary brand color that works across backgrounds
  2. Semantic color tokens: success (green), warning (yellow), error (red), info (blue)
  3. Neutral/gray scale: backgrounds, borders, text, muted text
  4. Dark mode variants: every color needs to work on both light and dark backgrounds
  5. Accessible contrast ratios: WCAG AA requires 4.5:1 for normal text, 3:1 for large text

Doing this from scratch takes hours. Good tools get you 80% of the way there in minutes.

1. Coolors — The Quickstart Generator

Best for: Generating initial palette ideas quickly

Coolors is the most popular palette generator. Press spacebar, get a new 5-color palette. Lock colors you like, regenerate the rest.

Features:

  • Generate, lock, and shuffle colors
  • Adjust saturation, brightness, temperature
  • Export as CSS, SCSS, or hex values
  • Generate complementary/analogous/triadic palettes
  • Color contrast checker built-in

How to use it as a developer:

/* Export from Coolors as CSS custom properties */
:root {
  --primary-50: #EEF2FF;
  --primary-500: #6366F1;
  --primary-900: #312E81;
}
Enter fullscreen mode Exit fullscreen mode

Limitation: 5-color palettes are great for mood boards, but you need 10-step scales (50, 100, 200...900) for design system work. Coolors doesn't generate those automatically.

2. Radix Colors — Production-Ready Semantic Palettes

Best for: Building accessible UI components with consistent scales

Radix Colors (from the team behind Radix UI) provides 30+ meticulously crafted color scales, each with 12 steps:

Step Purpose
1-2 App backgrounds
3-4 Subtle backgrounds
5-6 UI element backgrounds
7-8 Borders, separators
9-10 Solid backgrounds
11-12 Text

Every scale works in both light and dark mode. The contrast ratios are pre-calculated. You get CSS custom properties, Tailwind config, and figma files.

Installation:

npm install @radix-ui/colors
Enter fullscreen mode Exit fullscreen mode 
/* Use Radix color scales in CSS */
@import '@radix-ui/colors/blue.css';
@import '@radix-ui/colors/blue-dark.css';

.button {
  background: var(--blue-9);  /* Solid blue, AA compliant */
  color: white;
}

.button:hover {
  background: var(--blue-10);
}
Enter fullscreen mode Exit fullscreen mode

Tailwind integration:

// tailwind.config.js
const { blue, gray } = require('@radix-ui/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          1: blue.blue1,
          // ... etc
          9: blue.blue9,
        }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Best for: Any project using Radix UI components, or teams that want a mathematically consistent color system.

3. shadcn/ui Theme Generator

Best for: Projects using shadcn/ui or similar component libraries

shadcn/ui's built-in theme system uses CSS variables mapped to semantic names: --background, --foreground, --primary, --secondary, --muted, --accent, etc.

The official theme generator lets you pick a base color and generates a complete CSS variable set for both light and dark mode.

Generated output looks like:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    /* ... */
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    /* ... */
  }
}
Enter fullscreen mode Exit fullscreen mode

Usage:

  1. Go to ui.shadcn.com/themes
  2. Pick your primary and secondary colors
  3. Copy the generated CSS into your globals.css

This is the fastest path to a complete, dark-mode-ready color system for shadcn/ui projects.

4. Tailwind CSS Color Generator

Best for: Tailwind projects that need custom brand colors matching Tailwind's scale format

Tailwind's built-in colors use a 50-900 scale. If your brand color is #FF6B2B, you need matching shades from 50 (very light) to 900 (very dark). Doing this manually is tedious.

Recommended tools:

uicolors.app: Enter any hex, get a full Tailwind-format palette. Shows contrast ratios and WCAG compliance for each step.

tints.dev: Another Tailwind-specific palette generator with live preview.

Output format:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#FFF4EE',
          100: '#FFE4CC',
          200: '#FFC999',
          300: '#FFAD66',
          400: '#FF9133',
          500: '#FF6B2B',  // Your base color
          600: '#CC5522',
          700: '#993F1A',
          800: '#662A11',
          900: '#331508',
          950: '#1A0A04',
        }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

5. Realtime Colors — Preview in Context

Best for: Checking how palettes look in real UI before committing

Realtime Colors shows your color choices applied to an actual web layout in real time. Instead of staring at swatches, you see how your palette looks on a nav, hero section, cards, and buttons.

Why it matters: A palette that looks great as abstract swatches can look terrible in context. Too much contrast, wrong proportions, or colors that clash in UI elements.

Features:

  • Live UI preview with your colors applied
  • Export as CSS variables, Tailwind config, or JSON
  • Dark mode toggle

  • Font pairing suggestions

  • realtimecolors.com

  • Free

6. Huemint — AI-Powered Palette Generation

Best for: Getting unstuck when standard generators aren't giving you what you want

Huemint uses machine learning to generate palettes based on specified relationships (brand, background, foreground, etc.). You define the role each color plays, and it generates coordinated options.

Useful when:

  • You know your brand primary color but can't find complementary colors
  • You want something less generic than Coolors' output

  • You're exploring different aesthetic directions

  • huemint.com

  • Free

7. ColorBox by Lyft Design

Best for: Generating accessible, perceptually-uniform color scales

ColorBox (open-sourced by Lyft) generates 10-step color scales with perceptual uniformity — meaning each step looks equally different from the last, which isn't always true with simple lightness adjustments.

This matters for:

  • Charts where color progression needs to be readable
  • Data visualization

  • Design systems requiring predictable color behavior

  • colorbox.io

  • Free, open source

Building a Complete Color System for a Web App

Here's a practical workflow combining these tools:

Step 1: Establish your brand primary

Start with your brand color. If you don't have one, pick something from Coolors or let Huemint suggest options.

Step 2: Generate full scales

Use uicolors.app or tints.dev to generate the full 50-900 scale for your primary. Also generate scales for:

  • A neutral/gray (for backgrounds, borders, text)
  • Success (green)
  • Warning (amber/yellow)
  • Error (red)
  • Info (blue)

Step 3: Map to semantic tokens

Create CSS custom properties with semantic names, not just numeric scales:

:root {
  /* Scales */
  --blue-500: #3B82F6;
  --green-500: #22C55E;
  --red-500: #EF4444;

  /* Semantic tokens */
  --color-primary: var(--blue-500);
  --color-success: var(--green-500);
  --color-error: var(--red-500);

  /* Surface tokens */
  --bg-page: #FFFFFF;
  --bg-card: #F9FAFB;
  --border-default: #E5E7EB;

  /* Text tokens */
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
}

.dark {
  --bg-page: #0F172A;
  --bg-card: #1E293B;
  --border-default: #334155;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Verify contrast

Use the contrast checker at webaim.org/resources/contrastchecker or Coolors' built-in checker to verify WCAG compliance for your text/background combinations.

Minimum requirements:

  • Normal text (< 18px): 4.5:1
  • Large text (≥ 18px or bold ≥ 14px): 3:1
  • UI components (buttons, inputs): 3:1

Step 5: Test in dark mode

Don't assume light mode colors invert nicely. Test every semantic token in dark mode explicitly.

Quick Comparison

Tool Best Use Case Output Formats Free?
Coolors Palette ideation CSS, SCSS, hex Yes
Radix Colors Accessible UI scales CSS vars, Tailwind Yes
shadcn/ui themes shadcn projects CSS vars Yes
uicolors.app Tailwind scale from brand color Tailwind config Yes
Realtime Colors Preview in UI context CSS vars, Tailwind Yes
Huemint AI-assisted palette gen CSS vars Yes
ColorBox Perceptually-uniform scales Various Yes

Find more free developer tools at DevPlaybook.cc, including a CSS Gradient Generator, Color Picker, and 15+ other tools for daily development work.

Level Up Your Dev Workflow

Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.

🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.

Top comments (0)