colors.to
Back to #6a5acd

Tailwind CSS Palette

Custom color palette generated from #6a5acd

50#ffffff
100#f2effb
200#e5dff7
300#d8d0f2
400#ccc0ee
500#beb1ea
600#b1a2e5
700#a493e0
800#9684dc
900#8876d7
950#7968d2

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: '#f2effb',
  200: '#e5dff7',
  300: '#d8d0f2',
  400: '#ccc0ee',
  500: '#beb1ea',
  600: '#b1a2e5',
  700: '#a493e0',
  800: '#9684dc',
  900: '#8876d7',
  950: '#7968d2',
},
      },
    },
  },
  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: #f2effb;
--color-custom-200: #e5dff7;
--color-custom-300: #d8d0f2;
--color-custom-400: #ccc0ee;
--color-custom-500: #beb1ea;
--color-custom-600: #b1a2e5;
--color-custom-700: #a493e0;
--color-custom-800: #9684dc;
--color-custom-900: #8876d7;
--color-custom-950: #7968d2;
}

Individual Color Values

custom-50
#ffffff
custom-100
#f2effb
custom-200
#e5dff7
custom-300
#d8d0f2
custom-400
#ccc0ee
custom-500
#beb1ea
custom-600
#b1a2e5
custom-700
#a493e0
custom-800
#9684dc
custom-900
#8876d7
custom-950
#7968d2

Learn more about customizing colors in Tailwind CSS