color-value-tools 1.0.0 → 1.1.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/README.md +179 -70
- package/dist/{index.d.ts → cjs/index.d.ts} +80 -0
- package/dist/{index.js → cjs/index.js} +392 -6
- package/dist/esm/index.js +907 -0
- package/dist/esm/package.json +1 -0
- package/package.json +53 -47
package/README.md
CHANGED
|
@@ -1,70 +1,179 @@
|
|
|
1
|
-
# color-value-tools
|
|
2
|
-
|
|
3
|
-
A
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install color-value-tools
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Usage
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
//
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
1
|
+
# color-value-tools
|
|
2
|
+
|
|
3
|
+
A comprehensive utility library for parsing, converting, manipulating, and analyzing color values across all major color models — hex, RGB, HSL, HSV, HWB, Lab, LCH, OKLAB, OKLCH, CMYK — plus CSS variables and named colors.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install color-value-tools
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
import {
|
|
15
|
+
normalizeColor, mixColors,
|
|
16
|
+
lighten, darken, saturate,
|
|
17
|
+
complement, triadic,
|
|
18
|
+
wcagLevel, bestTextColor,
|
|
19
|
+
colorDeltaE, randomColor,
|
|
20
|
+
} from 'color-value-tools';
|
|
21
|
+
|
|
22
|
+
// Parse any color format
|
|
23
|
+
normalizeColor('#3498db');
|
|
24
|
+
// { type: 'hex', hex: '#3498db', r: 52, g: 152, b: 219, h: 204, s: 70, l: 53, ... }
|
|
25
|
+
|
|
26
|
+
// Manipulate
|
|
27
|
+
lighten('#3498db', 15); // '#6ab4e8'
|
|
28
|
+
darken('#3498db', 15); // '#1a6da3'
|
|
29
|
+
saturate('#3498db', 20); // '#1a8fe8'
|
|
30
|
+
|
|
31
|
+
// Harmonies
|
|
32
|
+
complement('#3498db'); // '#db6034'
|
|
33
|
+
triadic('#3498db'); // ['#3498db', '#db3498', '#98db34']
|
|
34
|
+
|
|
35
|
+
// WCAG accessibility
|
|
36
|
+
wcagLevel('#ffffff', '#3498db'); // 'AA'
|
|
37
|
+
bestTextColor('#3498db'); // '#ffffff'
|
|
38
|
+
|
|
39
|
+
// Perceptual color distance (CIEDE2000)
|
|
40
|
+
colorDeltaE('#ff0000', '#fe0000'); // ~0.9
|
|
41
|
+
|
|
42
|
+
// Random color
|
|
43
|
+
randomColor({ hRange: [200, 260], sRange: [60, 80] });
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
CommonJS:
|
|
47
|
+
```js
|
|
48
|
+
const { normalizeColor, mixColors } = require('color-value-tools');
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## API Reference
|
|
54
|
+
|
|
55
|
+
### Detection
|
|
56
|
+
|
|
57
|
+
| Function | Description |
|
|
58
|
+
|---|---|
|
|
59
|
+
| `getColorType(value)` | Returns `'hex'`, `'css-var'`, `'rgb'`, `'hsl'`, `'named'`, or `'unknown'` |
|
|
60
|
+
| `isHexColor(value)` | Detects 3- or 6-digit hex strings (with or without `#`) |
|
|
61
|
+
| `isRgbColor(value)` | Detects `rgb()` / `rgba()` strings |
|
|
62
|
+
| `isHslColor(value)` | Detects `hsl()` / `hsla()` strings |
|
|
63
|
+
| `isCssVariable(value)` | Checks for `var(--name)` pattern |
|
|
64
|
+
| `extractCssVariableName(value)` | Extracts `--name` from `var(--name)` |
|
|
65
|
+
|
|
66
|
+
### Parsing & Normalization
|
|
67
|
+
|
|
68
|
+
| Function | Description |
|
|
69
|
+
|---|---|
|
|
70
|
+
| `normalizeColor(input)` | Universal parser. Accepts hex string, `rgb()`, `hsl()`, named color, or `{r,g,b}` / `{h,s,l}` object. Returns `{ type, hex, r, g, b, a, h, s, l, v }` |
|
|
71
|
+
| `normalizeHex(hex)` | Normalizes 3- or 6-digit hex to lowercase 6-digit with `#` |
|
|
72
|
+
| `rgbaStringToRgba(str)` | Parses `rgb()` / `rgba()` string to `{r, g, b, a}` |
|
|
73
|
+
| `hex8ToRgba(hex)` | Parses 8-digit hex (`#rrggbbaa`) to `{r, g, b, a}` |
|
|
74
|
+
| `parseHwbString(str)` | Parses `hwb()` string to `{H, W, B, alpha}` |
|
|
75
|
+
|
|
76
|
+
### Conversions
|
|
77
|
+
|
|
78
|
+
| Function | Description |
|
|
79
|
+
|---|---|
|
|
80
|
+
| `hexToRgb(hex)` | `→ [r, g, b]` |
|
|
81
|
+
| `hexToRgba(hex, opacity)` | `→ rgba(...)` string |
|
|
82
|
+
| `hexToHsl(hex)` | `→ [h, s, l]` |
|
|
83
|
+
| `hexToHsv(hex)` | `→ [h, s, v]` |
|
|
84
|
+
| `hslToHex(h, s, l)` | `→ #rrggbb` |
|
|
85
|
+
| `hslToRgb(h, s, l)` | `→ {r, g, b}` |
|
|
86
|
+
| `hsvToHex(h, s, v)` | `→ #rrggbb` |
|
|
87
|
+
| `hsvToRgb(h, s, v)` | `→ {r, g, b}` |
|
|
88
|
+
| `rgbToHex({r,g,b})` | `→ #rrggbb` |
|
|
89
|
+
| `rgbaToHex({r,g,b,a})` | `→ #rrggbbaa` |
|
|
90
|
+
| `rgbToRgbaString({r,g,b}, a)` | `→ rgba(...)` string |
|
|
91
|
+
| `rgbToHsl({r,g,b})` | `→ [h, s, l]` |
|
|
92
|
+
| `rgbToHsv({r,g,b})` | `→ [h, s, v]` |
|
|
93
|
+
| `rgbToHwb({r,g,b})` | `→ [H, W, B]` |
|
|
94
|
+
| `hwbToRgb(H, W, B)` | `→ {r, g, b}` |
|
|
95
|
+
| `rgbToCmyk({r,g,b})` | `→ {c, m, y, k}` (0–1 range) |
|
|
96
|
+
| `cmykToRgb({c,m,y,k})` | `→ {r, g, b}` |
|
|
97
|
+
| `rgbToLab({r,g,b})` | `→ {L, a, b}` (CIE Lab D65) |
|
|
98
|
+
| `labToRgb({L,a,b})` | `→ {r, g, b}` |
|
|
99
|
+
| `rgbToLch({r,g,b})` | `→ {L, C, H}` (CIE LCH) |
|
|
100
|
+
| `lchToRgb({L,C,H})` | `→ {r, g, b}` |
|
|
101
|
+
| `rgbToOklab({r,g,b})` | `→ {L, a, b}` (Oklab) |
|
|
102
|
+
| `oklabToRgb({L,a,b})` | `→ {r, g, b}` |
|
|
103
|
+
| `rgbToOklch({r,g,b})` | `→ {L, C, H}` (Oklch) |
|
|
104
|
+
| `oklchToRgb({L,C,H})` | `→ {r, g, b}` |
|
|
105
|
+
| `rgbaToHex8({r,g,b,a})` | Alias for `rgbaToHex` |
|
|
106
|
+
|
|
107
|
+
### Manipulation
|
|
108
|
+
|
|
109
|
+
| Function | Description |
|
|
110
|
+
|---|---|
|
|
111
|
+
| `lighten(color, amount)` | Increase lightness by `amount` (0–100) |
|
|
112
|
+
| `darken(color, amount)` | Decrease lightness by `amount` (0–100) |
|
|
113
|
+
| `saturate(color, amount)` | Increase saturation by `amount` (0–100) |
|
|
114
|
+
| `desaturate(color, amount)` | Decrease saturation by `amount` (0–100) |
|
|
115
|
+
| `setAlpha(color, alpha)` | Returns `rgba(...)` with the given alpha (0–1) |
|
|
116
|
+
| `getAlpha(color)` | Returns the alpha channel value (0–1) |
|
|
117
|
+
| `invertColor(color)` | Inverts RGB channels |
|
|
118
|
+
| `grayscale(color)` | Converts to grayscale using ITU-R BT.709 weights |
|
|
119
|
+
| `rotateHue(hex, degrees)` | Rotates hue by degrees (supports negative values) |
|
|
120
|
+
| `adjustHexBrightness(hex, offsetPercent)` | Lightens (positive) or darkens (negative) by percentage |
|
|
121
|
+
| `mixColors(c1, c2, t, opts?)` | Linearly interpolates between two colors. `t` = 0–1. Options: `mode: 'rgb'|'hsl'`, `format: 'hex'|'rgb'|'rgba'|'hsl'` |
|
|
122
|
+
|
|
123
|
+
### Color Harmonies
|
|
124
|
+
|
|
125
|
+
| Function | Description |
|
|
126
|
+
|---|---|
|
|
127
|
+
| `complement(color)` | Returns the complementary color (180° rotation) |
|
|
128
|
+
| `triadic(color)` | Returns 3 colors evenly spaced 120° apart |
|
|
129
|
+
| `analogous(color, angle?)` | Returns 3 neighboring colors (default ±30°) |
|
|
130
|
+
| `splitComplementary(color)` | Returns the base + two colors at 150° and 210° |
|
|
131
|
+
| `tetradic(color)` | Returns 4 colors evenly spaced 90° apart |
|
|
132
|
+
|
|
133
|
+
### Palette Generation
|
|
134
|
+
|
|
135
|
+
| Function | Description |
|
|
136
|
+
|---|---|
|
|
137
|
+
| `colorShades(color, steps?)` | Generates a light-to-dark scale (default 9 steps) |
|
|
138
|
+
| `monochromatic(color, steps?)` | Generates shades by varying saturation (default 5 steps) |
|
|
139
|
+
|
|
140
|
+
### Accessibility (WCAG)
|
|
141
|
+
|
|
142
|
+
| Function | Description |
|
|
143
|
+
|---|---|
|
|
144
|
+
| `relativeLuminance(color)` | WCAG relative luminance (0–1) |
|
|
145
|
+
| `contrastRatio(c1, c2)` | WCAG contrast ratio (1–21) |
|
|
146
|
+
| `wcagLevel(fg, bg)` | Returns `'AAA'`, `'AA'`, `'AA-large'`, or `'fail'` |
|
|
147
|
+
| `bestTextColor(bg)` | Returns `'#000000'` or `'#ffffff'` for best contrast on `bg` |
|
|
148
|
+
| `bestContrastColor(bg, candidates)` | Picks the most readable color from `candidates` |
|
|
149
|
+
| `isDark(color, threshold?)` | `true` if luminance is below threshold (default 0.5) |
|
|
150
|
+
| `isLight(color, threshold?)` | Inverse of `isDark` |
|
|
151
|
+
|
|
152
|
+
### Formatting
|
|
153
|
+
|
|
154
|
+
| Function | Description |
|
|
155
|
+
|---|---|
|
|
156
|
+
| `toHslString(h, s, l, alpha?)` | Formats as `hsl(...)` or `hsla(...)` |
|
|
157
|
+
| `toHwbString(H, W, B, alpha?)` | Formats as `hwb(...)` with optional alpha |
|
|
158
|
+
|
|
159
|
+
### Utilities
|
|
160
|
+
|
|
161
|
+
| Function | Description |
|
|
162
|
+
|---|---|
|
|
163
|
+
| `colorDeltaE(c1, c2)` | Perceptual color distance using CIEDE2000 |
|
|
164
|
+
| `randomColor(options?)` | Generates a random color. Options: `hRange`, `sRange`, `lRange` (each `[min, max]`) |
|
|
165
|
+
| `toNearestNamedColor(color)` | Returns the closest CSS named color name (all 148 standard colors) |
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
## Author
|
|
170
|
+
|
|
171
|
+
Danil Lisin Vladimirovich aka Macrulez
|
|
172
|
+
|
|
173
|
+
GitHub: [macrulezru](https://github.com/macrulezru)
|
|
174
|
+
|
|
175
|
+
Website: [macrulez.ru](https://macrulez.ru/)
|
|
176
|
+
|
|
177
|
+
## License
|
|
178
|
+
|
|
179
|
+
MIT
|
|
@@ -12,6 +12,14 @@ export declare function hexToHsl(hex: string): [number, number, number];
|
|
|
12
12
|
export declare function hslToHex(h: number, s: number, l: number): string;
|
|
13
13
|
export declare function adjustHexBrightness(hex: string, offsetPercent: number): string;
|
|
14
14
|
export declare function rotateHue(hex: string, degrees: number): string;
|
|
15
|
+
export declare function lighten(color: string, amount: number): string;
|
|
16
|
+
export declare function darken(color: string, amount: number): string;
|
|
17
|
+
export declare function saturate(color: string, amount: number): string;
|
|
18
|
+
export declare function desaturate(color: string, amount: number): string;
|
|
19
|
+
export declare function setAlpha(color: string, alpha: number): string;
|
|
20
|
+
export declare function getAlpha(color: string): number;
|
|
21
|
+
export declare function invertColor(color: string): string;
|
|
22
|
+
export declare function grayscale(color: string): string;
|
|
15
23
|
export declare function rgbToHex({ r, g, b }: {
|
|
16
24
|
r: number;
|
|
17
25
|
g: number;
|
|
@@ -137,6 +145,13 @@ export declare function normalizeColor(input: string | {
|
|
|
137
145
|
v?: undefined;
|
|
138
146
|
raw?: undefined;
|
|
139
147
|
};
|
|
148
|
+
export declare function complement(color: string): string;
|
|
149
|
+
export declare function triadic(color: string): [string, string, string];
|
|
150
|
+
export declare function analogous(color: string, angle?: number): [string, string, string];
|
|
151
|
+
export declare function splitComplementary(color: string): [string, string, string];
|
|
152
|
+
export declare function tetradic(color: string): [string, string, string, string];
|
|
153
|
+
export declare function colorShades(color: string, steps?: number): string[];
|
|
154
|
+
export declare function monochromatic(color: string, steps?: number): string[];
|
|
140
155
|
export declare function mixColors(c1: string, c2: string, t: number, opts?: {
|
|
141
156
|
mode?: 'rgb' | 'hsl';
|
|
142
157
|
format?: 'hex' | 'rgb' | 'rgba' | 'hsl';
|
|
@@ -201,3 +216,68 @@ export declare function lchToRgb({ L, C, H }: {
|
|
|
201
216
|
g: number;
|
|
202
217
|
b: number;
|
|
203
218
|
};
|
|
219
|
+
export type WcagLevel = 'AAA' | 'AA' | 'AA-large' | 'fail';
|
|
220
|
+
export declare function wcagLevel(foreground: string, background: string): WcagLevel;
|
|
221
|
+
export declare function bestTextColor(background: string): '#000000' | '#ffffff';
|
|
222
|
+
export declare function bestContrastColor(background: string, candidates: string[]): string;
|
|
223
|
+
export declare function rgbToHwb({ r, g, b }: {
|
|
224
|
+
r: number;
|
|
225
|
+
g: number;
|
|
226
|
+
b: number;
|
|
227
|
+
}): [number, number, number];
|
|
228
|
+
export declare function hwbToRgb(H: number, W: number, B: number): {
|
|
229
|
+
r: number;
|
|
230
|
+
g: number;
|
|
231
|
+
b: number;
|
|
232
|
+
};
|
|
233
|
+
export declare function toHwbString(H: number, W: number, B: number, alpha?: number): string;
|
|
234
|
+
export declare function parseHwbString(str: string): {
|
|
235
|
+
H: number;
|
|
236
|
+
W: number;
|
|
237
|
+
B: number;
|
|
238
|
+
alpha: number;
|
|
239
|
+
} | null;
|
|
240
|
+
export declare function rgbToOklab({ r, g, b }: {
|
|
241
|
+
r: number;
|
|
242
|
+
g: number;
|
|
243
|
+
b: number;
|
|
244
|
+
}): {
|
|
245
|
+
L: number;
|
|
246
|
+
a: number;
|
|
247
|
+
b: number;
|
|
248
|
+
};
|
|
249
|
+
export declare function oklabToRgb({ L, a, b }: {
|
|
250
|
+
L: number;
|
|
251
|
+
a: number;
|
|
252
|
+
b: number;
|
|
253
|
+
}): {
|
|
254
|
+
r: number;
|
|
255
|
+
g: number;
|
|
256
|
+
b: number;
|
|
257
|
+
};
|
|
258
|
+
export declare function rgbToOklch({ r, g, b }: {
|
|
259
|
+
r: number;
|
|
260
|
+
g: number;
|
|
261
|
+
b: number;
|
|
262
|
+
}): {
|
|
263
|
+
L: number;
|
|
264
|
+
C: number;
|
|
265
|
+
H: number;
|
|
266
|
+
};
|
|
267
|
+
export declare function oklchToRgb({ L, C, H }: {
|
|
268
|
+
L: number;
|
|
269
|
+
C: number;
|
|
270
|
+
H: number;
|
|
271
|
+
}): {
|
|
272
|
+
r: number;
|
|
273
|
+
g: number;
|
|
274
|
+
b: number;
|
|
275
|
+
};
|
|
276
|
+
export declare function toHslString(h: number, s: number, l: number, alpha?: number): string;
|
|
277
|
+
export declare function colorDeltaE(c1: string, c2: string): number;
|
|
278
|
+
export declare function randomColor(options?: {
|
|
279
|
+
hRange?: [number, number];
|
|
280
|
+
sRange?: [number, number];
|
|
281
|
+
lRange?: [number, number];
|
|
282
|
+
}): string;
|
|
283
|
+
export declare function toNearestNamedColor(color: string): string;
|