node-swatch-names

Swatch-names

A node tool to save the hassle of naming each color in your project manually.

Swatch-names automatically and consistently names Photoshop color swatches to be shared among frontend developers and designers. Exports colors to SASS and JS variables for use in code. The tool reads standard Photoshop .aco swatch files finds a unique color name for every swatch entry and saves the resulting color palette as an .aco file. This file can be loaded into Photoshop's Swatches so developers and designers use the same color names.

Before/after

Exported variables

You can generate all colors as SASS variables:

// File auto generated by 'swatch-names'. Do not modify this file directly.
$turquoise-sea: '#59CFF1';
$pattens-blue: '#D2E7EF';
$smoky-blue: '#6F97A8';
$outback: '#C6A376';
$ambrosia-salad: '#F4DCD3';
$sunlight: '#ECD7A0';
$pale-prim: '#FBF6A2';
$light-hot-pink: '#FCABDE';

The generated JS looks like this:

// File auto generated by 'swatch-names'. Do not modify this file directly.
export default {
	turquoise_sea: '#59CFF1',
	pattens_blue: '#D2E7EF',
	smoky_blue: '#6F97A8',
	outback: '#C6A376',
	ambrosia_salad: '#F4DCD3',
	sunlight: '#ECD7A0',
	pale_prim: '#FBF6A2',
	light_hot_pink: '#FCABDE',
};

Install

$ npm install node-swatch-names --save-dev

Usage

Start the CLI and progress step-by-step with swatch conversion or setup:

$ ./node_modules/.bin/swatch-names

Specify a swatch file and an output for the result:

$ ./node_modules/.bin/swatch-names --swatch path/to/swatch.aco --output path/to/result.aco

Specify a swatch file, an output and SCSS/JS file to be generated. This is especially useful for watch scripts (use npm-watch or nodemon).

$ ./node_modules/.bin/swatch-names --swatch swatch.aco --output result.aco --scss colors.scss --js colors.js

To convert and process multiple swatch files, simply supply multiple arguments:

$ ./node_modules/.bin/swatch-names --swatch swatch1.aco --swatch swatch2.aco --scss colors.scss --js colors.js

Acknowledgements

This tool was inspired by the following great projects:

• The ACO file format description: http://www.nomodes.com/aco.html
• David LeMieux's excellent aco writer tool: node-aco
• Alvaro Pinot's aco reader tool: aco-reader
• David Aerne's huge collection of color names: color-names

Contributing

PRs are much appreciated!

Use npm run develop while coding and npm run test to run unit tests.

License

MIT © Marton Czebe