color-2-name 1.3.2 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +66 -65
- package/readme.md +274 -274
package/package.json
CHANGED
|
@@ -1,65 +1,66 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "color-2-name",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"author": "Erik <erik@codekraft.it>",
|
|
5
|
-
"description": "Finds the closest color name to a given hex, rgb and hsl color (with and without alpha). It uses the Euclidean distance formula to calculate the distance between colors in the RGB color space",
|
|
6
|
-
"homepage": "https://wp-blocks.github.io/color-2-name/",
|
|
7
|
-
"license": "ISC",
|
|
8
|
-
"type": "module",
|
|
9
|
-
"sideEffects": false,
|
|
10
|
-
"main": "lib/cjs/index.
|
|
11
|
-
"require": "lib/cjs/index.js",
|
|
12
|
-
"import": "lib/esm/index.js",
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"module-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
"
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"color
|
|
39
|
-
"color
|
|
40
|
-
"
|
|
41
|
-
"css
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
"@
|
|
53
|
-
"@rollup/plugin-
|
|
54
|
-
"@rollup/plugin-
|
|
55
|
-
"@
|
|
56
|
-
"@
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"rollup
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
|
|
65
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "color-2-name",
|
|
3
|
+
"version": "1.4.0",
|
|
4
|
+
"author": "Erik <erik@codekraft.it>",
|
|
5
|
+
"description": "Finds the closest color name to a given hex, rgb and hsl color (with and without alpha). It uses the Euclidean distance formula to calculate the distance between colors in the RGB color space",
|
|
6
|
+
"homepage": "https://wp-blocks.github.io/color-2-name/",
|
|
7
|
+
"license": "ISC",
|
|
8
|
+
"type": "module",
|
|
9
|
+
"sideEffects": false,
|
|
10
|
+
"main": "lib/cjs/index.js",
|
|
11
|
+
"require": "lib/cjs/index.js",
|
|
12
|
+
"import": "lib/esm/index.js",
|
|
13
|
+
"types": "lib/@types/index.d.ts",
|
|
14
|
+
"browser": "lib/browser/color-2-name.min.js",
|
|
15
|
+
"unpkg": "lib/browser/color-2-name.min.js",
|
|
16
|
+
"jsdelivr": "lib/browser/color-2-name.js",
|
|
17
|
+
"scripts": {
|
|
18
|
+
"gen-colorSet": "node ./lib/colorSetUtils.mjs colorSet",
|
|
19
|
+
"build": "rimraf lib && concurrently npm:module-*",
|
|
20
|
+
"test": "vitest --coverage",
|
|
21
|
+
"lint": "npx @biomejs/biome lint --apply src",
|
|
22
|
+
"module-tsc": "tsc --declaration --emitDeclarationOnly --outDir lib/@types --rootDir src",
|
|
23
|
+
"module-rollup": "rollup -c"
|
|
24
|
+
},
|
|
25
|
+
"files": ["lib/", "tests/*.ts", "*.json", "*.md", ".gitignore", "LICENSE"],
|
|
26
|
+
"repository": {
|
|
27
|
+
"type": "git",
|
|
28
|
+
"url": "https://github.com/wp-blocks/color-2-name.git"
|
|
29
|
+
},
|
|
30
|
+
"bugs": {
|
|
31
|
+
"url": "https://github.com/wp-blocks/color-2-name/issues"
|
|
32
|
+
},
|
|
33
|
+
"engines": {
|
|
34
|
+
"npm": ">=6.0.0",
|
|
35
|
+
"node": ">=14.0.0"
|
|
36
|
+
},
|
|
37
|
+
"keywords": [
|
|
38
|
+
"color",
|
|
39
|
+
"color names",
|
|
40
|
+
"color-names",
|
|
41
|
+
"css",
|
|
42
|
+
"css colors",
|
|
43
|
+
"accessibility",
|
|
44
|
+
"a11y",
|
|
45
|
+
"hex",
|
|
46
|
+
"rgb",
|
|
47
|
+
"hsl",
|
|
48
|
+
"convert colors",
|
|
49
|
+
"color picker"
|
|
50
|
+
],
|
|
51
|
+
"devDependencies": {
|
|
52
|
+
"@biomejs/biome": "1.7.0",
|
|
53
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
54
|
+
"@rollup/plugin-terser": "^0.4.4",
|
|
55
|
+
"@rollup/plugin-typescript": "^11.1.6",
|
|
56
|
+
"@types/node": "^20.10.6",
|
|
57
|
+
"@vitest/coverage-v8": "^1.5.0",
|
|
58
|
+
"concurrently": "^8.2.2",
|
|
59
|
+
"esbuild": "^0.19.11",
|
|
60
|
+
"rimraf": "^5.0.5",
|
|
61
|
+
"rollup": "^4.14.3",
|
|
62
|
+
"rollup-plugin-node-resolve": "^5.2.0",
|
|
63
|
+
"typescript": "^5.4.5",
|
|
64
|
+
"vitest": "^1.5.0"
|
|
65
|
+
}
|
|
66
|
+
}
|
package/readme.md
CHANGED
|
@@ -1,274 +1,274 @@
|
|
|
1
|
-
# color-2-name
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/color-2-name)
|
|
4
|
-
[](https://github.com/wp-blocks/color-2-name/blob/main/LICENSE)
|
|
5
|
-
[](https://badgen.net/bundlephobia/minzip/color-2-name)
|
|
6
|
-
[](https://github.com/wp-blocks/color-2-name/blob/main/LICENSE)
|
|
7
|
-
[](https://github.com/wp-blocks/color-2-name/actions/workflows/node.js.yml)
|
|
8
|
-
|
|
9
|
-
Find the name of the color given a hex, rgb and hsl string!
|
|
10
|
-
|
|
11
|
-
This package provides a function to find the closest color within an array of colors.
|
|
12
|
-
It uses the Euclidean distance formula to calculate the distance between colors in the RGB color space.
|
|
13
|
-
|
|
14
|
-
### Features:
|
|
15
|
-
|
|
16
|
-
- 🚀 **Fast** - The distance between colors in the RGB color space is provided with the fastest algorithm available (check below)
|
|
17
|
-
- 😎 **Ally** - So that your app is equally useful for everyone
|
|
18
|
-
- 📒 **Well Documented** - Checkout the [documentation](https://wp-blocks.github.io/color-2-name/) with examples, demo and code references
|
|
19
|
-
- 🪶 **Lightweight** - The module WITH the 140 css colors definitions [weights
|
|
20
|
-
- 📦 **Bundled** - Optimized and minified build, with ESM, CJS and iife browser versions available!
|
|
21
|
-
- 💪️ **Typed** - Written in typescript (with types included)
|
|
22
|
-
- 🛡️️ **Tested** - Over 4000 tests (most of all from [wpt](https://github.com/web-platform-tests/wpt/)) with 100% coverage to ensure the full adherence to the css standards
|
|
23
|
-
- 🎈 **No dependencies** - Dependencies tend to have dependencies endlessly, and this can lead to security issues. This is a small module, and it doesn't need anything else!
|
|
24
|
-
|
|
25
|
-
## 🚀 Benchmarks
|
|
26
|
-
|
|
27
|
-
Designed with the performance in mind, it is
|
|
28
|
-
|
|
29
|
-
| Library | <nobr>Operations/sec</nobr>
|
|
30
|
-
|
|
31
|
-
| <nobr><b>[color-2-name](#color-2-name) v1.3.2 🚀</b></nobr> | <nobr>🟢 <b>
|
|
32
|
-
| <nobr>[colord](https://www.npmjs.com/package/colord) v2.9.3</nobr> | <nobr>🔴
|
|
33
|
-
|
|
34
|
-
- The performance results were generated on a common Intel i5 by running `npm run benchmark` in the library folder. See [
|
|
35
|
-
- For the test we are generating 50 random colors to make sure that no internal mechanism is benefited
|
|
36
|
-
- The Size for the `colord` package is meant without the color definitions while `color-2-name` already has everything you need bundled inside
|
|
37
|
-
|
|
38
|
-
## Installation
|
|
39
|
-
|
|
40
|
-
### Module
|
|
41
|
-
|
|
42
|
-
To install the package, run the following command:
|
|
43
|
-
|
|
44
|
-
```
|
|
45
|
-
npm install color-2-name
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
Then you can import or require the color-2-name function e.g. `closest` function from the color-2-name package:
|
|
49
|
-
|
|
50
|
-
```js
|
|
51
|
-
// ESM (import) - tree shakable
|
|
52
|
-
import {closest, distance, rgbToHex} from 'color-2-name';
|
|
53
|
-
closest('hsla(210deg 10% 96%)') // white
|
|
54
|
-
|
|
55
|
-
// CJS (require)
|
|
56
|
-
var color2Name = require("color-2-name")
|
|
57
|
-
color2Name.closest('#abcdef')
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
### Browser
|
|
61
|
-
|
|
62
|
-
To run the script in the browser, add the `color-2-name` add it to the header or footer like below
|
|
63
|
-
|
|
64
|
-
```js
|
|
65
|
-
<script src="https://www.unpkg.com/color-2-name"></script>
|
|
66
|
-
<script>
|
|
67
|
-
// Then the color-2-name module will be available using the following command:
|
|
68
|
-
// You will find the packed script loaded into window.color2name
|
|
69
|
-
closest('#123456') // returns "name" : "midnightblue" , "color" : "rgb(25,25,112)"
|
|
70
|
-
</script>
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
#### The script is available at:
|
|
74
|
-
- [unpkg](https://www.unpkg.com/color-2-name) - https://www.unpkg.com/color-2-name
|
|
75
|
-
- [jsdelivr](https://cdn.jsdelivr.net/npm/color-2-name@latest) - https://cdn.jsdelivr.net/npm/color-2-name@latest
|
|
76
|
-
|
|
77
|
-
---
|
|
78
|
-
|
|
79
|
-
This Package includes the following functions:
|
|
80
|
-
|
|
81
|
-
- [closest()](#closest)
|
|
82
|
-
- [distance()](#distance)
|
|
83
|
-
- [rgbToHex()](#rgbToHex)
|
|
84
|
-
- [isLight()](#isLight)
|
|
85
|
-
- [isDark()](#isDark)
|
|
86
|
-
- [closestRGB()](#closestRGB)
|
|
87
|
-
- [getColor()](#getColor)
|
|
88
|
-
|
|
89
|
-
### 💡closest()
|
|
90
|
-
|
|
91
|
-
Returns the closest color name
|
|
92
|
-
|
|
93
|
-
```js
|
|
94
|
-
// Here is an example of how to use the findClosestColor function:
|
|
95
|
-
const closestColor = closest('#ff8800');
|
|
96
|
-
console.log(closestColor); // { name: 'red', color: 'rgb(255,0,0)' }
|
|
97
|
-
|
|
98
|
-
// You can also use your custom set as comparation
|
|
99
|
-
return closest('#ff8800', [
|
|
100
|
-
[255, 0, 0, 'red'],
|
|
101
|
-
[0, 255, 0, 'green']
|
|
102
|
-
]); // -> { name: 'red', color: 'rgb(255,0,0)' }
|
|
103
|
-
|
|
104
|
-
// Alternatively you can also get the closest color in different color spaces in the following way:
|
|
105
|
-
return closest('#ff00ff', undefined, {info: true});
|
|
106
|
-
// {
|
|
107
|
-
// name: 'magenta',
|
|
108
|
-
// color: 'rgb(255,0,255),
|
|
109
|
-
// hex: '#ff00ff',
|
|
110
|
-
// hsl: 'hsl(300deg 100% 50%)',
|
|
111
|
-
// distance: 0
|
|
112
|
-
// }
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
In this example, the hex color '#ff8800' (which is a shade of orange) is compared to the colors in the colors array. The function returns the object with the name and hex value of the color that is closest to it, which in this case is the
|
|
116
|
-
object for the color red.
|
|
117
|
-
|
|
118
|
-
Arguments:
|
|
119
|
-
|
|
120
|
-
- `color`: a string representing a color, accepts hexadecimal, rgb and hsl with and without alpha channel (e.g. `#ff0000` for hex red).
|
|
121
|
-
- `colors`: (optional) you can provide to this function a custom list of color names to be used (replaces the default)
|
|
122
|
-
- `args`: (optional) an Object that contains setup for this module
|
|
123
|
-
- `args.info`: (optional) set to true to display additional information the found color, like the hex value and the distance from the original
|
|
124
|
-
|
|
125
|
-
**RETURNS** an object with the name and nearest color that is closest to the given color. (eg. `{ name: 'red', color: 'rgb(255,0,0)' }`)
|
|
126
|
-
|
|
127
|
-
---
|
|
128
|
-
|
|
129
|
-
#### 💡distance()
|
|
130
|
-
|
|
131
|
-
Computes the distance between two colors using the euclidean distance formula.
|
|
132
|
-
|
|
133
|
-
```js
|
|
134
|
-
// Here is an example on how get the distance between two colors
|
|
135
|
-
const colorDivergence = distance([120, 255, 200], [255, 255, 255])
|
|
136
|
-
console.log(colorDivergence); // 123.465
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
Arguments:
|
|
140
|
-
|
|
141
|
-
- `rgb1`: an array of values representing rgb of the first color to be compared
|
|
142
|
-
- `rgb2`: an array of values representing rgb of the second color to be compared
|
|
143
|
-
|
|
144
|
-
**RETURNS** the distance between two colors, the maximum distance is >441 and the color is exactly the same when the value is 0
|
|
145
|
-
|
|
146
|
-
---
|
|
147
|
-
|
|
148
|
-
#### rgbToHex
|
|
149
|
-
|
|
150
|
-
Convert a rgb color into hexadecimal color
|
|
151
|
-
|
|
152
|
-
```js
|
|
153
|
-
// note: the rgb value is converted without take into account the alpha channel
|
|
154
|
-
const hex = rgbToHex('rgb(255,255,255)')
|
|
155
|
-
const hex2 = rgbToHex('rgb(255 255 255 / .5)')
|
|
156
|
-
// prints the hex result
|
|
157
|
-
console.log(hex); // #FFFFFF
|
|
158
|
-
console.log(hex2); // #FFFFFF
|
|
159
|
-
```
|
|
160
|
-
|
|
161
|
-
Arguments:
|
|
162
|
-
|
|
163
|
-
- `rgb`: a valid css rgb or rgba value (eg. rgb(1,2,3))
|
|
164
|
-
|
|
165
|
-
**RETURNS** the hex value of the color
|
|
166
|
-
|
|
167
|
-
---
|
|
168
|
-
|
|
169
|
-
#### 💡getColor()
|
|
170
|
-
|
|
171
|
-
search into ColorSet for the given color
|
|
172
|
-
|
|
173
|
-
```js
|
|
174
|
-
// note: the rgb value is converted without take into account the alpha channel
|
|
175
|
-
const white = getColor('white') // {"hex": "#ffffff", "hsl": "hsl(0,0%,100%)", "rgb": "rgb(255,255,255)"}
|
|
176
|
-
const alertColor = getColor('red') // {"hex": "#ff0000", "hsl": "hsl(0,100%,50%)", "rgb": "rgb(255,0,0)"}
|
|
177
|
-
|
|
178
|
-
// prints the hex result
|
|
179
|
-
console.log(alertColor.hsl); // #FFFFFF
|
|
180
|
-
console.log(alertColor.hex); // #FF0000
|
|
181
|
-
console.log("transparent red: " + alertColor.hex + "88"); // #FF000088
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
Arguments:
|
|
185
|
-
|
|
186
|
-
- `colorName`: the name of a color you need find in the colorset
|
|
187
|
-
|
|
188
|
-
**RETURNS** an Object with the color requested converted into hex, rgb and hsl
|
|
189
|
-
|
|
190
|
-
---
|
|
191
|
-
|
|
192
|
-
### Useful (additional) functions
|
|
193
|
-
|
|
194
|
-
#### 💡isLight()
|
|
195
|
-
|
|
196
|
-
Check if the color is light (optically closer to white)
|
|
197
|
-
|
|
198
|
-
#### 💡isDark()
|
|
199
|
-
|
|
200
|
-
Check if the color is dark (optically closer to black)
|
|
201
|
-
|
|
202
|
-
#### 💡closestRGB()
|
|
203
|
-
|
|
204
|
-
returns the closest RGB color
|
|
205
|
-
|
|
206
|
-
Arguments:
|
|
207
|
-
|
|
208
|
-
- `color`: a valid css color string
|
|
209
|
-
|
|
210
|
-
Examples:
|
|
211
|
-
|
|
212
|
-
```js
|
|
213
|
-
// note: the rgb value is converted without take into account the alpha channel
|
|
214
|
-
isLight('#fff') // true
|
|
215
|
-
isDark('#fff') // false
|
|
216
|
-
closestRGB('#FF1234') // red
|
|
217
|
-
```
|
|
218
|
-
|
|
219
|
-
---
|
|
220
|
-
|
|
221
|
-
#### 💡Build your own color set
|
|
222
|
-
|
|
223
|
-
First thing, clone the color-2-name package with `git clone https://github.com/wp-blocks/color-2-name.git` then cd into color-2-name folder.
|
|
224
|
-
|
|
225
|
-
In order to build a color set you need a json object with the following properties:
|
|
226
|
-
- `name` - the name of the color (like "Orange")
|
|
227
|
-
- `color` - the hex color value (like #FFAA00)
|
|
228
|
-
|
|
229
|
-
save it into ./src/data/ as "myNewColorSet.json". the file will contain something like this:
|
|
230
|
-
|
|
231
|
-
```json
|
|
232
|
-
[
|
|
233
|
-
{ "name": "white", "color": "#FFFFFF" },
|
|
234
|
-
{ "name": "black", "color": "#000000" },
|
|
235
|
-
{ "name": "red", "color": "#FF0000" },
|
|
236
|
-
{ "name": "green", "color": "#008000" },
|
|
237
|
-
{ "name": "blue", "color": "#0000FF" }
|
|
238
|
-
]
|
|
239
|
-
```
|
|
240
|
-
|
|
241
|
-
```bash
|
|
242
|
-
# then run the following command
|
|
243
|
-
$ node colorSetUtils.mjs myNewColorSet
|
|
244
|
-
```
|
|
245
|
-
|
|
246
|
-
**RETURNS** A new file called "myNewColorSet.ts" containing the data for this module will be written inside the ./src/data/ folder
|
|
247
|
-
|
|
248
|
-
---
|
|
249
|
-
|
|
250
|
-
### Examples
|
|
251
|
-
|
|
252
|
-
This module is meant to be used in conjunction with React's color picker, so that the color name is shown as you select it. It can also be used in other ways of course, such as to determine whether a color is light or dark (using a custom
|
|
253
|
-
color set with black and white) etc.
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
### Limitations
|
|
258
|
-
|
|
259
|
-
This package uses the Euclidean distance formula to calculate the distance between colors in the RGB color space. While this is a simple and widely used method for comparing colors, it may not always give the most accurate results. In
|
|
260
|
-
particular, it does not take into account the perception of colors by the human eye, which can be affected by factors such as the surrounding colors and the luminance of the colors.
|
|
261
|
-
|
|
262
|
-
### Contributing
|
|
263
|
-
|
|
264
|
-
If you would like to contribute to this package, please follow the guidelines in the CONTRIBUTING.md file.
|
|
265
|
-
|
|
266
|
-
### License
|
|
267
|
-
|
|
268
|
-
This package is licensed under the ISC License. See the LICENSE file for details.
|
|
269
|
-
|
|
270
|
-
### Credits
|
|
271
|
-
|
|
272
|
-
The wiki about the Euclidean distance formula https://en.wikipedia.org/wiki/Color_difference
|
|
273
|
-
|
|
274
|
-
Some useful ideas and codes has been taken from the article on the website css-tricks at https://css-tricks.com/converting-color-spaces-in-javascript/
|
|
1
|
+
# color-2-name
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/color-2-name)
|
|
4
|
+
[](https://github.com/wp-blocks/color-2-name/blob/main/LICENSE)
|
|
5
|
+
[](https://badgen.net/bundlephobia/minzip/color-2-name)
|
|
6
|
+
[](https://github.com/wp-blocks/color-2-name/blob/main/LICENSE)
|
|
7
|
+
[](https://github.com/wp-blocks/color-2-name/actions/workflows/node.js.yml)
|
|
8
|
+
|
|
9
|
+
Find the name of the color given a hex, rgb and hsl string!
|
|
10
|
+
|
|
11
|
+
This package provides a function to find the closest color within an array of colors.
|
|
12
|
+
It uses the Euclidean distance formula to calculate the distance between colors in the RGB color space.
|
|
13
|
+
|
|
14
|
+
### Features:
|
|
15
|
+
|
|
16
|
+
- 🚀 **Fast** - The distance between colors in the RGB color space is provided with the fastest algorithm available (check below)
|
|
17
|
+
- 😎 **Ally** - So that your app is equally useful for everyone
|
|
18
|
+
- 📒 **Well Documented** - Checkout the [documentation](https://wp-blocks.github.io/color-2-name/) with examples, demo and code references
|
|
19
|
+
- 🪶 **Lightweight** - The module WITH the 140 css colors definitions [weights 3.5kb gzipped](https://bundlephobia.com/package/color-2-name)!
|
|
20
|
+
- 📦 **Bundled** - Optimized and minified build, with ESM, CJS and iife browser versions available!
|
|
21
|
+
- 💪️ **Typed** - Written in typescript (with types included)
|
|
22
|
+
- 🛡️️ **Tested** - Over 4000 tests (most of all from [wpt](https://github.com/web-platform-tests/wpt/)) with 100% coverage to ensure the full adherence to the css standards
|
|
23
|
+
- 🎈 **No dependencies** - Dependencies tend to have dependencies endlessly, and this can lead to security issues. This is a small module, and it doesn't need anything else!
|
|
24
|
+
|
|
25
|
+
## 🚀 Benchmarks
|
|
26
|
+
|
|
27
|
+
Designed with the performance in mind, it is 10 times faster than the self-proclaimed fastest color conversion plugin!
|
|
28
|
+
|
|
29
|
+
| Library | <nobr>Operations/sec</nobr> | Size<br /> (minified) | Size<br /> (gzipped) |
|
|
30
|
+
|--------------------------------------------------------------------|------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
31
|
+
| <nobr><b>[color-2-name](#color-2-name) v1.3.2 🚀</b></nobr> | <nobr>🟢 <b>7 516 ops/s,</b> ±0.55%%</nobr> | [](https://snyk.io/advisor/npm-package/color-2-name) | [](https://bundlephobia.com/result?p=color-2-name) |
|
|
32
|
+
| <nobr>[colord](https://www.npmjs.com/package/colord) v2.9.3</nobr> | <nobr>🔴 736 ops/s, ±0.29% ( 90.21%% slower)</nobr> | [](https://snyk.io/advisor/npm-package/colord) | [](https://bundlephobia.com/result?p=colord) + [plugins](https://github.com/omgovich/colord/tree/master/src/plugins) |
|
|
33
|
+
|
|
34
|
+
- The performance results were generated on a common Intel i5 by running `npm run benchmark` in the library folder. See [benchmarks](https://github.com/wp-blocks/color-2-name/blob/main/tests/bench/src/benchmark.ts).
|
|
35
|
+
- For the test we are generating 50 random colors to make sure that no internal mechanism is benefited
|
|
36
|
+
- The Size for the `colord` package is meant without the color definitions while `color-2-name` already has everything you need bundled inside
|
|
37
|
+
|
|
38
|
+
## Installation
|
|
39
|
+
|
|
40
|
+
### Module
|
|
41
|
+
|
|
42
|
+
To install the package, run the following command:
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
npm install color-2-name
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Then you can import or require the color-2-name function e.g. `closest` function from the color-2-name package:
|
|
49
|
+
|
|
50
|
+
```js
|
|
51
|
+
// ESM (import) - tree shakable
|
|
52
|
+
import {closest, distance, rgbToHex} from 'color-2-name';
|
|
53
|
+
closest('hsla(210deg 10% 96%)') // white
|
|
54
|
+
|
|
55
|
+
// CJS (require)
|
|
56
|
+
var color2Name = require("color-2-name")
|
|
57
|
+
color2Name.closest('#abcdef')
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Browser
|
|
61
|
+
|
|
62
|
+
To run the script in the browser, add the `color-2-name` add it to the header or footer like below
|
|
63
|
+
|
|
64
|
+
```js
|
|
65
|
+
<script src="https://www.unpkg.com/color-2-name"></script>
|
|
66
|
+
<script>
|
|
67
|
+
// Then the color-2-name module will be available using the following command:
|
|
68
|
+
// You will find the packed script loaded into window.color2name
|
|
69
|
+
closest('#123456') // returns "name" : "midnightblue" , "color" : "rgb(25,25,112)"
|
|
70
|
+
</script>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
#### The script is available at:
|
|
74
|
+
- [unpkg](https://www.unpkg.com/color-2-name) - https://www.unpkg.com/color-2-name
|
|
75
|
+
- [jsdelivr](https://cdn.jsdelivr.net/npm/color-2-name@latest) - https://cdn.jsdelivr.net/npm/color-2-name@latest
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
This Package includes the following functions:
|
|
80
|
+
|
|
81
|
+
- [closest()](#closest)
|
|
82
|
+
- [distance()](#distance)
|
|
83
|
+
- [rgbToHex()](#rgbToHex)
|
|
84
|
+
- [isLight()](#isLight)
|
|
85
|
+
- [isDark()](#isDark)
|
|
86
|
+
- [closestRGB()](#closestRGB)
|
|
87
|
+
- [getColor()](#getColor)
|
|
88
|
+
|
|
89
|
+
### 💡closest()
|
|
90
|
+
|
|
91
|
+
Returns the closest color name
|
|
92
|
+
|
|
93
|
+
```js
|
|
94
|
+
// Here is an example of how to use the findClosestColor function:
|
|
95
|
+
const closestColor = closest('#ff8800');
|
|
96
|
+
console.log(closestColor); // { name: 'red', color: 'rgb(255,0,0)' }
|
|
97
|
+
|
|
98
|
+
// You can also use your custom set as comparation
|
|
99
|
+
return closest('#ff8800', [
|
|
100
|
+
[255, 0, 0, 'red'],
|
|
101
|
+
[0, 255, 0, 'green']
|
|
102
|
+
]); // -> { name: 'red', color: 'rgb(255,0,0)' }
|
|
103
|
+
|
|
104
|
+
// Alternatively you can also get the closest color in different color spaces in the following way:
|
|
105
|
+
return closest('#ff00ff', undefined, {info: true});
|
|
106
|
+
// {
|
|
107
|
+
// name: 'magenta',
|
|
108
|
+
// color: 'rgb(255,0,255),
|
|
109
|
+
// hex: '#ff00ff',
|
|
110
|
+
// hsl: 'hsl(300deg 100% 50%)',
|
|
111
|
+
// distance: 0
|
|
112
|
+
// }
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
In this example, the hex color '#ff8800' (which is a shade of orange) is compared to the colors in the colors array. The function returns the object with the name and hex value of the color that is closest to it, which in this case is the
|
|
116
|
+
object for the color red.
|
|
117
|
+
|
|
118
|
+
Arguments:
|
|
119
|
+
|
|
120
|
+
- `color`: a string representing a color, accepts hexadecimal, rgb and hsl with and without alpha channel (e.g. `#ff0000` for hex red).
|
|
121
|
+
- `colors`: (optional) you can provide to this function a custom list of color names to be used (replaces the default)
|
|
122
|
+
- `args`: (optional) an Object that contains setup for this module
|
|
123
|
+
- `args.info`: (optional) set to true to display additional information the found color, like the hex value and the distance from the original
|
|
124
|
+
|
|
125
|
+
**RETURNS** an object with the name and nearest color that is closest to the given color. (eg. `{ name: 'red', color: 'rgb(255,0,0)' }`)
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
#### 💡distance()
|
|
130
|
+
|
|
131
|
+
Computes the distance between two colors using the euclidean distance formula.
|
|
132
|
+
|
|
133
|
+
```js
|
|
134
|
+
// Here is an example on how get the distance between two colors
|
|
135
|
+
const colorDivergence = distance([120, 255, 200], [255, 255, 255])
|
|
136
|
+
console.log(colorDivergence); // 123.465
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
Arguments:
|
|
140
|
+
|
|
141
|
+
- `rgb1`: an array of values representing rgb of the first color to be compared
|
|
142
|
+
- `rgb2`: an array of values representing rgb of the second color to be compared
|
|
143
|
+
|
|
144
|
+
**RETURNS** the distance between two colors, the maximum distance is >441 and the color is exactly the same when the value is 0
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
#### rgbToHex
|
|
149
|
+
|
|
150
|
+
Convert a rgb color into hexadecimal color
|
|
151
|
+
|
|
152
|
+
```js
|
|
153
|
+
// note: the rgb value is converted without take into account the alpha channel
|
|
154
|
+
const hex = rgbToHex('rgb(255,255,255)')
|
|
155
|
+
const hex2 = rgbToHex('rgb(255 255 255 / .5)')
|
|
156
|
+
// prints the hex result
|
|
157
|
+
console.log(hex); // #FFFFFF
|
|
158
|
+
console.log(hex2); // #FFFFFF
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
Arguments:
|
|
162
|
+
|
|
163
|
+
- `rgb`: a valid css rgb or rgba value (eg. rgb(1,2,3))
|
|
164
|
+
|
|
165
|
+
**RETURNS** the hex value of the color
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
#### 💡getColor()
|
|
170
|
+
|
|
171
|
+
search into ColorSet for the given color
|
|
172
|
+
|
|
173
|
+
```js
|
|
174
|
+
// note: the rgb value is converted without take into account the alpha channel
|
|
175
|
+
const white = getColor('white') // {"hex": "#ffffff", "hsl": "hsl(0,0%,100%)", "rgb": "rgb(255,255,255)"}
|
|
176
|
+
const alertColor = getColor('red') // {"hex": "#ff0000", "hsl": "hsl(0,100%,50%)", "rgb": "rgb(255,0,0)"}
|
|
177
|
+
|
|
178
|
+
// prints the hex result
|
|
179
|
+
console.log(alertColor.hsl); // #FFFFFF
|
|
180
|
+
console.log(alertColor.hex); // #FF0000
|
|
181
|
+
console.log("transparent red: " + alertColor.hex + "88"); // #FF000088
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
Arguments:
|
|
185
|
+
|
|
186
|
+
- `colorName`: the name of a color you need find in the colorset
|
|
187
|
+
|
|
188
|
+
**RETURNS** an Object with the color requested converted into hex, rgb and hsl
|
|
189
|
+
|
|
190
|
+
---
|
|
191
|
+
|
|
192
|
+
### Useful (additional) functions
|
|
193
|
+
|
|
194
|
+
#### 💡isLight()
|
|
195
|
+
|
|
196
|
+
Check if the color is light (optically closer to white)
|
|
197
|
+
|
|
198
|
+
#### 💡isDark()
|
|
199
|
+
|
|
200
|
+
Check if the color is dark (optically closer to black)
|
|
201
|
+
|
|
202
|
+
#### 💡closestRGB()
|
|
203
|
+
|
|
204
|
+
returns the closest RGB color
|
|
205
|
+
|
|
206
|
+
Arguments:
|
|
207
|
+
|
|
208
|
+
- `color`: a valid css color string
|
|
209
|
+
|
|
210
|
+
Examples:
|
|
211
|
+
|
|
212
|
+
```js
|
|
213
|
+
// note: the rgb value is converted without take into account the alpha channel
|
|
214
|
+
isLight('#fff') // true
|
|
215
|
+
isDark('#fff') // false
|
|
216
|
+
closestRGB('#FF1234') // red
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
---
|
|
220
|
+
|
|
221
|
+
#### 💡Build your own color set
|
|
222
|
+
|
|
223
|
+
First thing, clone the color-2-name package with `git clone https://github.com/wp-blocks/color-2-name.git` then cd into color-2-name folder.
|
|
224
|
+
|
|
225
|
+
In order to build a color set you need a json object with the following properties:
|
|
226
|
+
- `name` - the name of the color (like "Orange")
|
|
227
|
+
- `color` - the hex color value (like #FFAA00)
|
|
228
|
+
|
|
229
|
+
save it into ./src/data/ as "myNewColorSet.json". the file will contain something like this:
|
|
230
|
+
|
|
231
|
+
```json
|
|
232
|
+
[
|
|
233
|
+
{ "name": "white", "color": "#FFFFFF" },
|
|
234
|
+
{ "name": "black", "color": "#000000" },
|
|
235
|
+
{ "name": "red", "color": "#FF0000" },
|
|
236
|
+
{ "name": "green", "color": "#008000" },
|
|
237
|
+
{ "name": "blue", "color": "#0000FF" }
|
|
238
|
+
]
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
```bash
|
|
242
|
+
# then run the following command
|
|
243
|
+
$ node colorSetUtils.mjs myNewColorSet
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
**RETURNS** A new file called "myNewColorSet.ts" containing the data for this module will be written inside the ./src/data/ folder
|
|
247
|
+
|
|
248
|
+
---
|
|
249
|
+
|
|
250
|
+
### Examples
|
|
251
|
+
|
|
252
|
+
This module is meant to be used in conjunction with React's color picker, so that the color name is shown as you select it. It can also be used in other ways of course, such as to determine whether a color is light or dark (using a custom
|
|
253
|
+
color set with black and white) etc.
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
### Limitations
|
|
258
|
+
|
|
259
|
+
This package uses the Euclidean distance formula to calculate the distance between colors in the RGB color space. While this is a simple and widely used method for comparing colors, it may not always give the most accurate results. In
|
|
260
|
+
particular, it does not take into account the perception of colors by the human eye, which can be affected by factors such as the surrounding colors and the luminance of the colors.
|
|
261
|
+
|
|
262
|
+
### Contributing
|
|
263
|
+
|
|
264
|
+
If you would like to contribute to this package, please follow the guidelines in the CONTRIBUTING.md file.
|
|
265
|
+
|
|
266
|
+
### License
|
|
267
|
+
|
|
268
|
+
This package is licensed under the ISC License. See the LICENSE file for details.
|
|
269
|
+
|
|
270
|
+
### Credits
|
|
271
|
+
|
|
272
|
+
The wiki about the Euclidean distance formula https://en.wikipedia.org/wiki/Color_difference
|
|
273
|
+
|
|
274
|
+
Some useful ideas and codes has been taken from the article on the website css-tricks at https://css-tricks.com/converting-color-spaces-in-javascript/
|