postcss-color-cc-palette

PostCSS plugin to convert an Adobe Color CC URL to SASS color values

Usage no npm install needed!

<script type="module">
  import postcssColorCcPalette from 'https://cdn.skypack.dev/postcss-color-cc-palette';
</script>

README

Note: This is still under active development!

Color CC Palette for PostCSS

A PostCSS plugin to create SASS-like color variables based on an Adobe Color CC palette URL.

The Adobe Color CC tool (at https://color.adobe.com) can be used to create palettes using a color wheel.

Once created, it can be made available via the Marketing Cloud - this is useful for designing graphics, but what about use in a style sheet? There isn't an easy way to export the values; this PostCSS plugin will take a Color CC URL and return SASS variables that represent the colors of your palette.

Installation

Enter this command into a Node.js command prompt:

npm install postcss-color-cc-palette --save-dev

Usage

The plugin can be referenced in Gulp using this example code:

Code to follow...

Input

Add a rule to your code that contains the Color CC url, such as this example:

#url {
  content: "https://color.adobe.com/create/color-wheel/?copy=true&base=2&rule=Triad&selected=0&name=Copy%20of%20Taupe&mode=rgb&rgbvalues=0.5117647171020507,0.4559572206288501,0.359224226741925,0.5918253479903853,0.843137264251709,0.6988034991830846,0.8117647171020508,0.7529411911964586,0.6509804129600525,0.5373702727493649,0.42941746491123256,0.6117647171020508,0.4599704491887691,0.3848124625970275,0.5117647171020507&swatchOrder=0,1,2,3,4";
}

To do:

  • Add an option to override the color variable name

If you would like to see a feature added, please let me know via the Issues section; pull requests always welcome!