pantoner

A comprehensive Pantone color library implemented in Sass, LESS, Stylus, JSON, CSV, YAML, and XML. Contains a total of 3,238 colors from the following sets:

• Coated (-c)
• Uncoated (-u)
• Metallics
• Pastels & Neons (Coated)
• Skin Colors
• Colors of the Year

Demo & Color Reference

Get Started

Installing Pantoner is easy!

Git

git clone https://github.com/jpederson/Pantoner.git

npm

npm install pantoner

bower

bower install pantoner

For CSS Preprocessors

There are currently implementations for Sass, LESS and Stylus. Here are some examples, but there are also example files in each of the preprocessor folders as well.

Sass

All you'll need for this is scss/_pantone.scss and Sass 3.1.0+ (since we're using a custom function).

@import "pantone";

.my-class {
	color: pantone( "519-u" );
	background-color: pantone( "warm-grey-1-c" );
}

Stylus

The function name and parameters are identical to the Sass version, so it's just the syntax differences.

@import "_pantone.styl"

.my-class
  color pantone( "519-u" )

LESS

You'll need less/_pantone.less. The LESS version is implemented in variables. Use the naming convention @pantone-[color-name] to access them - like so:

@import "_pantone.less";

.my-class {
  color: @pantone-519-u;
}

Important: The LESS version is intended for pre-processing - the library of color variables is 82k, so it's not intended to be included in the codebase your users are required to download. Don't be evil, pre-process your LESS stylesheets! :smile:

Data Formats

All the colors are available in the following formats (all are auto-updated when colors are added):

• JSON
• CSV
• YAML
• XML

I promise to never change these filenames or paths, so you could even call them directly on a regular basis to update your color lists as needed.

Contributing

To contribute, you'll need nodejs and Grunt installed. Here's a quick idea to get you started:

# clone the repo locally
git clone https://github.com/jpederson/Pantoner.git

# cd into the folder
cd pantoner

# install/update dependencies
npm install

# start the grunt watch task
grunt

Editing Colors

While grunt is active, it watches the JSON files for changes - then generates updated versions of the color library for Sass, LESS and Stylus. It also simultaneously generates CSV, YAML, and XML files for each of the color sets so the data is available in multiple formats. Since the library uses JSON as the source, you should only edit the files in the json and dev folders - any changes in generated files are very likely to be overwritten the next time a change is made to the JSON.