@soybeanjs/colord 0.0.1
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 +58 -0
- package/dist/colord-BV1k1-gC.js +239 -0
- package/dist/colord-xpgrVWRV.d.ts +167 -0
- package/dist/colord.d.ts +2 -0
- package/dist/colord.js +10 -0
- package/dist/extend-DrPfn2Q1.d.ts +7 -0
- package/dist/get-BFaklfVd.js +92 -0
- package/dist/hsv-UWMaaOSN.js +78 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.js +22 -0
- package/dist/lab-CJHLdqfe.js +128 -0
- package/dist/manipulate-CeAgrUd6.js +119 -0
- package/dist/plugins/a11y.d.ts +41 -0
- package/dist/plugins/a11y.js +35 -0
- package/dist/plugins/cmyk.d.ts +27 -0
- package/dist/plugins/cmyk.js +121 -0
- package/dist/plugins/harmonies.d.ts +19 -0
- package/dist/plugins/harmonies.js +54 -0
- package/dist/plugins/hwb.d.ts +26 -0
- package/dist/plugins/hwb.js +92 -0
- package/dist/plugins/lab.d.ts +26 -0
- package/dist/plugins/lab.js +26 -0
- package/dist/plugins/lch.d.ts +27 -0
- package/dist/plugins/lch.js +122 -0
- package/dist/plugins/minify.d.ts +23 -0
- package/dist/plugins/minify.js +61 -0
- package/dist/plugins/mix.d.ts +30 -0
- package/dist/plugins/mix.js +39 -0
- package/dist/plugins/names.d.ts +22 -0
- package/dist/plugins/names.js +201 -0
- package/dist/plugins/oklab.d.ts +16 -0
- package/dist/plugins/oklab.js +103 -0
- package/dist/plugins/oklch.d.ts +16 -0
- package/dist/plugins/oklch.js +112 -0
- package/dist/plugins/xyz.d.ts +17 -0
- package/dist/plugins/xyz.js +20 -0
- package/dist/rgb-CfVJB1Bj.js +148 -0
- package/dist/utils-BgIyY6bK.js +229 -0
- package/dist/xyz-MII3ndWO.js +73 -0
- package/package.json +81 -0
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# @soybeanjs/colord
|
|
2
|
+
|
|
3
|
+
<strong>Colord</strong> is a tiny yet powerful tool for high-performance color manipulations and conversions. fork from [colord](https://github.com/omgovich/colord)
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 📦 **Small**: Just **1.7 KB** gzipped ([3x+ lighter](#benchmarks) than **color** and **tinycolor2**)
|
|
8
|
+
- 🚀 **Fast**: [3x+ faster](#benchmarks) than **color** and **tinycolor2**
|
|
9
|
+
- 😍 **Simple**: Chainable API and familiar patterns
|
|
10
|
+
- 💪 **Immutable**: No need to worry about data mutations
|
|
11
|
+
- 🛡 **Bulletproof**: Written in strict TypeScript and has 100% test coverage
|
|
12
|
+
- 🗂 **Typed**: Ships with [types included](#types)
|
|
13
|
+
- 🏗 **Extendable**: Built-in [plugin system](#plugins) to add new functionality
|
|
14
|
+
- 📚 **CSS-compliant**: Strictly follows CSS Color Level specifications
|
|
15
|
+
- 👫 **Works everywhere**: Supports all browsers and Node.js
|
|
16
|
+
- 💨 **Dependency-free**
|
|
17
|
+
|
|
18
|
+
## Differences from [colord](https://github.com/omgovich/colord)
|
|
19
|
+
|
|
20
|
+
- support `oklab` and `oklch` color space
|
|
21
|
+
- more correct color parsing
|
|
22
|
+
- simplify type definitions
|
|
23
|
+
- rewrite color string parsing
|
|
24
|
+
- rename alpha property `a` to `alpha`
|
|
25
|
+
|
|
26
|
+
## Getting Started
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
pnpm i @soybeanjs/colord
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
import { colord } from '@soybeanjs/colord';
|
|
34
|
+
|
|
35
|
+
colord("#ff0000").grayscale().alpha(0.25).toRgbString(); // "rgba(128, 128, 128, 0.25)"
|
|
36
|
+
colord("rgb(192, 192, 192)").isLight(); // true
|
|
37
|
+
colord("hsl(0, 50%, 50%)").darken(0.25).toHex(); // "#602020"
|
|
38
|
+
colord({ r: 128, g: 128, b: 128, alpha: 0.25 }).toRgbString(); // "rgba(128, 128, 128, 0.25)"
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Supported Color Models
|
|
42
|
+
|
|
43
|
+
- Hexadecimal strings (including 3, 4 and 8 digit notations)
|
|
44
|
+
- RGB strings and objects
|
|
45
|
+
- HSL strings and objects
|
|
46
|
+
- HSV objects
|
|
47
|
+
- Color names ([via plugin](#plugins))
|
|
48
|
+
- HWB objects and strings ([via plugin](#plugins))
|
|
49
|
+
- CMYK objects and strings ([via plugin](#plugins))
|
|
50
|
+
- LCH objects and strings ([via plugin](#plugins))
|
|
51
|
+
- LAB objects ([via plugin](#plugins))
|
|
52
|
+
- XYZ objects ([via plugin](#plugins))
|
|
53
|
+
- OKLAB objects ([via plugin](#plugins))
|
|
54
|
+
- OKLCH objects ([via plugin](#plugins))
|
|
55
|
+
|
|
56
|
+
## More API
|
|
57
|
+
|
|
58
|
+
see the more api in [colord](https://github.com/omgovich/colord)
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
import { _ as ALPHA_PRECISION, c as round } from "./utils-BgIyY6bK.js";
|
|
2
|
+
import { a as parseRgbString, c as roundRgb, i as parseRgb, s as rgbToRgbString } from "./rgb-CfVJB1Bj.js";
|
|
3
|
+
import { i as roundHsv, n as parseHsv, r as rgbToHsv } from "./hsv-UWMaaOSN.js";
|
|
4
|
+
import { a as saturate, c as rgbToHsl, l as rgbToHslString, n as invert, o as parseHsl, r as lighten, s as parseHslString, t as changeAlpha, u as roundHsl } from "./manipulate-CeAgrUd6.js";
|
|
5
|
+
import { t as getBrightness } from "./get-BFaklfVd.js";
|
|
6
|
+
|
|
7
|
+
//#region src/models/hex.ts
|
|
8
|
+
const hexMatcher = /^#([0-9a-f]{3,8})$/i;
|
|
9
|
+
/** Parses any valid Hex3, Hex4, Hex6 or Hex8 string and converts it to an RGBA object */
|
|
10
|
+
const parseHex = (hexStr) => {
|
|
11
|
+
const hexMatch = hexMatcher.exec(hexStr);
|
|
12
|
+
if (!hexMatch) return null;
|
|
13
|
+
const hex = hexMatch[1];
|
|
14
|
+
if (hex.length <= 4) return {
|
|
15
|
+
r: Number.parseInt(hex[0] + hex[0], 16),
|
|
16
|
+
g: Number.parseInt(hex[1] + hex[1], 16),
|
|
17
|
+
b: Number.parseInt(hex[2] + hex[2], 16),
|
|
18
|
+
alpha: hex.length === 4 ? round(Number.parseInt(hex[3] + hex[3], 16) / 255, 2) : 1
|
|
19
|
+
};
|
|
20
|
+
if (hex.length === 6 || hex.length === 8) return {
|
|
21
|
+
r: Number.parseInt(hex.slice(0, 2), 16),
|
|
22
|
+
g: Number.parseInt(hex.slice(2, 4), 16),
|
|
23
|
+
b: Number.parseInt(hex.slice(4, 6), 16),
|
|
24
|
+
alpha: hex.length === 8 ? round(Number.parseInt(hex.slice(6, 8), 16) / 255, 2) : 1
|
|
25
|
+
};
|
|
26
|
+
return null;
|
|
27
|
+
};
|
|
28
|
+
/** Formats any decimal number (e.g. 128) as a hexadecimal string (e.g. "08") */
|
|
29
|
+
const format = (number) => {
|
|
30
|
+
const hex = number.toString(16);
|
|
31
|
+
return hex.length < 2 ? `0${hex}` : hex;
|
|
32
|
+
};
|
|
33
|
+
/** Converts RGBA object to Hex6 or (if it has alpha channel) Hex8 string */
|
|
34
|
+
const rgbToHex = (rgb) => {
|
|
35
|
+
const { r, g, b, alpha } = roundRgb(rgb);
|
|
36
|
+
const alphaHex = alpha < 1 ? format(round(alpha * 255)) : "";
|
|
37
|
+
return `#${format(r)}${format(g)}${format(b)}${alphaHex}`;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
//#endregion
|
|
41
|
+
//#region src/shared/parse.ts
|
|
42
|
+
const parsers = {
|
|
43
|
+
string: [
|
|
44
|
+
[parseHex, "hex"],
|
|
45
|
+
[parseRgbString, "rgb"],
|
|
46
|
+
[parseHslString, "hsl"]
|
|
47
|
+
],
|
|
48
|
+
object: [
|
|
49
|
+
[parseRgb, "rgb"],
|
|
50
|
+
[parseHsl, "hsl"],
|
|
51
|
+
[parseHsv, "hsv"]
|
|
52
|
+
]
|
|
53
|
+
};
|
|
54
|
+
const findValidColor = (input, $parsers) => {
|
|
55
|
+
for (let i = 0; i < $parsers.length; i += 1) {
|
|
56
|
+
const result = $parsers[i][0](input);
|
|
57
|
+
if (result) return [result, $parsers[i][1]];
|
|
58
|
+
}
|
|
59
|
+
return [null, void 0];
|
|
60
|
+
};
|
|
61
|
+
/** Tries to convert an incoming value into RGBA color by going through all color model parsers */
|
|
62
|
+
const parse = (input) => {
|
|
63
|
+
if (typeof input === "string") return findValidColor(input.trim(), parsers.string);
|
|
64
|
+
if (typeof input === "object" && input !== null) return findValidColor(input, parsers.object);
|
|
65
|
+
return [null, void 0];
|
|
66
|
+
};
|
|
67
|
+
/**
|
|
68
|
+
* Returns a color model name for the input passed to the function.
|
|
69
|
+
*/
|
|
70
|
+
const getFormat = (input) => parse(input)[1];
|
|
71
|
+
|
|
72
|
+
//#endregion
|
|
73
|
+
//#region src/shared/random.ts
|
|
74
|
+
const random = () => {
|
|
75
|
+
return new Colord({
|
|
76
|
+
r: Math.random() * 255,
|
|
77
|
+
g: Math.random() * 255,
|
|
78
|
+
b: Math.random() * 255
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
//#endregion
|
|
83
|
+
//#region src/colord.ts
|
|
84
|
+
/**
|
|
85
|
+
* Parses the given input color and creates a new `Colord` instance.
|
|
86
|
+
* See accepted input formats: https://github.com/omgovich/colord#color-parsing
|
|
87
|
+
*/
|
|
88
|
+
const colord = (input) => {
|
|
89
|
+
if (input instanceof Colord) return input;
|
|
90
|
+
return new Colord(input);
|
|
91
|
+
};
|
|
92
|
+
var Colord = class {
|
|
93
|
+
parsed;
|
|
94
|
+
rgb;
|
|
95
|
+
constructor(input) {
|
|
96
|
+
this.parsed = parse(input)[0];
|
|
97
|
+
this.rgb = this.parsed || {
|
|
98
|
+
r: 0,
|
|
99
|
+
g: 0,
|
|
100
|
+
b: 0,
|
|
101
|
+
alpha: 1
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* Returns a boolean indicating whether or not an input has been parsed successfully.
|
|
106
|
+
* Note: If parsing is unsuccessful, Colord defaults to black (does not throws an error).
|
|
107
|
+
*/
|
|
108
|
+
isValid() {
|
|
109
|
+
return this.parsed !== null;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* Returns the brightness of a color (from 0 to 1).
|
|
113
|
+
* The calculation logic is modified from WCAG.
|
|
114
|
+
* https://www.w3.org/TR/AERT/#color-contrast
|
|
115
|
+
*/
|
|
116
|
+
brightness() {
|
|
117
|
+
return round(getBrightness(this.rgb), 2);
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Same as calling `brightness() < 0.5`.
|
|
121
|
+
*/
|
|
122
|
+
isDark() {
|
|
123
|
+
return getBrightness(this.rgb) < .5;
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Same as calling `brightness() >= 0.5`.
|
|
127
|
+
* */
|
|
128
|
+
isLight() {
|
|
129
|
+
return getBrightness(this.rgb) >= .5;
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* Returns the hexadecimal representation of a color.
|
|
133
|
+
* When the alpha channel value of the color is less than 1,
|
|
134
|
+
* it outputs #rrggbbaa format instead of #rrggbb.
|
|
135
|
+
*/
|
|
136
|
+
toHex() {
|
|
137
|
+
return rgbToHex(this.rgb);
|
|
138
|
+
}
|
|
139
|
+
/**
|
|
140
|
+
* Converts a color to RGB color space and returns an object.
|
|
141
|
+
* Always includes an alpha value from 0 to 1.
|
|
142
|
+
*/
|
|
143
|
+
toRgb() {
|
|
144
|
+
return roundRgb(this.rgb);
|
|
145
|
+
}
|
|
146
|
+
/**
|
|
147
|
+
* Converts a color to RGB color space and returns a string representation.
|
|
148
|
+
* Outputs an alpha value only if it is less than 1.
|
|
149
|
+
*/
|
|
150
|
+
toRgbString() {
|
|
151
|
+
return rgbToRgbString(this.rgb);
|
|
152
|
+
}
|
|
153
|
+
/**
|
|
154
|
+
* Converts a color to HSL color space and returns an object.
|
|
155
|
+
* Always includes an alpha value from 0 to 1.
|
|
156
|
+
*/
|
|
157
|
+
toHsl() {
|
|
158
|
+
return roundHsl(rgbToHsl(this.rgb));
|
|
159
|
+
}
|
|
160
|
+
/**
|
|
161
|
+
* Converts a color to HSL color space and returns a string representation.
|
|
162
|
+
* Always includes an alpha value from 0 to 1.
|
|
163
|
+
*/
|
|
164
|
+
toHslString() {
|
|
165
|
+
return rgbToHslString(this.rgb);
|
|
166
|
+
}
|
|
167
|
+
/**
|
|
168
|
+
* Converts a color to HSV color space and returns an object.
|
|
169
|
+
* Always includes an alpha value from 0 to 1.
|
|
170
|
+
*/
|
|
171
|
+
toHsv() {
|
|
172
|
+
return roundHsv(rgbToHsv(this.rgb));
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
175
|
+
* Creates a new instance containing an inverted (opposite) version of the color.
|
|
176
|
+
*/
|
|
177
|
+
invert() {
|
|
178
|
+
return colord(invert(this.rgb));
|
|
179
|
+
}
|
|
180
|
+
/**
|
|
181
|
+
* Increases the HSL saturation of a color by the given amount.
|
|
182
|
+
*/
|
|
183
|
+
saturate(amount = .1) {
|
|
184
|
+
return colord(saturate(this.rgb, amount));
|
|
185
|
+
}
|
|
186
|
+
/**
|
|
187
|
+
* Decreases the HSL saturation of a color by the given amount.
|
|
188
|
+
*/
|
|
189
|
+
desaturate(amount = .1) {
|
|
190
|
+
return colord(saturate(this.rgb, -amount));
|
|
191
|
+
}
|
|
192
|
+
/**
|
|
193
|
+
* Makes a gray color with the same lightness as a source color.
|
|
194
|
+
*/
|
|
195
|
+
grayscale() {
|
|
196
|
+
return colord(saturate(this.rgb, -1));
|
|
197
|
+
}
|
|
198
|
+
/**
|
|
199
|
+
* Increases the HSL lightness of a color by the given amount.
|
|
200
|
+
*/
|
|
201
|
+
lighten(amount = .1) {
|
|
202
|
+
return colord(lighten(this.rgb, amount));
|
|
203
|
+
}
|
|
204
|
+
/**
|
|
205
|
+
* Increases the HSL lightness of a color by the given amount.
|
|
206
|
+
*/
|
|
207
|
+
darken(amount = .1) {
|
|
208
|
+
return colord(lighten(this.rgb, -amount));
|
|
209
|
+
}
|
|
210
|
+
/**
|
|
211
|
+
* Changes the HSL hue of a color by the given amount.
|
|
212
|
+
*/
|
|
213
|
+
rotate(amount = 15) {
|
|
214
|
+
return this.hue(this.hue() + amount);
|
|
215
|
+
}
|
|
216
|
+
alpha(value) {
|
|
217
|
+
if (typeof value === "number") return colord(changeAlpha(this.rgb, value));
|
|
218
|
+
return round(this.rgb.alpha, ALPHA_PRECISION);
|
|
219
|
+
}
|
|
220
|
+
hue(value) {
|
|
221
|
+
const hsl = rgbToHsl(this.rgb);
|
|
222
|
+
if (typeof value === "number") return colord({
|
|
223
|
+
h: value,
|
|
224
|
+
s: hsl.s,
|
|
225
|
+
l: hsl.l,
|
|
226
|
+
alpha: hsl.alpha
|
|
227
|
+
});
|
|
228
|
+
return round(hsl.h);
|
|
229
|
+
}
|
|
230
|
+
/**
|
|
231
|
+
* Determines whether two values are the same color.
|
|
232
|
+
*/
|
|
233
|
+
isEqual(color) {
|
|
234
|
+
return this.toHex() === colord(color).toHex();
|
|
235
|
+
}
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
//#endregion
|
|
239
|
+
export { parsers as a, getFormat as i, colord as n, random as r, Colord as t };
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
//#region src/types.d.ts
|
|
2
|
+
type WithAlpha<O> = O & {
|
|
3
|
+
alpha: number;
|
|
4
|
+
};
|
|
5
|
+
type RgbColor = WithAlpha<{
|
|
6
|
+
r: number;
|
|
7
|
+
g: number;
|
|
8
|
+
b: number;
|
|
9
|
+
}>;
|
|
10
|
+
type HslColor = WithAlpha<{
|
|
11
|
+
h: number;
|
|
12
|
+
s: number;
|
|
13
|
+
l: number;
|
|
14
|
+
}>;
|
|
15
|
+
type HsvColor = WithAlpha<{
|
|
16
|
+
h: number;
|
|
17
|
+
s: number;
|
|
18
|
+
v: number;
|
|
19
|
+
}>;
|
|
20
|
+
type HwbColor = WithAlpha<{
|
|
21
|
+
h: number;
|
|
22
|
+
w: number;
|
|
23
|
+
b: number;
|
|
24
|
+
}>;
|
|
25
|
+
type XyzColor = WithAlpha<{
|
|
26
|
+
x: number;
|
|
27
|
+
y: number;
|
|
28
|
+
z: number;
|
|
29
|
+
}>;
|
|
30
|
+
type LabColor = WithAlpha<{
|
|
31
|
+
l: number;
|
|
32
|
+
a: number;
|
|
33
|
+
b: number;
|
|
34
|
+
}>;
|
|
35
|
+
type LchColor = WithAlpha<{
|
|
36
|
+
l: number;
|
|
37
|
+
c: number;
|
|
38
|
+
h: number;
|
|
39
|
+
}>;
|
|
40
|
+
type CmykColor = WithAlpha<{
|
|
41
|
+
c: number;
|
|
42
|
+
m: number;
|
|
43
|
+
y: number;
|
|
44
|
+
k: number;
|
|
45
|
+
}>;
|
|
46
|
+
type OklabColor = LabColor;
|
|
47
|
+
type OklchColor = LchColor;
|
|
48
|
+
type PartialAlpha<O> = Omit<O, 'alpha'> & {
|
|
49
|
+
alpha?: number;
|
|
50
|
+
};
|
|
51
|
+
type ObjectColor = PartialAlpha<RgbColor> | PartialAlpha<HslColor> | PartialAlpha<HsvColor> | PartialAlpha<HwbColor> | PartialAlpha<XyzColor> | PartialAlpha<LabColor> | PartialAlpha<LchColor> | PartialAlpha<CmykColor> | PartialAlpha<OklabColor> | PartialAlpha<OklchColor>;
|
|
52
|
+
type AnyColor = string | ObjectColor;
|
|
53
|
+
type InputObject = Record<string, unknown>;
|
|
54
|
+
type Format = 'name' | 'hex' | 'rgb' | 'lrgb' | 'hsl' | 'hsv' | 'hwb' | 'xyz' | 'lab' | 'lch' | 'cmyk' | 'oklab' | 'oklch';
|
|
55
|
+
type Input = string | InputObject;
|
|
56
|
+
type ParseFunction<I extends Input> = (input: I) => RgbColor | null;
|
|
57
|
+
type Parser<I extends Input> = [ParseFunction<I>, Format];
|
|
58
|
+
type Parsers = {
|
|
59
|
+
string: Array<Parser<string>>;
|
|
60
|
+
object: Array<Parser<InputObject>>;
|
|
61
|
+
};
|
|
62
|
+
//#endregion
|
|
63
|
+
//#region src/colord.d.ts
|
|
64
|
+
/**
|
|
65
|
+
* Parses the given input color and creates a new `Colord` instance.
|
|
66
|
+
* See accepted input formats: https://github.com/omgovich/colord#color-parsing
|
|
67
|
+
*/
|
|
68
|
+
declare const colord: (input: AnyColor | Colord) => Colord;
|
|
69
|
+
declare class Colord {
|
|
70
|
+
private readonly parsed;
|
|
71
|
+
readonly rgb: RgbColor;
|
|
72
|
+
constructor(input: AnyColor);
|
|
73
|
+
/**
|
|
74
|
+
* Returns a boolean indicating whether or not an input has been parsed successfully.
|
|
75
|
+
* Note: If parsing is unsuccessful, Colord defaults to black (does not throws an error).
|
|
76
|
+
*/
|
|
77
|
+
isValid(): boolean;
|
|
78
|
+
/**
|
|
79
|
+
* Returns the brightness of a color (from 0 to 1).
|
|
80
|
+
* The calculation logic is modified from WCAG.
|
|
81
|
+
* https://www.w3.org/TR/AERT/#color-contrast
|
|
82
|
+
*/
|
|
83
|
+
brightness(): number;
|
|
84
|
+
/**
|
|
85
|
+
* Same as calling `brightness() < 0.5`.
|
|
86
|
+
*/
|
|
87
|
+
isDark(): boolean;
|
|
88
|
+
/**
|
|
89
|
+
* Same as calling `brightness() >= 0.5`.
|
|
90
|
+
* */
|
|
91
|
+
isLight(): boolean;
|
|
92
|
+
/**
|
|
93
|
+
* Returns the hexadecimal representation of a color.
|
|
94
|
+
* When the alpha channel value of the color is less than 1,
|
|
95
|
+
* it outputs #rrggbbaa format instead of #rrggbb.
|
|
96
|
+
*/
|
|
97
|
+
toHex(): string;
|
|
98
|
+
/**
|
|
99
|
+
* Converts a color to RGB color space and returns an object.
|
|
100
|
+
* Always includes an alpha value from 0 to 1.
|
|
101
|
+
*/
|
|
102
|
+
toRgb(): RgbColor;
|
|
103
|
+
/**
|
|
104
|
+
* Converts a color to RGB color space and returns a string representation.
|
|
105
|
+
* Outputs an alpha value only if it is less than 1.
|
|
106
|
+
*/
|
|
107
|
+
toRgbString(): string;
|
|
108
|
+
/**
|
|
109
|
+
* Converts a color to HSL color space and returns an object.
|
|
110
|
+
* Always includes an alpha value from 0 to 1.
|
|
111
|
+
*/
|
|
112
|
+
toHsl(): HslColor;
|
|
113
|
+
/**
|
|
114
|
+
* Converts a color to HSL color space and returns a string representation.
|
|
115
|
+
* Always includes an alpha value from 0 to 1.
|
|
116
|
+
*/
|
|
117
|
+
toHslString(): string;
|
|
118
|
+
/**
|
|
119
|
+
* Converts a color to HSV color space and returns an object.
|
|
120
|
+
* Always includes an alpha value from 0 to 1.
|
|
121
|
+
*/
|
|
122
|
+
toHsv(): HsvColor;
|
|
123
|
+
/**
|
|
124
|
+
* Creates a new instance containing an inverted (opposite) version of the color.
|
|
125
|
+
*/
|
|
126
|
+
invert(): Colord;
|
|
127
|
+
/**
|
|
128
|
+
* Increases the HSL saturation of a color by the given amount.
|
|
129
|
+
*/
|
|
130
|
+
saturate(amount?: number): Colord;
|
|
131
|
+
/**
|
|
132
|
+
* Decreases the HSL saturation of a color by the given amount.
|
|
133
|
+
*/
|
|
134
|
+
desaturate(amount?: number): Colord;
|
|
135
|
+
/**
|
|
136
|
+
* Makes a gray color with the same lightness as a source color.
|
|
137
|
+
*/
|
|
138
|
+
grayscale(): Colord;
|
|
139
|
+
/**
|
|
140
|
+
* Increases the HSL lightness of a color by the given amount.
|
|
141
|
+
*/
|
|
142
|
+
lighten(amount?: number): Colord;
|
|
143
|
+
/**
|
|
144
|
+
* Increases the HSL lightness of a color by the given amount.
|
|
145
|
+
*/
|
|
146
|
+
darken(amount?: number): Colord;
|
|
147
|
+
/**
|
|
148
|
+
* Changes the HSL hue of a color by the given amount.
|
|
149
|
+
*/
|
|
150
|
+
rotate(amount?: number): Colord;
|
|
151
|
+
/**
|
|
152
|
+
* Allows to get or change an alpha channel value.
|
|
153
|
+
*/
|
|
154
|
+
alpha(): number;
|
|
155
|
+
alpha(value: number): Colord;
|
|
156
|
+
/**
|
|
157
|
+
* Allows to get or change a hue value.
|
|
158
|
+
*/
|
|
159
|
+
hue(): number;
|
|
160
|
+
hue(value: number): Colord;
|
|
161
|
+
/**
|
|
162
|
+
* Determines whether two values are the same color.
|
|
163
|
+
*/
|
|
164
|
+
isEqual(color: AnyColor | Colord): boolean;
|
|
165
|
+
}
|
|
166
|
+
//#endregion
|
|
167
|
+
export { Format as a, HwbColor as c, LchColor as d, OklabColor as f, XyzColor as g, RgbColor as h, CmykColor as i, Input as l, Parsers as m, colord as n, HslColor as o, OklchColor as p, AnyColor as r, HsvColor as s, Colord as t, LabColor as u };
|
package/dist/colord.d.ts
ADDED
package/dist/colord.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import "./utils-BgIyY6bK.js";
|
|
2
|
+
import "./rgb-CfVJB1Bj.js";
|
|
3
|
+
import { n as colord, t as Colord } from "./colord-BV1k1-gC.js";
|
|
4
|
+
import "./hsv-UWMaaOSN.js";
|
|
5
|
+
import "./manipulate-CeAgrUd6.js";
|
|
6
|
+
import "./xyz-MII3ndWO.js";
|
|
7
|
+
import "./lab-CJHLdqfe.js";
|
|
8
|
+
import "./get-BFaklfVd.js";
|
|
9
|
+
|
|
10
|
+
export { Colord, colord };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { m as Parsers, t as Colord } from "./colord-xpgrVWRV.js";
|
|
2
|
+
|
|
3
|
+
//#region src/extend.d.ts
|
|
4
|
+
type Plugin = (ColordClass: typeof Colord, parsers: Parsers) => void;
|
|
5
|
+
declare const extend: (plugins: Plugin[]) => void;
|
|
6
|
+
//#endregion
|
|
7
|
+
export { extend as n, Plugin as t };
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { o as rgbToLinearRgb } from "./rgb-CfVJB1Bj.js";
|
|
2
|
+
|
|
3
|
+
//#region src/shared/get.ts
|
|
4
|
+
/**
|
|
5
|
+
* Returns the perceived luminance of a color [0-1] according to WCAG 2.0.
|
|
6
|
+
* https://www.w3.org/TR/WCAG20/#relativeluminancedef
|
|
7
|
+
*/
|
|
8
|
+
const getLuminance = (rgb) => {
|
|
9
|
+
const { r, g, b } = rgbToLinearRgb(rgb);
|
|
10
|
+
return .2126 * r + .7152 * g + .0722 * b;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Returns the brightness of a color [0-1].
|
|
14
|
+
* https://www.w3.org/TR/AERT/#color-contrast
|
|
15
|
+
* https://en.wikipedia.org/wiki/YIQ
|
|
16
|
+
*/
|
|
17
|
+
const getBrightness = (rgb) => {
|
|
18
|
+
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3 / 255;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Returns a contrast ratio for a color pair [1-21].
|
|
22
|
+
* http://www.w3.org/TR/WCAG20/#contrast-ratiodef
|
|
23
|
+
*/
|
|
24
|
+
const getContrast = (rgb1, rgb2) => {
|
|
25
|
+
const l1 = getLuminance(rgb1);
|
|
26
|
+
const l2 = getLuminance(rgb2);
|
|
27
|
+
return l1 > l2 ? (l1 + .05) / (l2 + .05) : (l2 + .05) / (l1 + .05);
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* Calculates the perceived color difference according to [Delta E2000](https://en.wikipedia.org/wiki/Color_difference#CIEDE2000).
|
|
31
|
+
*
|
|
32
|
+
* ΔE - (Delta E, dE) The measure of change in visual perception of two given colors.
|
|
33
|
+
*
|
|
34
|
+
* Delta E is a metric for understanding how the human eye perceives color difference.
|
|
35
|
+
* The term delta comes from mathematics, meaning change in a variable or function.
|
|
36
|
+
* The suffix E references the German word Empfindung, which broadly means sensation.
|
|
37
|
+
*
|
|
38
|
+
* On a typical scale, the Delta E value will range from 0 to 100.
|
|
39
|
+
*
|
|
40
|
+
* | Delta E | Perception |
|
|
41
|
+
* |---------|----------------------------------------|
|
|
42
|
+
* | <= 1.0 | Not perceptible by human eyes |
|
|
43
|
+
* | 1 - 2 | Perceptible through close observation |
|
|
44
|
+
* | 2 - 10 | Perceptible at a glance |
|
|
45
|
+
* | 11 - 49 | Colors are more similar than opposite |
|
|
46
|
+
* | 100 | Colors are exact opposite |
|
|
47
|
+
*
|
|
48
|
+
* [Source](http://www.brucelindbloom.com/index.html?Eqn_DeltaE_CIE2000.html)
|
|
49
|
+
* [Read about Delta E](https://zschuessler.github.io/DeltaE/learn/#toc-delta-e-2000)
|
|
50
|
+
*/
|
|
51
|
+
function getDeltaE2000(color1, color2) {
|
|
52
|
+
const { l: l1, a: a1, b: b1 } = color1;
|
|
53
|
+
const { l: l2, a: a2, b: b2 } = color2;
|
|
54
|
+
const rad2deg = 180 / Math.PI;
|
|
55
|
+
const deg2rad = Math.PI / 180;
|
|
56
|
+
const mc = ((a1 ** 2 + b1 ** 2) ** .5 + (a2 ** 2 + b2 ** 2) ** .5) / 2;
|
|
57
|
+
const ml = (l1 + l2) / 2;
|
|
58
|
+
const c7 = mc ** 7;
|
|
59
|
+
const g = .5 * (1 - (c7 / (c7 + 25 ** 7)) ** .5);
|
|
60
|
+
const a11 = a1 * (1 + g);
|
|
61
|
+
const a22 = a2 * (1 + g);
|
|
62
|
+
const c11 = (a11 ** 2 + b1 ** 2) ** .5;
|
|
63
|
+
const c22 = (a22 ** 2 + b2 ** 2) ** .5;
|
|
64
|
+
const mc1 = (c11 + c22) / 2;
|
|
65
|
+
let h1 = a11 === 0 && b1 === 0 ? 0 : Math.atan2(b1, a11) * rad2deg;
|
|
66
|
+
let h2 = a22 === 0 && b2 === 0 ? 0 : Math.atan2(b2, a22) * rad2deg;
|
|
67
|
+
if (h1 < 0) h1 += 360;
|
|
68
|
+
if (h2 < 0) h2 += 360;
|
|
69
|
+
let dh = h2 - h1;
|
|
70
|
+
const dhAbs = Math.abs(h2 - h1);
|
|
71
|
+
if (dhAbs > 180 && h2 <= h1) dh += 360;
|
|
72
|
+
else if (dhAbs > 180 && h2 > h1) dh -= 360;
|
|
73
|
+
let H = h1 + h2;
|
|
74
|
+
if (dhAbs <= 180) H /= 2;
|
|
75
|
+
else H = (h1 + h2 < 360 ? H + 360 : H - 360) / 2;
|
|
76
|
+
const T = 1 - .17 * Math.cos(deg2rad * (H - 30)) + .24 * Math.cos(deg2rad * 2 * H) + .32 * Math.cos(deg2rad * (3 * H + 6)) - .2 * Math.cos(deg2rad * (4 * H - 63));
|
|
77
|
+
const dL = l2 - l1;
|
|
78
|
+
const dC = c22 - c11;
|
|
79
|
+
const dH = 2 * Math.sin(deg2rad * dh / 2) * (c11 * c22) ** .5;
|
|
80
|
+
const sL = 1 + .015 * (ml - 50) ** 2 / (20 + (ml - 50) ** 2) ** .5;
|
|
81
|
+
const sC = 1 + .045 * mc1;
|
|
82
|
+
const sH = 1 + .015 * mc1 * T;
|
|
83
|
+
const dTheta = 30 * Math.exp(-1 * ((H - 275) / 25) ** 2);
|
|
84
|
+
const Rt = -(2 * (c7 / (c7 + 25 ** 7)) ** .5) * Math.sin(deg2rad * 2 * dTheta);
|
|
85
|
+
const kl = 1;
|
|
86
|
+
const kc = 1;
|
|
87
|
+
const kh = 1;
|
|
88
|
+
return ((dL / kl / sL) ** 2 + (dC / kc / sC) ** 2 + (dH / kh / sH) ** 2 + Rt * dC * dH / (kc * sC * kh * sH)) ** .5;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
//#endregion
|
|
92
|
+
export { getLuminance as i, getContrast as n, getDeltaE2000 as r, getBrightness as t };
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { _ as ALPHA_PRECISION, c as round, i as isPresent, n as clampHue, t as clamp } from "./utils-BgIyY6bK.js";
|
|
2
|
+
|
|
3
|
+
//#region src/models/hsv.ts
|
|
4
|
+
const clampHsv = (hsv) => ({
|
|
5
|
+
h: clampHue(hsv.h),
|
|
6
|
+
s: clamp(hsv.s, 0, 100),
|
|
7
|
+
v: clamp(hsv.v, 0, 100),
|
|
8
|
+
alpha: clamp(hsv.alpha)
|
|
9
|
+
});
|
|
10
|
+
const roundHsv = (hsv) => ({
|
|
11
|
+
h: round(hsv.h, 3),
|
|
12
|
+
s: round(hsv.s, 3),
|
|
13
|
+
v: round(hsv.v, 3),
|
|
14
|
+
alpha: round(hsv.alpha, ALPHA_PRECISION)
|
|
15
|
+
});
|
|
16
|
+
const hsvToRgb = (hsv) => {
|
|
17
|
+
const h = hsv.h / 360 * 6;
|
|
18
|
+
const s = hsv.s / 100;
|
|
19
|
+
const v = hsv.v / 100;
|
|
20
|
+
const hh = Math.floor(h);
|
|
21
|
+
const b = v * (1 - s);
|
|
22
|
+
const c = v * (1 - (h - hh) * s);
|
|
23
|
+
const d = v * (1 - (1 - h + hh) * s);
|
|
24
|
+
const module = hh % 6;
|
|
25
|
+
return {
|
|
26
|
+
r: [
|
|
27
|
+
v,
|
|
28
|
+
c,
|
|
29
|
+
b,
|
|
30
|
+
b,
|
|
31
|
+
d,
|
|
32
|
+
v
|
|
33
|
+
][module] * 255,
|
|
34
|
+
g: [
|
|
35
|
+
d,
|
|
36
|
+
v,
|
|
37
|
+
v,
|
|
38
|
+
c,
|
|
39
|
+
b,
|
|
40
|
+
b
|
|
41
|
+
][module] * 255,
|
|
42
|
+
b: [
|
|
43
|
+
b,
|
|
44
|
+
b,
|
|
45
|
+
d,
|
|
46
|
+
v,
|
|
47
|
+
v,
|
|
48
|
+
c
|
|
49
|
+
][module] * 255,
|
|
50
|
+
alpha: hsv.alpha
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
const parseHsv = ({ h, s, v, alpha = 1 }) => {
|
|
54
|
+
if (!isPresent(h) || !isPresent(s) || !isPresent(v)) return null;
|
|
55
|
+
return hsvToRgb(clampHsv({
|
|
56
|
+
h: Number(h),
|
|
57
|
+
s: Number(s),
|
|
58
|
+
v: Number(v),
|
|
59
|
+
alpha: Number(alpha)
|
|
60
|
+
}));
|
|
61
|
+
};
|
|
62
|
+
const rgbToHsv = ({ r, g, b, alpha }) => {
|
|
63
|
+
const max = Math.max(r, g, b);
|
|
64
|
+
const delta = max - Math.min(r, g, b);
|
|
65
|
+
let hh = 0;
|
|
66
|
+
if (delta) if (max === r) hh = (g - b) / delta;
|
|
67
|
+
else if (max === g) hh = 2 + (b - r) / delta;
|
|
68
|
+
else hh = 4 + (r - g) / delta;
|
|
69
|
+
return {
|
|
70
|
+
h: 60 * (hh < 0 ? hh + 6 : hh),
|
|
71
|
+
s: max ? delta / max * 100 : 0,
|
|
72
|
+
v: max / 255 * 100,
|
|
73
|
+
alpha
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
//#endregion
|
|
78
|
+
export { roundHsv as i, parseHsv as n, rgbToHsv as r, hsvToRgb as t };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { a as Format, c as HwbColor, d as LchColor, f as OklabColor, g as XyzColor, h as RgbColor, l as Input, n as colord, o as HslColor, p as OklchColor, r as AnyColor, s as HsvColor, t as Colord, u as LabColor } from "./colord-xpgrVWRV.js";
|
|
2
|
+
import { n as extend, t as Plugin } from "./extend-DrPfn2Q1.js";
|
|
3
|
+
|
|
4
|
+
//#region src/shared/parse.d.ts
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Returns a color model name for the input passed to the function.
|
|
8
|
+
*/
|
|
9
|
+
declare const getFormat: (input: Input) => Format | undefined;
|
|
10
|
+
//#endregion
|
|
11
|
+
//#region src/shared/random.d.ts
|
|
12
|
+
declare const random: () => Colord;
|
|
13
|
+
//#endregion
|
|
14
|
+
export { type AnyColor, Colord, type HslColor, type HsvColor, type HwbColor, type LabColor, type LchColor, type OklabColor, type OklchColor, type Plugin, type RgbColor, type XyzColor, colord, extend, getFormat, random };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import "./utils-BgIyY6bK.js";
|
|
2
|
+
import "./rgb-CfVJB1Bj.js";
|
|
3
|
+
import { a as parsers, i as getFormat, n as colord, r as random, t as Colord } from "./colord-BV1k1-gC.js";
|
|
4
|
+
import "./hsv-UWMaaOSN.js";
|
|
5
|
+
import "./manipulate-CeAgrUd6.js";
|
|
6
|
+
import "./xyz-MII3ndWO.js";
|
|
7
|
+
import "./lab-CJHLdqfe.js";
|
|
8
|
+
import "./get-BFaklfVd.js";
|
|
9
|
+
|
|
10
|
+
//#region src/extend.ts
|
|
11
|
+
const activePlugins = [];
|
|
12
|
+
const extend = (plugins) => {
|
|
13
|
+
plugins.forEach((plugin) => {
|
|
14
|
+
if (!activePlugins.includes(plugin)) {
|
|
15
|
+
plugin(Colord, parsers);
|
|
16
|
+
activePlugins.push(plugin);
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
//#endregion
|
|
22
|
+
export { Colord, colord, extend, getFormat, random };
|