Variables Import by Chroma

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"}

}

}

}