colors.to
Back to #add8e6

Tailwind CSS Palette

Custom color palette generated from #add8e6

50#ffffff
100#f8fbfd
200#f0f8fa
300#e9f4f8
400#e2f1f6
500#daedf4
600#d3eaf1
700#cbe6ef
800#c4e3ed
900#bcdfeb
950#b5dce8

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: '#f8fbfd',
  200: '#f0f8fa',
  300: '#e9f4f8',
  400: '#e2f1f6',
  500: '#daedf4',
  600: '#d3eaf1',
  700: '#cbe6ef',
  800: '#c4e3ed',
  900: '#bcdfeb',
  950: '#b5dce8',
},
      },
    },
  },
  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: #f8fbfd;
--color-custom-200: #f0f8fa;
--color-custom-300: #e9f4f8;
--color-custom-400: #e2f1f6;
--color-custom-500: #daedf4;
--color-custom-600: #d3eaf1;
--color-custom-700: #cbe6ef;
--color-custom-800: #c4e3ed;
--color-custom-900: #bcdfeb;
--color-custom-950: #b5dce8;
}

Individual Color Values

custom-50
#ffffff
custom-100
#f8fbfd
custom-200
#f0f8fa
custom-300
#e9f4f8
custom-400
#e2f1f6
custom-500
#daedf4
custom-600
#d3eaf1
custom-700
#cbe6ef
custom-800
#c4e3ed
custom-900
#bcdfeb
custom-950
#b5dce8

Learn more about customizing colors in Tailwind CSS