Comprehensive Pantone color library implemented in Sass, LESS, Stylus, JSON, CSV, YAML, and XML.

Downloads in past


1.1.29 years ago9 years agoMinified + gzip package size for pantoner in KB


Pantoner GitHub version
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 clone

npm NPM version

npm install pantoner

bower Bower version

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.


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" );


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

  color pantone( "519-u" )


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.


To contribute, you'll need nodejs and Grunt installed. Here's a quick idea to get you started:
# clone the repo locally
git clone

# cd into the folder
cd pantoner

# install/update dependencies
npm install

# start the grunt watch task

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.
Built with Grunt