colors.to
Back to #1e90ff

Tailwind CSS Palette

Custom color palette generated from #1e90ff

50#ffffff
100#f0f4ff
200#e1eaff
300#d2dfff
400#c2d5ff
500#b2cbff
600#a1c0ff
700#8fb6ff
800#7badff
900#65a3ff
950#4a99ff

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: '#f0f4ff',
  200: '#e1eaff',
  300: '#d2dfff',
  400: '#c2d5ff',
  500: '#b2cbff',
  600: '#a1c0ff',
  700: '#8fb6ff',
  800: '#7badff',
  900: '#65a3ff',
  950: '#4a99ff',
},
      },
    },
  },
  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: #f0f4ff;
--color-custom-200: #e1eaff;
--color-custom-300: #d2dfff;
--color-custom-400: #c2d5ff;
--color-custom-500: #b2cbff;
--color-custom-600: #a1c0ff;
--color-custom-700: #8fb6ff;
--color-custom-800: #7badff;
--color-custom-900: #65a3ff;
--color-custom-950: #4a99ff;
}

Individual Color Values

custom-50
#ffffff
custom-100
#f0f4ff
custom-200
#e1eaff
custom-300
#d2dfff
custom-400
#c2d5ff
custom-500
#b2cbff
custom-600
#a1c0ff
custom-700
#8fb6ff
custom-800
#7badff
custom-900
#65a3ff
custom-950
#4a99ff

Learn more about customizing colors in Tailwind CSS