Generating TailwindCSS Color Palettes

Sometimes you find yourself wanting to use a color palette that is not available in TailwindCSS. You can obviously just create one by hand and figure out the values but if you're like me, you'd rather automate this process.

This is why I developed a handy tool that takes two colors and interpolates the values, generating the exact steps for a common TailwindCSS palette. You can try it out here.

One general use case is to just pick a very light color and a very dark color of similar hue and let the computer do the rest. Copy the output generated in the BaggerUI generator and paste it in your tailwind.config.js file.

This is especially useful when you're working with a fancy design system, like having a primary, secondary or tertiary color palette. Here are is an example of a set of colors you can use as primary color palette:

extend: {
  colors: {
    primary: {
      'DEFAULT': '#3b82f6',
      '50': '#eff6ff',
      '100': '#dbeafe',
      '200': '#bfdbfe',
      '300': '#93c5fd',
      '400': '#60a5fa',
      '500': '#3b82f6',
      '600': '#2563eb',
      '700': '#1d4ed8',
      '800': '#1e40af',
      '900': '#1e3a8a',
      '950': '#172554',
    }
  },
}

Notice how the DEFAULT key is used to define the main color of the palette. Normally you could set one of the middle values as the default color, but in this example I went with a custom value.

Here is another great example of a useful color palette that is sometimes missing when working with a dark mode. The navy color palette:

extend: {
  colors: {
    primary: {
    navy: {
      '50': '#f9fafa',
      '100': '#f3f4f5',
      '200': '#e4e5e9',
      '300': '#d2d4d9',
      '400': '#9ea2ac',
      '500': '#6e717d',
      '600': '#4e535f',
      '700': '#3b404b',
      '800': '#232830',
      '900': '#141821',
      '950': '#0b0e18',
    },
  },
}