colors.to
Back to #87ceeb

Tailwind CSS Palette

Custom color palette generated from #87ceeb

50#ffffff
100#f5fbfd
200#ebf6fb
300#e0f2fa
400#d6edf8
500#cbe9f6
600#c0e4f4
700#b6e0f2
800#aadbf1
900#9fd7ef
950#93d2ed

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: '#f5fbfd',
  200: '#ebf6fb',
  300: '#e0f2fa',
  400: '#d6edf8',
  500: '#cbe9f6',
  600: '#c0e4f4',
  700: '#b6e0f2',
  800: '#aadbf1',
  900: '#9fd7ef',
  950: '#93d2ed',
},
      },
    },
  },
  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: #f5fbfd;
--color-custom-200: #ebf6fb;
--color-custom-300: #e0f2fa;
--color-custom-400: #d6edf8;
--color-custom-500: #cbe9f6;
--color-custom-600: #c0e4f4;
--color-custom-700: #b6e0f2;
--color-custom-800: #aadbf1;
--color-custom-900: #9fd7ef;
--color-custom-950: #93d2ed;
}

Individual Color Values

custom-50
#ffffff
custom-100
#f5fbfd
custom-200
#ebf6fb
custom-300
#e0f2fa
custom-400
#d6edf8
custom-500
#cbe9f6
custom-600
#c0e4f4
custom-700
#b6e0f2
custom-800
#aadbf1
custom-900
#9fd7ef
custom-950
#93d2ed

Learn more about customizing colors in Tailwind CSS