Tailwind Color Palette Generator

Enter a base hex color to generate a `50-950` scale and a ready-to-use `tailwind.config.ts` snippet.

#6366F1

White 1.12:1 / Black 18.74:1 Recommended: Black text (AAA)

50

#FAEEFF

White 1.28:1 / Black 16.45:1 Recommended: Black text (AAA)

100

#F0DDFC

White 1.68:1 / Black 12.49:1 Recommended: Black text (AAA)

200

#D9BCF7

White 2.27:1 / Black 9.27:1 Recommended: Black text (AAA)

300

#BC9DF4

White 3.14:1 / Black 6.69:1 Recommended: Black text (AA)

400

#9780F2

White 4.47:1 / Black 4.70:1 Recommended: Black text (AA)

500

#6366F1

White 5.66:1 / Black 3.71:1 Recommended: White text (AA)

600

#5256DB

White 7.18:1 / Black 2.93:1 Recommended: White text (AAA)

700

#4047C5

White 9.13:1 / Black 2.30:1 Recommended: White text (AAA)

800

#2C38B0

White 11.45:1 / Black 1.83:1 Recommended: White text (AAA)

900

#142A9B

White 12.73:1 / Black 1.65:1 Recommended: White text (AAA)

950

#002391

tailwind.config.ts snippet

// tailwind.config.ts
import type { Config } from "tailwindcss";

export default {
  theme: {
    extend: {
      colors: {
        brand: {
      50: "#FAEEFF",
      100: "#F0DDFC",
      200: "#D9BCF7",
      300: "#BC9DF4",
      400: "#9780F2",
      500: "#6366F1",
      600: "#5256DB",
      700: "#4047C5",
      800: "#2C38B0",
      900: "#142A9B",
      950: "#002391",
        },
      },
    },
  },
} satisfies Config;