Tailwind CSS Generator

Tailwind CSS Palette Generator

This page provides a Tailwind CSS Palette Generator tool to create custom color palettes easily.

How to Use Tailwind CSS Palette Generator

  1. Choose a base color using the color picker.
  2. Enter a name for your color palette (e.g., primary, brand).
  3. View the generated color palette below.
  4. Click on any color in the palette to copy its hex value.
  5. Use the generated Tailwind CSS configuration in your project.

Generated Palette

Click on a color to copy its hex value

Tailwind Config

Copy this code into your tailwind.config.js file


  module.exports = {
    theme: {
      extend: {
        colors: {
          primary: {
      "50": "#9fe6ff",
      "100": "#8bd2ff",
      "200": "#77beff",
      "300": "#63aaff",
      "400": "#4f96ff",
      "500": "#3B82F6",
      "600": "#276ee2",
      "700": "#135ace",
      "800": "#0046ba",
      "900": "#0032a6",
      "950": "#001e92"
}
        }
      }
    }
  }
Find More Tools