colors.to
Back to #c71585

Tailwind CSS Palette

Custom color palette generated from #c71585

50#ffffff
100#fcedf3
200#f9dae8
300#f5c8dc
400#f1b6d1
500#eca3c6
600#e790bb
700#e27db0
800#dc69a5
900#d5539a
950#ce3b90

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: '#fcedf3',
  200: '#f9dae8',
  300: '#f5c8dc',
  400: '#f1b6d1',
  500: '#eca3c6',
  600: '#e790bb',
  700: '#e27db0',
  800: '#dc69a5',
  900: '#d5539a',
  950: '#ce3b90',
},
      },
    },
  },
  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: #fcedf3;
--color-custom-200: #f9dae8;
--color-custom-300: #f5c8dc;
--color-custom-400: #f1b6d1;
--color-custom-500: #eca3c6;
--color-custom-600: #e790bb;
--color-custom-700: #e27db0;
--color-custom-800: #dc69a5;
--color-custom-900: #d5539a;
--color-custom-950: #ce3b90;
}

Individual Color Values

custom-50
#ffffff
custom-100
#fcedf3
custom-200
#f9dae8
custom-300
#f5c8dc
custom-400
#f1b6d1
custom-500
#eca3c6
custom-600
#e790bb
custom-700
#e27db0
custom-800
#dc69a5
custom-900
#d5539a
custom-950
#ce3b90

Learn more about customizing colors in Tailwind CSS