Colors Browser-only processing Updated March 19, 2026

Tailwind Color Export

Generate Tailwind CSS color configuration from your custom colors. Create complete palettes with 100-900 shades for your theme.extend.colors config.

Preview

primary
secondary
accent
Export Configuration
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
    'primary': {
      '100': '#E0E0FC',
      '200': '#C1C2F9',
      '300': '#A1A3F7',
      '400': '#8285F4',
      '500': '#6366F1',
      '600': '#4F52C1',
      '700': '#3B3D91',
      '800': '#282960',
      '900': '#141430',
    },
    'secondary': {
      '100': '#E8DEFD',
      '200': '#D1BEFB',
      '300': '#B99DFA',
      '400': '#A27DF8',
      '500': '#8B5CF6',
      '600': '#6F4AC5',
      '700': '#533794',
      '800': '#382562',
      '900': '#1C1231',
    },
    'accent': {
      '100': '#D3F3DF',
      '200': '#A7E8BF',
      '300': '#7ADC9E',
      '400': '#4ED17E',
      '500': '#22C55E',
      '600': '#1B9E4B',
      '700': '#147638',
      '800': '#0E4F26',
      '900': '#072713',
    },
      },
    },
  },
};

How to Use

  1. Add your brand colors using the color picker
  2. Give each color a meaningful name (e.g., "primary", "brand")
  3. Toggle shade generation for full 100-900 palettes
  4. Preview the generated palettes
  5. Copy the Tailwind config or CSS variables
  6. Paste into your tailwind.config.js file

Use Cases

For dashboards and data-heavy UI

Build clear hierarchy with dependable contrast, semantic tokens, and readable data colors.

For brand palettes and design systems

Create reusable color scales and exports for CSS variables, Tailwind, and documentation handoff.

Glossary Terms

WCAG

Understand contrast levels and accessibility requirements.

OKLCH

Learn perceptual color controls for modern UI systems.

Color Spaces

Compare HEX, RGB, HSL, and OKLCH usage in practice.

Frequently Asked Questions

How do I use this in my Tailwind project? ▼

Copy the generated config and paste it into your tailwind.config.js file. The colors will be available as utility classes like bg-primary-500 or text-accent.

What are the 100-900 shades? ▼

These are automatically generated tints (lighter) and shades (darker) of your base color, following Tailwind's conventions. 500 is the base color.

Can I use CSS variables instead? ▼

Yes! Switch to the CSS tab to get CSS custom properties. You can reference these in Tailwind using var() syntax.

How many colors can I add? ▼

You can add up to 6 custom colors. Each color can optionally generate a full 100-900 palette.

Continue This Workflow

Color Converter

Convert any color format without leaving the page.

Contrast Checker

Check accessibility instantly before design review or launch.

Shadow Generator

Save, share, and export layered shadows ready for production.

Color Name Finder

Turn raw color values into human-readable names quickly.

Learn The Workflow

colors

WCAG contrast guide: AA and AAA rules for UI design

A practical accessibility guide for checking body text, component states, and contrast mistakes before launch.

colors

OKLCH color space guide for modern design systems

Why teams switching from HSL to OKLCH get cleaner scales, steadier contrast outcomes, and a better mental model.