node-swatch-names/README.md

Swatch-names automatically and consistently names Photoshop swatches to be shared among frontend developers and designers. Exports colors to SASS variables and JSON for use in code.

<img align="right" src="https://user-images.githubusercontent.com/2728671/32230886-6946c520-be54-11e7-9cf3-8e33a35cb20d.png" width="200" height="269" />

# Swatch-names

[![GitHub release](https://img.shields.io/github/release/czebe/node-swatch-names.svg)](https://github.com/czebe/node-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

<img align="left" src="https://user-images.githubusercontent.com/2728671/32318309-2b6660da-bfb7-11e7-90be-7b1665fcc434.png" />
<img src="https://user-images.githubusercontent.com/2728671/32318310-2b846742-bfb7-11e7-9e1d-f9340d5daafd.png" />

## Exported variables

You can generate all colors as SASS variables:

```scss
// 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:

```javascript
// 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

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

## Usage: CLI

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

```sh
$ ./node_modules/.bin/swatch-names
```

Specify a swatch file and an output for the result:

```sh
$ ./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`).

```sh
$ ./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:

```sh
$ ./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.

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

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

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

## Acknowledgements

This tool was inspired by the following great projects:

- The ACO file format description: http://www.nomodes.com/aco.html
- [David LeMieux](https://github.com/lemieuxster)'s excellent aco writer tool: [node-aco](https://github.com/lemieuxster/node-aco)
- [Alvaro Pinot](https://github.com/alvaropinot)'s aco reader tool: [aco-reader](https://github.com/alvaropinot/aco-reader)
- [David Aerne](https://github.com/meodai)'s huge collection of color names: [color-names](https://github.com/meodai/color-names)


## Contributing

PRs are much appreciated!

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

## License

MIT &copy; [Marton Czebe](https://github.com/czebe)