CSS & Developer Output

Chakra UI Color Exporter

Export a palette for Chakra UI

Color

bg-brand-50

bg-brand-100

bg-brand-200

bg-brand-300

bg-brand-400

bg-brand-500

bg-brand-600

bg-brand-700

bg-brand-800

bg-brand-900

bg-brand-950

Config

// tailwind.config.js
module.exports = {
  theme: { extend: { colors: { brand: {
      "50": "#a8f5ff",
      "100": "#9be7ff",
      "200": "#81ccff",
      "300": "#62abff",
      "400": "#438bff",
      "500": "#236bdd",
      "600": "#0251c1",
      "700": "#003baa",
      "800": "#001f8f",
      "900": "#00006f",
      "950": "#0a0056",
  }}}}}