Skip to content

Web

Tailwind Config

Extend theme.colors in tailwind.config.js so utilities like bg-brand-500 and text-brand-700 stay aligned with your design system. Spec reference: Documentation.

Open interactive generator →

Starter template

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f5f3ff',
          500: '#7c3aed',
          900: '#4c1d95',
        },
      },
    },
  },
};

Color samples

FAQ

theme.extend.colors vs theme.colors?

Prefer extend so you keep Tailwind’s default palette. Override theme.colors only when you intentionally replace the entire scale.

Arbitrary values vs named keys?

Named keys (bg-brand-500) stay consistent in design reviews. Arbitrary bg-[#7c3aed] is fine for one-offs or CMS content.

Can I copy the syntax chips?

Yes — click the secondary chip to copy platform syntax. HEX and RGB chips copy sRGB values for mockups, design handoff, and ChromaXP tools.

Are RGB and CMYK print-ready?

RGB and CMYK here are computed from HEX for quick reference. For ink and paper, re-check against your print profile or Pantone bridge.