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