Node-swatch-names NPM

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: CLI

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

Usage: node

You can utilize getColorNames() to generate color names for any hex input. Or use encode() to generate a Photoshop Swatch file in node.

import {getColorNames} from 'node-swatch-names';

const colors = getColorNames(['#59CFF1', '#D2E7EF', '#6F97A8', '#C6A376']);

console.log(color[0]);
// {name: "turquoise-sea", hex: "#59CFF1"}