MooseBase
MooseBase
Contact
100% Free - No Signup Required

Free Color Palette Generator

Generate brand color palettes with CSS and Tailwind export

on White
AA
on Black
AA Large

Your Brand Palette

Color Shades

primary

secondary

accent

neutral

highlight

Social Media Preview

Instagram

Your Brand

Sample post preview

f
Facebook

Your Brand Post

:root {
  --primary-50: #FDF2F4;
  --primary-100: #FBE4E8;
  --primary-200: #F6C1CA;
  --primary-300: #EF95A4;
  --primary-400: #E76077;
  --primary-500: #DD2241;
  --primary-600: #BA1C37;
  --primary-700: #96172D;
  --primary-800: #731222;
  --primary-900: #500C18;
  --primary-950: #2C070D;
  --secondary-50: #FFF4F0;
  --secondary-100: #FFE9E0;
  --secondary-200: #FFCBB8;
  --secondary-300: #FFA585;
  --secondary-400: #FF7847;
  --secondary-500: #FF4400;
  --secondary-600: #D63900;
  --secondary-700: #AD2E00;
  --secondary-800: #852300;
  --secondary-900: #5C1900;
  --secondary-950: #330E00;
  --accent-50: #FEFBF0;
  --accent-100: #FEF6E2;
  --accent-200: #FCEBBB;
  --accent-300: #FADC8A;
  --accent-400: #F7CB4F;
  --accent-500: #F4B70B;
  --accent-600: #CD9A09;
  --accent-700: #A67C07;
  --accent-800: #7F5F06;
  --accent-900: #584204;
  --accent-950: #312502;
  --neutral-50: #F6FCF3;
  --neutral-100: #EEF8E7;
  --neutral-200: #D7F0C7;
  --neutral-300: #BBE59F;
  --neutral-400: #98D76F;
  --neutral-500: #71C837;
  --neutral-600: #5FA82E;
  --neutral-700: #4D8825;
  --neutral-800: #3B681D;
  --neutral-900: #294814;
  --neutral-950: #17280B;
  --highlight-50: #FDF6F2;
  --highlight-100: #FBEEE4;
  --highlight-200: #F6D7C0;
  --highlight-300: #F0BA93;
  --highlight-400: #E9985D;
  --highlight-500: #E06F1F;
  --highlight-600: #BC5E1A;
  --highlight-700: #994C15;
  --highlight-800: #753A10;
  --highlight-900: #51280B;
  --highlight-950: #2D1606;
}

Paste this in your stylesheet to use semantic color tokens like var(--primary-500)

Need a Complete Brand?

We design custom logos, websites, and brand identities.

Looking for industry-specific colors? Check out our specialized versions below.

Choose Your Use Case

We've created specialized versions of the Color Palette Generator for different needs.

Restaurant Color Palette

Choose appetizing colors that stimulate hunger and increase orders

For Restaurant and cafe owners

Real Estate Color Palette

Professional colors that build trust with buyers and sellers

For Realtors and property companies

Healthcare Color Palette

Calming, trustworthy colors for medical websites and branding

For Medical practices and healthcare providers

Contractor Color Palette

Strong, reliable colors that convey professionalism and trust

For Contractors and construction companies

Ecommerce Color Palette

Conversion-focused colors that boost sales and build trust

For Online store owners

Tailwind CSS Color Palette

Generate complete Tailwind color configs from a single brand color

For Frontend developers using Tailwind CSS

CSS Variables Color Generator

Create CSS custom properties for design systems and websites

For Web developers wanting semantic color tokens

What's Included

✓
CSS variables export
✓
Tailwind CSS config export
✓
Industry-specific presets
✓
WCAG accessibility checker
✓
Social media color preview
✓
Brand kit download

Why Use Our Color Palette Generator

1

Consistent brand colors across all platforms

2

Developer-ready code exports

3

Accessible color combinations

4

Professional brand identity foundation

Need a Custom Solution?

MooseBase can build custom tools and integrations tailored to your business needs.