https://github.com/czebe/node-swatch-names
Swatch-names
https://github.com/czebe/node-swatch-names
aco color generate name photoshop swatch
Last synced: 7 months ago
JSON representation
Swatch-names
- Host: GitHub
- URL: https://github.com/czebe/node-swatch-names
- Owner: czebe
- License: mit
- Created: 2017-10-16T15:48:35.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-21T10:40:13.000Z (almost 8 years ago)
- Last Synced: 2025-02-21T12:03:42.599Z (7 months ago)
- Topics: aco, color, generate, name, photoshop, swatch
- Language: JavaScript
- Homepage:
- Size: 704 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Swatch-names
[](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
## 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 © [Marton Czebe](https://github.com/czebe)