colors.to
Back to #ff1493

Tailwind CSS Palette

Custom color palette generated from #ff1493

50#ffffff
100#ffeff5
200#ffdeea
300#ffcee0
400#ffbdd6
500#ffaccc
600#ff9ac3
700#ff87b9
800#ff73af
900#ff5da6
950#ff429c

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: '#ffeff5',
  200: '#ffdeea',
  300: '#ffcee0',
  400: '#ffbdd6',
  500: '#ffaccc',
  600: '#ff9ac3',
  700: '#ff87b9',
  800: '#ff73af',
  900: '#ff5da6',
  950: '#ff429c',
},
      },
    },
  },
  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: #ffeff5;
--color-custom-200: #ffdeea;
--color-custom-300: #ffcee0;
--color-custom-400: #ffbdd6;
--color-custom-500: #ffaccc;
--color-custom-600: #ff9ac3;
--color-custom-700: #ff87b9;
--color-custom-800: #ff73af;
--color-custom-900: #ff5da6;
--color-custom-950: #ff429c;
}

Individual Color Values

custom-50
#ffffff
custom-100
#ffeff5
custom-200
#ffdeea
custom-300
#ffcee0
custom-400
#ffbdd6
custom-500
#ffaccc
custom-600
#ff9ac3
custom-700
#ff87b9
custom-800
#ff73af
custom-900
#ff5da6
custom-950
#ff429c

Learn more about customizing colors in Tailwind CSS