colors.to
Back to #0000cd

Tailwind CSS Palette

Custom color palette generated from #0000cd

50#ffffff
100#efe8fc
200#dfd1f8
300#cfbaf4
400#bea4f0
500#ad8eeb
600#9b79e7
700#8863e2
800#734edd
900#5c38d8
950#3f21d2

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: '#efe8fc',
  200: '#dfd1f8',
  300: '#cfbaf4',
  400: '#bea4f0',
  500: '#ad8eeb',
  600: '#9b79e7',
  700: '#8863e2',
  800: '#734edd',
  900: '#5c38d8',
  950: '#3f21d2',
},
      },
    },
  },
  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: #efe8fc;
--color-custom-200: #dfd1f8;
--color-custom-300: #cfbaf4;
--color-custom-400: #bea4f0;
--color-custom-500: #ad8eeb;
--color-custom-600: #9b79e7;
--color-custom-700: #8863e2;
--color-custom-800: #734edd;
--color-custom-900: #5c38d8;
--color-custom-950: #3f21d2;
}

Individual Color Values

custom-50
#ffffff
custom-100
#efe8fc
custom-200
#dfd1f8
custom-300
#cfbaf4
custom-400
#bea4f0
custom-500
#ad8eeb
custom-600
#9b79e7
custom-700
#8863e2
custom-800
#734edd
custom-900
#5c38d8
custom-950
#3f21d2

Learn more about customizing colors in Tailwind CSS