Variables Import by Chroma

About this plugin

Chroma, the ninja color palettes and shades generator!

Supported exports to Figma, Tailwind CSS, SCSS and CSS.

Visit https://www.chroma.ninja and create or choose a color palette to copy the variables or download.

Generated Sample Code:

{
 "Colors": {
  "Primary": {
     "--color-primary-50": {"$type": "color", "$value": "#F8F4F8"},
     "--color-primary-100": {"$type": "color", "$value": "#F0EAF1"},
     "--color-primary-200": {"$type": "color", "$value": "#DACADB"},
     "--color-primary-300": {"$type": "color", "$value": "#C3ABC6"},
     "--color-primary-400": {"$type": "color", "$value": "#976B9B"},
     "--color-primary-500": {"$type": "color", "$value": "#6A2C70"},
     "--color-primary-600": {"$type": "color", "$value": "#5F2865"},
     "--color-primary-700": {"$type": "color", "$value": "#401A43"},
     "--color-primary-800": {"$type": "color", "$value": "#301432"},
     "--color-primary-900": {"$type": "color", "$value": "#200D22"},
     "--color-primary-950": {"$type": "color", "$value": "#150916"}
  },
  "Secondary": {
     "--color-secondary-50": {"$type": "color", "$value": "#FBF5F7"},
     "--color-secondary-100": {"$type": "color", "$value": "#F8EBEF"},
     "--color-secondary-200": {"$type": "color", "$value": "#EDCED7"},
     "--color-secondary-300": {"$type": "color", "$value": "#E3B1BF"},
     "--color-secondary-400": {"$type": "color", "$value": "#CD768E"},
     "--color-secondary-500": {"$type": "color", "$value": "#B83B5E"},
     "--color-secondary-600": {"$type": "color", "$value": "#A63555"},
     "--color-secondary-700": {"$type": "color", "$value": "#6E2338"},
     "--color-secondary-800": {"$type": "color", "$value": "#531B2A"},
     "--color-secondary-900": {"$type": "color", "$value": "#37121C"},
     "--color-secondary-950": {"$type": "color", "$value": "#250C13"}
  },
  "Tertiary": {
     "--color-tertiary-50": {"$type": "color", "$value": "#FEF9F7"},
     "--color-tertiary-100": {"$type": "color", "$value": "#FEF3EF"},
     "--color-tertiary-200": {"$type": "color", "$value": "#FBE2D7"},
     "--color-tertiary-300": {"$type": "color", "$value": "#F9D0BE"},
     "--color-tertiary-400": {"$type": "color", "$value": "#F5AD8E"},
     "--color-tertiary-500": {"$type": "color", "$value": "#F08A5D"},
     "--color-tertiary-600": {"$type": "color", "$value": "#D87C54"},
     "--color-tertiary-700": {"$type": "color", "$value": "#905338"},
     "--color-tertiary-800": {"$type": "color", "$value": "#6C3E2A"},
     "--color-tertiary-900": {"$type": "color", "$value": "#48291C"},
     "--color-tertiary-950": {"$type": "color", "$value": "#301C13"}
  },
  "Warning": {
     "--color-warning-50": {"$type": "color", "$value": "#FFFEF8"},
     "--color-warning-100": {"$type": "color", "$value": "#FEFDF0"},
     "--color-warning-200": {"$type": "color", "$value": "#FEFBDA"},
     "--color-warning-300": {"$type": "color", "$value": "#FDF8C3"},
     "--color-warning-400": {"$type": "color", "$value": "#FBF296"},
     "--color-warning-500": {"$type": "color", "$value": "#F9ED69"},
     "--color-warning-600": {"$type": "color", "$value": "#E0D55F"},
     "--color-warning-700": {"$type": "color", "$value": "#958E3F"},
     "--color-warning-800": {"$type": "color", "$value": "#706B2F"},
     "--color-warning-900": {"$type": "color", "$value": "#4B4720"},
     "--color-warning-950": {"$type": "color", "$value": "#322F15"}
  }
 }
}