colors.to
Back to #4682b4

Tailwind CSS Palette

Custom color palette generated from #4682b4

50#ffffff
100#eff3f8
200#dfe7f1
300#cfdbea
400#bed0e4
500#aec4dd
600#9eb9d6
700#8eaecf
800#7da2c8
900#6c98c2
950#5a8dbb

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: '#eff3f8',
  200: '#dfe7f1',
  300: '#cfdbea',
  400: '#bed0e4',
  500: '#aec4dd',
  600: '#9eb9d6',
  700: '#8eaecf',
  800: '#7da2c8',
  900: '#6c98c2',
  950: '#5a8dbb',
},
      },
    },
  },
  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: #eff3f8;
--color-custom-200: #dfe7f1;
--color-custom-300: #cfdbea;
--color-custom-400: #bed0e4;
--color-custom-500: #aec4dd;
--color-custom-600: #9eb9d6;
--color-custom-700: #8eaecf;
--color-custom-800: #7da2c8;
--color-custom-900: #6c98c2;
--color-custom-950: #5a8dbb;
}

Individual Color Values

custom-50
#ffffff
custom-100
#eff3f8
custom-200
#dfe7f1
custom-300
#cfdbea
custom-400
#bed0e4
custom-500
#aec4dd
custom-600
#9eb9d6
custom-700
#8eaecf
custom-800
#7da2c8
custom-900
#6c98c2
custom-950
#5a8dbb

Learn more about customizing colors in Tailwind CSS