colors.to
Back to #ba55d3

Tailwind CSS Palette

Custom color palette generated from #ba55d3

50#ffffff
100#faf0fb
200#f4e1f8
300#efd1f4
400#e9c2f0
500#e3b3ec
600#dda4e8
700#d695e4
800#d086e0
900#c976dc
950#c166d7

How to Install

1

Open your tailwind.config.js file

Locate the configuration file in your project's root directory.

2

Add the color palette to your theme

Copy the following configuration into your theme's colors section:

module.exports = {
  theme: {
    extend: {
      colors: {
        custom: {
  50: '#ffffff',
  100: '#faf0fb',
  200: '#f4e1f8',
  300: '#efd1f4',
  400: '#e9c2f0',
  500: '#e3b3ec',
  600: '#dda4e8',
  700: '#d695e4',
  800: '#d086e0',
  900: '#c976dc',
  950: '#c166d7',
},
      },
    },
  },
  plugins: [],
}
3

Use the colors in your HTML/JSX

You can now use your custom colors with Tailwind utility classes:

<!-- Background color -->
<div class="bg-custom-500">...</div>

<!-- Text color -->
<p class="text-custom-700">...</p>

<!-- Border color -->
<div class="border-custom-300">...</div>

<!-- Hover states -->
<button class="bg-custom-500 hover:bg-custom-600">...</button>

Alternative: CSS Variables

If you prefer using CSS custom properties, here are the variables:

:root {
--color-custom-50: #ffffff;
--color-custom-100: #faf0fb;
--color-custom-200: #f4e1f8;
--color-custom-300: #efd1f4;
--color-custom-400: #e9c2f0;
--color-custom-500: #e3b3ec;
--color-custom-600: #dda4e8;
--color-custom-700: #d695e4;
--color-custom-800: #d086e0;
--color-custom-900: #c976dc;
--color-custom-950: #c166d7;
}

Individual Color Values

custom-50
#ffffff
custom-100
#faf0fb
custom-200
#f4e1f8
custom-300
#efd1f4
custom-400
#e9c2f0
custom-500
#e3b3ec
custom-600
#dda4e8
custom-700
#d695e4
custom-800
#d086e0
custom-900
#c976dc
custom-950
#c166d7

Learn more about customizing colors in Tailwind CSS