colorizr 4.0.1 → 5.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 -1112
- package/dist/index.d.mts +156 -133
- package/dist/index.d.ts +156 -133
- package/dist/index.js +754 -528
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +732 -524
- package/dist/index.mjs.map +1 -1
- package/package.json +17 -18
- package/src/apca.ts +3 -4
- package/src/brightness-difference.ts +3 -3
- package/src/chroma.ts +2 -2
- package/src/color-difference.ts +3 -3
- package/src/colorizr.ts +40 -14
- package/src/convertCSS.ts +17 -0
- package/src/converters/hex2hsl.ts +1 -2
- package/src/converters/hex2oklab.ts +1 -2
- package/src/converters/hex2oklch.ts +1 -2
- package/src/converters/hex2rgb.ts +1 -2
- package/src/converters/hsl2hex.ts +2 -2
- package/src/converters/hsl2oklab.ts +2 -1
- package/src/converters/hsl2oklch.ts +2 -1
- package/src/converters/hsl2rgb.ts +6 -5
- package/src/converters/oklab2hex.ts +2 -2
- package/src/converters/oklab2hsl.ts +2 -1
- package/src/converters/oklab2oklch.ts +4 -3
- package/src/converters/oklab2rgb.ts +13 -21
- package/src/converters/oklch2hex.ts +2 -2
- package/src/converters/oklch2hsl.ts +2 -1
- package/src/converters/oklch2oklab.ts +2 -8
- package/src/converters/oklch2rgb.ts +2 -1
- package/src/converters/rgb2hex.ts +2 -2
- package/src/converters/rgb2hsl.ts +5 -4
- package/src/converters/rgb2oklab.ts +17 -21
- package/src/converters/rgb2oklch.ts +3 -2
- package/src/delta-e.ts +29 -0
- package/src/extract-color-parts.ts +11 -11
- package/src/format-css.ts +29 -17
- package/src/format-hex.ts +5 -3
- package/src/grayscale.ts +9 -6
- package/src/index.ts +27 -6
- package/src/invert.ts +2 -9
- package/src/luminance.ts +7 -12
- package/src/mix.ts +125 -38
- package/src/modules/{hex-utils.ts → alpha.ts} +48 -13
- package/src/modules/constants.ts +37 -22
- package/src/modules/gamma.ts +20 -0
- package/src/modules/hue2rgb.ts +4 -5
- package/src/modules/invariant.ts +2 -4
- package/src/modules/linear-rgb.ts +31 -0
- package/src/modules/parsed-color.ts +227 -0
- package/src/modules/updater.ts +11 -11
- package/src/modules/utils.ts +27 -150
- package/src/name.ts +2 -2
- package/src/opacify.ts +4 -6
- package/src/opacity.ts +3 -17
- package/src/p3.ts +7 -38
- package/src/palette.ts +27 -19
- package/src/parse-css.ts +15 -13
- package/src/readable-color.ts +20 -13
- package/src/rotate.ts +6 -7
- package/src/scale.ts +22 -28
- package/src/scheme.ts +13 -13
- package/src/to-gamut.ts +60 -0
- package/src/transparentize.ts +4 -6
- package/src/types/index.ts +2 -11
- package/src/convert.ts +0 -17
- package/src/modules/parse-color.ts +0 -86
- package/src/readable-color-apca.ts +0 -46
package/README.md
CHANGED
|
@@ -1,1168 +1,114 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<br>
|
|
3
|
+
<img alt="colorizr logo" src="docs/public/logo.svg" height="120">
|
|
4
|
+
<br>
|
|
5
|
+
<br>
|
|
6
|
+
</p>
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://www.npmjs.com/package/colorizr"><img src="https://badge.fury.io/js/colorizr.svg" alt="NPM version" /></a>
|
|
9
|
+
<a href="https://github.com/gilbarbara/colorizr/actions/workflows/ci.yml"><img src="https://github.com/gilbarbara/colorizr/actions/workflows/ci.yml/badge.svg" alt="CI" /></a>
|
|
10
|
+
<a href="https://sonarcloud.io/summary/new_code?id=gilbarbara_colorizr"><img src="https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_colorizr&metric=alert_status" alt="Quality Gate Status" /></a>
|
|
11
|
+
<a href="https://sonarcloud.io/summary/new_code?id=gilbarbara_colorizr"><img src="https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_colorizr&metric=coverage" alt="Coverage" /></a>
|
|
12
|
+
</p>
|
|
2
13
|
|
|
3
|
-
|
|
14
|
+
# Colorizr
|
|
4
15
|
|
|
5
16
|
A modern color library focused on perceptual correctness and accessibility.
|
|
6
17
|
|
|
7
|
-
## Highlights
|
|
8
|
-
|
|
9
18
|
- 🏖 **Easy to use**: Works with Hex, HSL, RGB, OKLAB, and OKLCH.
|
|
10
|
-
- ♿️ **Accessibility**: WCAG 2.x contrast and
|
|
19
|
+
- ♿️ **Accessibility**: WCAG 2.x contrast and APCA (WCAG 3.0) support.
|
|
11
20
|
- 🎨 **Design Systems**: Generate perceptual color scales with variants.
|
|
12
21
|
- 🖥 **Modern Displays**: P3 gamut optimization and OkLCH operations.
|
|
13
22
|
- 🟦 **TypeScript**: Full type safety, zero dependencies.
|
|
14
23
|
|
|
15
|
-
|
|
24
|
+
📖 **[Official Website](https://gilbarbara.github.io/colorizr)**
|
|
16
25
|
|
|
17
|
-
|
|
26
|
+
## Setup
|
|
18
27
|
|
|
19
28
|
```bash
|
|
20
29
|
npm i colorizr
|
|
21
30
|
```
|
|
22
31
|
|
|
23
|
-
##
|
|
24
|
-
|
|
25
|
-
You can use the functions standalone or compose them freely:
|
|
26
|
-
|
|
27
|
-
```typescript
|
|
28
|
-
import { scale, readableColor } from 'colorizr';
|
|
29
|
-
|
|
30
|
-
const swatches = scale('#ff0044');
|
|
31
|
-
|
|
32
|
-
const accessibleSwatches = Object.entries(swatches).map(
|
|
33
|
-
([key, color]) => ({
|
|
34
|
-
key,
|
|
35
|
-
color,
|
|
36
|
-
text: readableColor(color),
|
|
37
|
-
}),
|
|
38
|
-
);
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
Or you can create an instance to use all the methods for the same color:
|
|
42
|
-
|
|
43
|
-
```typescript
|
|
44
|
-
import Colorizr from 'colorizr';
|
|
45
|
-
|
|
46
|
-
const colorInstance = new Colorizr('#ff0044');
|
|
47
|
-
colorInstance.luminance; // 0.2168
|
|
48
|
-
colorInstance.chroma; // 1
|
|
49
|
-
colorInstance.opacity; // 1
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## API
|
|
53
|
-
|
|
54
|
-
> String inputs accept css values: hex, hsl, oklab, oklch, rgb, and named colors.
|
|
55
|
-
|
|
56
|
-
- [Info](#Info) – basic color properties and metadata
|
|
57
|
-
- [Manipulators](#Manipulators) – adjust lightness, saturation, hue, alpha
|
|
58
|
-
- [Converters](#Converters) – between color spaces
|
|
59
|
-
- [Generators](#Generators) – palettes, schemes, scales
|
|
60
|
-
- [Comparison](#Comparison) – WCAG & APCA
|
|
61
|
-
- [Utilities](#Utilities) – helpers for parsing, formatting, random colors
|
|
62
|
-
- [Validators](#Validators) – type and format validation
|
|
63
|
-
- [Class](#Class) – object-oriented API for a single color
|
|
64
|
-
|
|
65
|
-
### Info
|
|
66
|
-
|
|
67
|
-
**chroma(input: string): number**
|
|
68
|
-
Get the chroma of a color.
|
|
69
|
-
|
|
70
|
-
```typescript
|
|
71
|
-
import { chroma } from 'colorizr';
|
|
72
|
-
|
|
73
|
-
chroma('#ff0044'); // 1
|
|
74
|
-
chroma('#ffc0cb'); // 0.2471
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
**luminance(input: string): number**
|
|
78
|
-
Get the relative brightness according to the [WCAG definition](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef).
|
|
79
|
-
Normalized to `0` for black and `1` for white.
|
|
80
|
-
|
|
81
|
-
```typescript
|
|
82
|
-
import { luminance } from 'colorizr';
|
|
83
|
-
|
|
84
|
-
luminance('#ff0044'); // 0.2168
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
**name(input: string): string**
|
|
88
|
-
Get the name of a color. Return the hex code if it can't be named.
|
|
89
|
-
|
|
90
|
-
```typescript
|
|
91
|
-
import { name } from 'colorizr';
|
|
92
|
-
|
|
93
|
-
name('#ffc0cb'); // pink
|
|
94
|
-
name('rgb(176 224 230)'); // 'powderblue'
|
|
95
|
-
name('hsl(344 100 50)'); // #ff0044
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
**opacity(input: string): number**
|
|
99
|
-
Get the opacity of a color.
|
|
100
|
-
|
|
101
|
-
```typescript
|
|
102
|
-
import { opacity } from 'colorizr';
|
|
103
|
-
|
|
104
|
-
opacity('#ff0044'); // 1
|
|
105
|
-
opacity('rgb(255 0 68 / 90%)'); // 0.9
|
|
106
|
-
opacity('hsl(344 100 50 / 60%)'); // 0.6
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
### Manipulators
|
|
110
|
-
|
|
111
|
-
**lighten(input: string, amount: number): string**
|
|
112
|
-
Get a color with increased lightness.
|
|
113
|
-
|
|
114
|
-
```typescript
|
|
115
|
-
import { lighten } from 'colorizr';
|
|
116
|
-
|
|
117
|
-
lighten('#ff0044', 10); // #ff3369
|
|
118
|
-
lighten('hsl(136 100% 50%)', 10); // hsl(136 100% 60%)
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
**darken(input: string, amount: number): string**
|
|
122
|
-
Get a color with decreased lightness.
|
|
123
|
-
|
|
124
|
-
```typescript
|
|
125
|
-
import { darken } from 'colorizr';
|
|
126
|
-
|
|
127
|
-
darken('#ff0044', 10); // #cc0036
|
|
128
|
-
darken('oklch(47.642% 0.29956 274.93693)', 10); // oklch(40.377% 0.25281 275.46794)
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
**saturate(input: string, amount: number): string**
|
|
132
|
-
Get a color with increased saturation.
|
|
133
|
-
|
|
134
|
-
```typescript
|
|
135
|
-
import { saturate } from 'colorizr';
|
|
136
|
-
|
|
137
|
-
saturate('#ff0044', 10); // #ff0044 (already at the maximum)
|
|
138
|
-
saturate('pink', 10); // #ffc0cb
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
**desaturate(input: string, amount: number): string**
|
|
142
|
-
Get a color with decreased saturation.
|
|
143
|
-
|
|
144
|
-
```typescript
|
|
145
|
-
import { desaturate } from 'colorizr';
|
|
146
|
-
|
|
147
|
-
desaturate('#ff0044', 10); // #f20d4a
|
|
148
|
-
desaturate('oklab(70.622% 0.1374 0.14283)', 10); // oklab(69.021% 0.12176 0.13721)
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
**invert(input: string): string**
|
|
152
|
-
Invert the color by rotating the hue 180 degrees.
|
|
153
|
-
|
|
154
|
-
```typescript
|
|
155
|
-
import { invert } from 'colorizr';
|
|
156
|
-
|
|
157
|
-
invert('#07e'); // '#ee7700'
|
|
158
|
-
invert('#f058'); // '#00ffaa'
|
|
159
|
-
```
|
|
160
|
-
|
|
161
|
-
**rotate(input: string, degrees: number): string**
|
|
162
|
-
Get a color with a hue rotated by the specified degrees.
|
|
163
|
-
|
|
164
|
-
```typescript
|
|
165
|
-
import { rotate } from 'colorizr';
|
|
166
|
-
|
|
167
|
-
rotate('#ff0044', 30); // #ff3b00
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
**opacify(input: string, alpha: number, format?: ColorType): string**
|
|
171
|
-
Add opacity to a color
|
|
172
|
-
|
|
173
|
-
```typescript
|
|
174
|
-
import { opacify } from 'colorizr';
|
|
175
|
-
|
|
176
|
-
opacify('hsl(344 100% 50%)', 0.9); // hsl(344 100% 50% / 90%)
|
|
177
|
-
opacify('#ff0044', 0.8); // #ff0044cc
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
**transparentize(input: string, alpha: number, format?: ColorType): string**
|
|
181
|
-
Increase/decrease the color opacity. The alpha range is -1 to 1 (positive decreases opacity, negative increases it).
|
|
182
|
-
|
|
183
|
-
```typescript
|
|
184
|
-
import { transparentize } from 'colorizr';
|
|
185
|
-
|
|
186
|
-
transparentize('hsl(344 100% 50%)', 0.1); // hsl(344 100% 50% / 90%)
|
|
187
|
-
transparentize('#ff0044', 0.5); // #ff004480
|
|
188
|
-
transparentize('#ff004480', -0.2); // #ff0044b3 (increases opacity)
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
**grayscale(input: string, format?: ColorType): string**
|
|
192
|
-
Convert a color to grayscale using OkLCH (perceptually uniform).
|
|
193
|
-
|
|
194
|
-
```typescript
|
|
195
|
-
import { grayscale } from 'colorizr';
|
|
196
|
-
|
|
197
|
-
grayscale('#ff0044'); // '#8a8a8a'
|
|
198
|
-
grayscale('hsl(180, 50%, 50%)'); // 'hsl(0 0% 66.67%)'
|
|
199
|
-
grayscale('#ff0000', 'oklch'); // 'oklch(62.796% 0 29.23494)'
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
**mix(color1: string, color2: string, ratio?: number, format?: ColorType): string**
|
|
203
|
-
Mix two colors in OkLCH space with shortest-path hue interpolation.
|
|
204
|
-
|
|
205
|
-
```typescript
|
|
206
|
-
import { mix } from 'colorizr';
|
|
207
|
-
|
|
208
|
-
mix('#ff0000', '#0000ff'); // '#ba00c2' (50% mix)
|
|
209
|
-
mix('#ff0000', '#0000ff', 0.25); // '#e8007b'
|
|
210
|
-
mix('#000000', '#ffffff', 0.5); // '#636363'
|
|
211
|
-
mix('hsl(0, 100%, 50%)', '#0000ff', 0.5); // 'hsl(297.53 100% 38.04%)'
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
### Comparison
|
|
215
|
-
|
|
216
|
-
**brightnessDifference(left: string, right: string): number**
|
|
217
|
-
Get the brightness difference between the two colors.
|
|
218
|
-
|
|
219
|
-
```typescript
|
|
220
|
-
import { brightnessDifference } from 'colorizr';
|
|
221
|
-
|
|
222
|
-
brightnessDifference('#fff', 'rgb(255, 0, 68)'); // 171.003
|
|
223
|
-
```
|
|
32
|
+
## Generating Scales & Palettes
|
|
224
33
|
|
|
225
|
-
|
|
226
|
-
Get the color difference between the two colors.
|
|
34
|
+
Build design system color scales with customizable variants:
|
|
227
35
|
|
|
228
36
|
```typescript
|
|
229
|
-
import {
|
|
230
|
-
|
|
231
|
-
colorDifference('hsl(0 0% 100%)', '#f04'); // 442
|
|
232
|
-
```
|
|
233
|
-
|
|
234
|
-
**compare(left: string, right: string): Analysis**
|
|
235
|
-
Get the WCAG analysis between two colors.
|
|
236
|
-
|
|
237
|
-
```typescript
|
|
238
|
-
import { compare } from 'colorizr';
|
|
239
|
-
|
|
240
|
-
compare('#ff0044', '#fff');
|
|
241
|
-
|
|
242
|
-
({
|
|
243
|
-
"brightnessDifference": 171.003,
|
|
244
|
-
"colorDifference": 442,
|
|
245
|
-
"compliant": 1,
|
|
246
|
-
"contrast": 3.94,
|
|
247
|
-
"largeAA": true,
|
|
248
|
-
"largeAAA": false,
|
|
249
|
-
"normalAA": false,
|
|
250
|
-
"normalAAA": false,
|
|
251
|
-
})
|
|
252
|
-
```
|
|
253
|
-
|
|
254
|
-
**contrast(left: string, right: string): number**
|
|
255
|
-
Get the WCAG contrast ratio between two colors.
|
|
256
|
-
|
|
257
|
-
```typescript
|
|
258
|
-
import { contrast } from 'colorizr';
|
|
259
|
-
|
|
260
|
-
contrast('hsl(0 0% 100%)', 'rgb(255 0 68)'); // 3.94
|
|
261
|
-
```
|
|
262
|
-
|
|
263
|
-
### Generators
|
|
264
|
-
|
|
265
|
-
**palette(input: string, options?: PaletteOptions): string[]**
|
|
266
|
-
Generate a palette of colors.
|
|
37
|
+
import { scale, palette, scheme } from 'colorizr';
|
|
267
38
|
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
```typescript
|
|
272
|
-
interface PaletteOptions {
|
|
273
|
-
/**
|
|
274
|
-
* Output color format.
|
|
275
|
-
*
|
|
276
|
-
* If not specified, the output will use the same format as the input color.
|
|
277
|
-
*/
|
|
278
|
-
format?: ColorType;
|
|
279
|
-
/**
|
|
280
|
-
* Adjusts the lightness of the base color before generating the palette.
|
|
281
|
-
*
|
|
282
|
-
* Value should be between 0 and 100.
|
|
283
|
-
*/
|
|
284
|
-
lightness?: number;
|
|
285
|
-
/**
|
|
286
|
-
* Adjusts the saturation of the base color before generating the palette.
|
|
287
|
-
*
|
|
288
|
-
* Value should be between 0 and 100.
|
|
289
|
-
*/
|
|
290
|
-
saturation?: number;
|
|
291
|
-
/**
|
|
292
|
-
* The number of colors to generate in the palette.
|
|
293
|
-
*
|
|
294
|
-
* Minimum value is 2.
|
|
295
|
-
* @default 6
|
|
296
|
-
*/
|
|
297
|
-
size?: number;
|
|
298
|
-
/**
|
|
299
|
-
* Generate a monochromatic palette.
|
|
300
|
-
*
|
|
301
|
-
* For more options, use the `scale` function.
|
|
302
|
-
*/
|
|
303
|
-
type?: 'monochromatic';
|
|
304
|
-
}
|
|
305
|
-
```
|
|
306
|
-
</details>
|
|
307
|
-
|
|
308
|
-
```typescript
|
|
309
|
-
import { palette } from 'colorizr';
|
|
39
|
+
scale('#3366ff');
|
|
40
|
+
// { 50: '#f0f5ff', 100: '#e4edff', ..., 900: '#06009a', 950: '#020052' }
|
|
310
41
|
|
|
311
42
|
palette('#ff0044');
|
|
312
|
-
// ['#ff0044', '#
|
|
313
|
-
|
|
314
|
-
palette('#ff0044', { type: 'monochromatic' });
|
|
315
|
-
// ['#ff99b4', '#ff5582', '#ff1150', '#cc0036', '#880024', '#440012']
|
|
316
|
-
```
|
|
317
|
-
|
|
318
|
-
**scheme(input: string, type: SchemeOptions): string[]**
|
|
319
|
-
Get a color scheme.
|
|
320
|
-
|
|
321
|
-
<details>
|
|
322
|
-
<summary>Type Definition</summary>
|
|
323
|
-
|
|
324
|
-
```typescript
|
|
325
|
-
interface SchemeOptions {
|
|
326
|
-
/**
|
|
327
|
-
* Output color format.
|
|
328
|
-
*
|
|
329
|
-
* If not specified, the output will use the same format as the input color.
|
|
330
|
-
*/
|
|
331
|
-
format?: ColorType;
|
|
332
|
-
/**
|
|
333
|
-
* The type of scheme to generate.
|
|
334
|
-
* @default 'complementary'
|
|
335
|
-
*/
|
|
336
|
-
type?: Scheme;
|
|
337
|
-
}
|
|
338
|
-
```
|
|
339
|
-
</details>
|
|
340
|
-
|
|
341
|
-
```typescript
|
|
342
|
-
import { scheme } from 'colorizr';
|
|
343
|
-
|
|
344
|
-
const complementary = scheme('rgb(255 0 68)'); // ['rgb(255 0 68)', 'rgb(0 255 187)']
|
|
345
|
-
const triadic = scheme('#ff0044', 'triadic'); // ['#ff0044', '#44ff00', '#0044ff']
|
|
346
|
-
```
|
|
347
|
-
|
|
348
|
-
**scale(input: string, options?: ScaleOptions): Record<number, string>**
|
|
349
|
-
Generate a perceptual color scale with advanced options.
|
|
350
|
-
|
|
351
|
-
<details>
|
|
352
|
-
<summary>Type Definition</summary>
|
|
353
|
-
|
|
354
|
-
```typescript
|
|
355
|
-
interface ScaleOptions {
|
|
356
|
-
/**
|
|
357
|
-
* Controls chroma adjustment across lightness levels.
|
|
358
|
-
* Values between 0-1 interpolate between these behaviors.
|
|
359
|
-
*
|
|
360
|
-
* @default 0
|
|
361
|
-
*/
|
|
362
|
-
chromaCurve?: number;
|
|
363
|
-
/**
|
|
364
|
-
* Output color format.
|
|
365
|
-
*
|
|
366
|
-
* Determines the format of the generated colors (e.g., HEX, RGB, OKLCH, etc.).
|
|
367
|
-
*
|
|
368
|
-
* If not specified, the output will match the format of the input color.
|
|
369
|
-
*/
|
|
370
|
-
format?: ColorType;
|
|
371
|
-
/**
|
|
372
|
-
* The lightness tuning factor for the scale.
|
|
373
|
-
* - 1: Linear lightness distribution.
|
|
374
|
-
* - >1: Lighter tones are emphasized.
|
|
375
|
-
* - <1: Darker tones are emphasized.
|
|
376
|
-
* @default 1.5
|
|
377
|
-
*/
|
|
378
|
-
lightnessCurve?: number;
|
|
379
|
-
/**
|
|
380
|
-
* Lock input color at specific step position.
|
|
381
|
-
*
|
|
382
|
-
* The input color will appear exactly at this step, and other steps
|
|
383
|
-
* will be calculated relative to this anchor point.
|
|
384
|
-
*
|
|
385
|
-
* Must be a valid key for the current step count.
|
|
386
|
-
*/
|
|
387
|
-
lock?: number;
|
|
388
|
-
/**
|
|
389
|
-
* The maximum lightness value for the scale.
|
|
390
|
-
*
|
|
391
|
-
* Defines the upper bound for the lightest color in the palette.
|
|
392
|
-
*
|
|
393
|
-
* A number between 0 and 1.
|
|
394
|
-
* @default 0.97
|
|
395
|
-
*/
|
|
396
|
-
maxLightness?: number;
|
|
397
|
-
/**
|
|
398
|
-
* The minimum lightness value for the scale.
|
|
399
|
-
*
|
|
400
|
-
* Defines the lower bound for the darkest color in the palette.
|
|
401
|
-
*
|
|
402
|
-
* A number between 0 and 1.
|
|
403
|
-
*
|
|
404
|
-
* @default 0.2
|
|
405
|
-
*/
|
|
406
|
-
minLightness?: number;
|
|
407
|
-
/**
|
|
408
|
-
* Theme-aware lightness direction.
|
|
409
|
-
*
|
|
410
|
-
* - 'light': Low keys (50) are lightest, high keys (950) are darkest
|
|
411
|
-
* - 'dark': Low keys (50) are darkest, high keys (950) are lightest
|
|
412
|
-
*
|
|
413
|
-
* @default 'light'
|
|
414
|
-
*/
|
|
415
|
-
mode?: ScaleMode;
|
|
416
|
-
/**
|
|
417
|
-
* Global saturation override (0-100).
|
|
418
|
-
*
|
|
419
|
-
* When set, overrides the chroma for all generated shades.
|
|
420
|
-
* Maps to chroma in OKLCH space.
|
|
421
|
-
*
|
|
422
|
-
* Overrides `variant` if both are set.
|
|
423
|
-
*/
|
|
424
|
-
saturation?: number;
|
|
425
|
-
/**
|
|
426
|
-
* Number of steps in the scale (3-20).
|
|
427
|
-
*
|
|
428
|
-
* Controls how many color shades are generated.
|
|
429
|
-
*
|
|
430
|
-
* @default 11
|
|
431
|
-
*/
|
|
432
|
-
steps?: number;
|
|
433
|
-
/**
|
|
434
|
-
* The variant of the scale.
|
|
435
|
-
* - 'deep': Generates rich and bold tones with significantly reduced lightness.
|
|
436
|
-
* - 'neutral': Generates muted tones by reducing chroma.
|
|
437
|
-
* - 'pastel': Produces soft and airy tones with significant chroma reduction.
|
|
438
|
-
* - 'subtle': Creates extremely desaturated tones, close to grayscale.
|
|
439
|
-
* - 'vibrant': Enhances chroma for bold and striking tones.
|
|
440
|
-
*/
|
|
441
|
-
variant?: ScaleVariant;
|
|
442
|
-
}
|
|
443
|
-
```
|
|
444
|
-
</details>
|
|
445
|
-
|
|
446
|
-
```typescript
|
|
447
|
-
import { scale } from 'colorizr';
|
|
448
|
-
|
|
449
|
-
scale('#ff0044');
|
|
450
|
-
/*
|
|
451
|
-
{
|
|
452
|
-
50: '#ffeeed',
|
|
453
|
-
100: '#ffe0df',
|
|
454
|
-
200: '#ffc7c6',
|
|
455
|
-
300: '#ffa7a7',
|
|
456
|
-
400: '#ff8186',
|
|
457
|
-
500: '#ff5464',
|
|
458
|
-
600: '#f20f42',
|
|
459
|
-
700: '#d40021',
|
|
460
|
-
800: '#ad0000',
|
|
461
|
-
900: '#7d0000',
|
|
462
|
-
950: '#470000'
|
|
463
|
-
}
|
|
464
|
-
*/
|
|
465
|
-
|
|
466
|
-
scale(
|
|
467
|
-
'#ff0044',
|
|
468
|
-
{ lightnessCurve: 1.6, lock: 500, steps: 10, format: 'oklch' },
|
|
469
|
-
);
|
|
470
|
-
/*
|
|
471
|
-
{
|
|
472
|
-
50: 'oklch(97% 0.25404 19.90218)',
|
|
473
|
-
100: 'oklch(94.432% 0.25404 19.90218)',
|
|
474
|
-
200: 'oklch(89.214% 0.25404 19.90218)',
|
|
475
|
-
300: 'oklch(82.104% 0.25404 19.90218)',
|
|
476
|
-
400: 'oklch(73.397% 0.25404 19.90218)',
|
|
477
|
-
500: 'oklch(63.269% 0.25404 19.90218)',
|
|
478
|
-
600: 'oklch(58.561% 0.25404 19.90218)',
|
|
479
|
-
700: 'oklch(48.996% 0.25404 19.90218)',
|
|
480
|
-
800: 'oklch(35.962% 0.25404 19.90218)',
|
|
481
|
-
900: 'oklch(20% 0.25404 19.90218)'
|
|
482
|
-
}
|
|
483
|
-
*/
|
|
484
|
-
```
|
|
485
|
-
|
|
486
|
-
**getScaleStepKeys(steps: number): number[]**
|
|
487
|
-
Get the step keys for a given step count (3-20).
|
|
488
|
-
|
|
489
|
-
```typescript
|
|
490
|
-
import { getScaleStepKeys } from 'colorizr';
|
|
491
|
-
|
|
492
|
-
getScaleStepKeys(3); // [100, 500, 900]
|
|
493
|
-
getScaleStepKeys(5); // [100, 300, 500, 700, 900]
|
|
494
|
-
getScaleStepKeys(11); // [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
|
|
495
|
-
```
|
|
496
|
-
|
|
497
|
-
### Converters
|
|
498
|
-
|
|
499
|
-
The default precision is 5.
|
|
500
|
-
|
|
501
|
-
**convert(input: string, format: ColorType): string**
|
|
502
|
-
Convert a color string to another format.
|
|
503
|
-
|
|
504
|
-
```typescript
|
|
505
|
-
import { convert } from 'colorizr';
|
|
506
|
-
|
|
507
|
-
convert('#ff0044', 'hsl') // hsl(344 100% 50%)
|
|
508
|
-
convert('rgb(255 0 68)', 'oklch') // oklch(63.269% 0.25404 19.90218)
|
|
509
|
-
```
|
|
510
|
-
|
|
511
|
-
**hex2hsl(input: string): HSL**
|
|
512
|
-
Convert HEX to HSL.
|
|
513
|
-
|
|
514
|
-
```typescript
|
|
515
|
-
import { hex2hsl } from 'colorizr';
|
|
516
|
-
|
|
517
|
-
hex2hsl('#ff0044'); // { h: 344, s: 100, l: 50 }
|
|
518
|
-
```
|
|
519
|
-
|
|
520
|
-
**hex2oklab(input: string, precision?: number): LAB**
|
|
521
|
-
Convert HEX to OKLAB.
|
|
522
|
-
|
|
523
|
-
```typescript
|
|
524
|
-
import { hex2oklab } from 'colorizr';
|
|
525
|
-
|
|
526
|
-
hex2oklab('#ff0044'); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
527
|
-
```
|
|
528
|
-
|
|
529
|
-
**hex2oklch(input: string, precision?: number): LCH**
|
|
530
|
-
Convert HEX to OKLCH.
|
|
531
|
-
|
|
532
|
-
```typescript
|
|
533
|
-
import { hex2oklch } from 'colorizr';
|
|
534
|
-
|
|
535
|
-
hex2oklch('#ff0044'); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
536
|
-
```
|
|
537
|
-
|
|
538
|
-
**hex2rgb(input: string): RGB**
|
|
539
|
-
Convert HEX to RGB.
|
|
540
|
-
|
|
541
|
-
```typescript
|
|
542
|
-
import { hex2rgb } from 'colorizr';
|
|
543
|
-
|
|
544
|
-
hex2rgb('#ff0044'); // { r: 255, g: 0, b: 68 }
|
|
545
|
-
```
|
|
546
|
-
|
|
547
|
-
**hsl2hex(input: HSL | ColorTuple): string**
|
|
548
|
-
Convert HSL to HEX.
|
|
549
|
-
|
|
550
|
-
```typescript
|
|
551
|
-
import { hsl2hex } from 'colorizr';
|
|
552
|
-
|
|
553
|
-
hsl2hex({ h: 344, s: 100, l: 50 }); // '#ff0044'
|
|
554
|
-
hsl2hex([344, 100, 50]); // '#ff0044'
|
|
555
|
-
```
|
|
556
|
-
|
|
557
|
-
**hsl2oklab(input: HSL | ColorTuple, precision?: number): LAB**
|
|
558
|
-
Convert HSL to OKLAB.
|
|
559
|
-
|
|
560
|
-
```typescript
|
|
561
|
-
import { hsl2oklab } from 'colorizr';
|
|
562
|
-
|
|
563
|
-
hsl2oklab({ h: 344, s: 100, l: 50 }); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
564
|
-
hsl2oklab([344, 100, 50]); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
565
|
-
```
|
|
566
|
-
|
|
567
|
-
**hsl2oklch(input: HSL | ColorTuple, precision?: number): LCH**
|
|
568
|
-
Convert HSL to OKLCH.
|
|
569
|
-
|
|
570
|
-
```typescript
|
|
571
|
-
import { hsl2oklch } from 'colorizr';
|
|
572
|
-
|
|
573
|
-
hsl2oklch({ h: 344, s: 100, l: 50 }); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
574
|
-
hsl2oklch([344, 100, 50]); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
575
|
-
```
|
|
43
|
+
// ['#ff0044', '#ffbb00', '#44ff00', '#00ffbb', '#0044ff', '#bb00ff']
|
|
576
44
|
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
```typescript
|
|
581
|
-
import { hsl2rgb } from 'colorizr';
|
|
582
|
-
|
|
583
|
-
hsl2rgb({ h: 344, s: 100, l: 50 }); // { r: 255, g: 0, b: 68 }
|
|
584
|
-
hsl2rgb([344, 100, 50]); // { r: 255, g: 0, b: 68 }
|
|
585
|
-
```
|
|
586
|
-
|
|
587
|
-
**oklab2hex(input: LAB | ColorTuple): string**
|
|
588
|
-
Convert OKLAB to HEX.
|
|
589
|
-
|
|
590
|
-
```typescript
|
|
591
|
-
import { oklab2hex } from 'colorizr';
|
|
592
|
-
|
|
593
|
-
oklab2hex({ l: 0.63269, a: 0.23887, b: 0.08648 }); // '#ff0044'
|
|
594
|
-
oklab2hex([0.63269, 0.23887, 0.08648]); // '#ff0044'
|
|
595
|
-
```
|
|
596
|
-
|
|
597
|
-
**oklab2hsl(input: LAB | ColorTuple): HSL**
|
|
598
|
-
Convert OKLAB to HSL.
|
|
599
|
-
|
|
600
|
-
```typescript
|
|
601
|
-
import { oklab2hsl } from 'colorizr';
|
|
602
|
-
|
|
603
|
-
oklab2hsl({ l: 0.63269, a: 0.23887, b: 0.08648 }); // { h: 344, s: 100, l: 50 }
|
|
604
|
-
oklab2hsl([0.63269, 0.23887, 0.08648]); // { h: 344, s: 100, l: 50 }
|
|
605
|
-
```
|
|
606
|
-
|
|
607
|
-
**oklab2oklch(input: LAB | ColorTuple, precision?: number): LCH**
|
|
608
|
-
Convert OKLAB to OKLCH.
|
|
609
|
-
|
|
610
|
-
```typescript
|
|
611
|
-
import { oklab2oklch } from 'colorizr';
|
|
612
|
-
|
|
613
|
-
oklab2oklch({ l: 0.63269, a: 0.23887, b: 0.08648 }); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
614
|
-
oklab2oklch([0.63269, 0.23887, 0.08648]); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
615
|
-
```
|
|
616
|
-
|
|
617
|
-
**oklab2rgb(input: LAB | ColorTuple, precision: number = 0): RGB**
|
|
618
|
-
Convert OKLAB to RGB.
|
|
619
|
-
|
|
620
|
-
```typescript
|
|
621
|
-
import { oklab2rgb } from 'colorizr';
|
|
622
|
-
|
|
623
|
-
oklab2rgb({ l: 0.63269, a: 0.23887, b: 0.08648 }); // { r: 255, g: 0, b: 68 }
|
|
624
|
-
oklab2rgb([0.63269, 0.23887, 0.08648]); // { r: 255, g: 0, b: 68 }
|
|
625
|
-
```
|
|
626
|
-
|
|
627
|
-
**oklch2hex(input: LCH | ColorTuple): string**
|
|
628
|
-
Convert OKLCH to HEX.
|
|
629
|
-
|
|
630
|
-
```typescript
|
|
631
|
-
import { oklch2hex } from 'colorizr';
|
|
632
|
-
|
|
633
|
-
oklch2hex({ l: 0.63269, c: 0.25404, h: 19.90218 }); // '#ff0044'
|
|
634
|
-
oklch2hex([0.63269, 0.25404, 19.90218]); // '#ff0044'
|
|
635
|
-
```
|
|
636
|
-
|
|
637
|
-
**oklch2hsl(input: LCH | ColorTuple): HSL**
|
|
638
|
-
Convert OKLCH to HSL.
|
|
639
|
-
|
|
640
|
-
```typescript
|
|
641
|
-
import { oklch2hsl } from 'colorizr';
|
|
642
|
-
|
|
643
|
-
oklch2hsl({ l: 0.63269, c: 0.25404, h: 19.90218 }); // { h: 344, s: 100, l: 50 }
|
|
644
|
-
oklch2hsl([0.63269, 0.25404, 19.90218]); // { h: 344, s: 100, l: 50 }
|
|
645
|
-
```
|
|
646
|
-
|
|
647
|
-
**oklch2oklab(input: LCH | ColorTuple, precision?: number): LAB**
|
|
648
|
-
Convert OKLCH to OKLAB.
|
|
649
|
-
|
|
650
|
-
```typescript
|
|
651
|
-
import { oklch2oklab } from 'colorizr';
|
|
652
|
-
|
|
653
|
-
oklch2oklab({ l: 0.63269, c: 0.25404, h: 19.90218 }); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
654
|
-
oklch2oklab([0.63269, 0.25404, 19.90218]); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
655
|
-
```
|
|
656
|
-
|
|
657
|
-
**oklch2rgb(input: LCH | ColorTuple, precision: number = 0): RGB**
|
|
658
|
-
Convert OKLCH to RGB.
|
|
659
|
-
|
|
660
|
-
```typescript
|
|
661
|
-
import { oklch2rgb } from 'colorizr';
|
|
662
|
-
|
|
663
|
-
oklch2rgb({ l: 0.63269, c: 0.25404, h: 19.90218 }); // { r: 255, g: 0, b: 68 }
|
|
664
|
-
oklch2rgb([0.63269, 0.25404, 19.90218]); // { r: 255, g: 0, b: 68 }
|
|
665
|
-
```
|
|
666
|
-
|
|
667
|
-
**rgb2hex(input: RGB | ColorTuple): string**
|
|
668
|
-
Convert RGB to HEX.
|
|
669
|
-
|
|
670
|
-
```typescript
|
|
671
|
-
import { rgb2hex } from 'colorizr';
|
|
672
|
-
|
|
673
|
-
rgb2hex({ r: 255, g: 0, b: 68 }); // '#ff0044'
|
|
674
|
-
rgb2hex([255, 0, 68]); // '#ff0044'
|
|
675
|
-
```
|
|
676
|
-
|
|
677
|
-
**rgb2hsl(input: RGB | ColorTuple): HSL**
|
|
678
|
-
Convert RGB to HSL.
|
|
679
|
-
|
|
680
|
-
```typescript
|
|
681
|
-
import { rgb2hsl } from 'colorizr';
|
|
682
|
-
|
|
683
|
-
rgb2hsl({ r: 255, g: 0, b: 68 }); // { h: 344, s: 100, l: 50 }
|
|
684
|
-
rgb2hsl([255, 0, 68]); // { h: 344, s: 100, l: 50 }
|
|
685
|
-
```
|
|
686
|
-
|
|
687
|
-
**rgb2oklab(input: RGB | ColorTuple, precision?: number): LAB**
|
|
688
|
-
Convert RGB to OKLAB.
|
|
689
|
-
|
|
690
|
-
```typescript
|
|
691
|
-
import { rgb2oklab } from 'colorizr';
|
|
692
|
-
|
|
693
|
-
rgb2oklab({ r: 255, g: 0, b: 68 }); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
694
|
-
rgb2oklab([255, 0, 68]); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
695
|
-
```
|
|
696
|
-
|
|
697
|
-
**rgb2oklch(input: RGB | ColorTuple, precision?: number): LCH**
|
|
698
|
-
Convert RGB to OKLCH.
|
|
699
|
-
|
|
700
|
-
```typescript
|
|
701
|
-
import { rgb2oklch } from 'colorizr';
|
|
702
|
-
|
|
703
|
-
rgb2oklch({ r: 255, g: 0, b: 68 }); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
704
|
-
rgb2oklch([255, 0, 68]); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
705
|
-
```
|
|
706
|
-
|
|
707
|
-
### Utilities
|
|
708
|
-
|
|
709
|
-
**addAlphaToHex(input: string, alpha: number): string**
|
|
710
|
-
Add an alpha value to a hex string
|
|
711
|
-
|
|
712
|
-
```typescript
|
|
713
|
-
import { addAlphaToHex } from 'colorizr';
|
|
714
|
-
|
|
715
|
-
addAlphaToHex('#ff0044', 0.9); // '#ff0044e6'
|
|
716
|
-
addAlphaToHex('#ff0044cc', 0.9); // '#ff0044e6'
|
|
717
|
-
```
|
|
718
|
-
|
|
719
|
-
**apcaContrast(background: string, foreground: string): number**
|
|
720
|
-
Calculate APCA contrast between two colors. APCA (Accessible Perceptual Contrast Algorithm) is the contrast method proposed for WCAG 3.0.
|
|
721
|
-
|
|
722
|
-
Returns the Lc (Lightness contrast) value:
|
|
723
|
-
- Positive values indicate dark text on light background
|
|
724
|
-
- Negative values indicate light text on dark background
|
|
725
|
-
|
|
726
|
-
```typescript
|
|
727
|
-
import { apcaContrast } from 'colorizr';
|
|
728
|
-
|
|
729
|
-
apcaContrast('#ffffff', '#000000'); // 106.04 (black text on white bg)
|
|
730
|
-
apcaContrast('#000000', '#ffffff'); // -107.88 (white text on black bg)
|
|
731
|
-
apcaContrast('#888888', '#ffffff'); // -68.54 (white text on gray bg)
|
|
732
|
-
```
|
|
733
|
-
|
|
734
|
-
**convertAlphaToHex(input: number): string**
|
|
735
|
-
Convert an alpha value to a hex value.
|
|
736
|
-
|
|
737
|
-
```typescript
|
|
738
|
-
import { convertAlphaToHex } from 'colorizr';
|
|
739
|
-
|
|
740
|
-
convertAlphaToHex(0.5); // '80'
|
|
741
|
-
```
|
|
742
|
-
|
|
743
|
-
**extractAlphaFromHex(input: string): number**
|
|
744
|
-
Extract the alpha value from a hex string
|
|
745
|
-
|
|
746
|
-
```typescript
|
|
747
|
-
import { extractAlphaFromHex } from 'colorizr';
|
|
748
|
-
|
|
749
|
-
extractAlphaFromHex('#ff004480'); // 0.5
|
|
750
|
-
```
|
|
751
|
-
|
|
752
|
-
**extractColorParts(input: string): ExtractColorPartsReturn**
|
|
753
|
-
Extract the color parts from a CSS color string.
|
|
754
|
-
Hex colors are not supported.
|
|
755
|
-
|
|
756
|
-
```typescript
|
|
757
|
-
type ExtractColorPartsReturn = {
|
|
758
|
-
alpha?: number;
|
|
759
|
-
model: 'hsl' | 'oklab' | 'oklch' | 'rgb';
|
|
760
|
-
} & Record<string, number>;
|
|
761
|
-
|
|
762
|
-
extractColorParts('rgb(255 0 68)') // { model: 'rgb', r: 255, g: 0, b: 68 }
|
|
763
|
-
extractColorParts('hsl(344 100% 50% / 90%)') // { alpha: 0.9, model: 'hsl', h: 344, s: 100, l: 50 }
|
|
45
|
+
scheme('#ff0044', 'triadic');
|
|
46
|
+
// ['#ff0044', '#44ff00', '#0044ff']
|
|
764
47
|
```
|
|
765
48
|
|
|
766
|
-
|
|
767
|
-
Get a CSS string from a color object.
|
|
49
|
+
## Accessibility & Contrast
|
|
768
50
|
|
|
769
|
-
|
|
770
|
-
<summary>Type Definition</summary>
|
|
771
|
-
|
|
772
|
-
```typescript
|
|
773
|
-
interface FormatCSSOptions {
|
|
774
|
-
/**
|
|
775
|
-
* The alpha value of the color (0-1).
|
|
776
|
-
*/
|
|
777
|
-
alpha?: number;
|
|
778
|
-
/**
|
|
779
|
-
* Output color format.
|
|
780
|
-
* @default 'hex'
|
|
781
|
-
*/
|
|
782
|
-
format?: ColorType;
|
|
783
|
-
/**
|
|
784
|
-
* The number of digits of the output.
|
|
785
|
-
* @default 5
|
|
786
|
-
*/
|
|
787
|
-
precision?: number;
|
|
788
|
-
/**
|
|
789
|
-
* The separator between the values.
|
|
790
|
-
*
|
|
791
|
-
* oklab and oklch always use space as a separator.
|
|
792
|
-
* @default ' '
|
|
793
|
-
*/
|
|
794
|
-
separator?: string;
|
|
795
|
-
}
|
|
796
|
-
```
|
|
797
|
-
</details>
|
|
798
|
-
|
|
799
|
-
```typescript
|
|
800
|
-
import { formatCSS } from 'colorizr';
|
|
801
|
-
|
|
802
|
-
formatCSS({ h: 344, s: 100, l: 50 }, { format: 'rgb' }); // 'rgb(255, 0, 68)'
|
|
803
|
-
formatCSS({ r: 255, g: 0, b: 68 }, { alpha: 0.5, format: 'hsl' }); // 'hsla(344, 100%, 50%, 0.5)'
|
|
804
|
-
```
|
|
805
|
-
|
|
806
|
-
**formatHex(input: string): string**
|
|
807
|
-
Format a short hex string of 3 (or 4) digits into 6 (or 8) digits.
|
|
808
|
-
|
|
809
|
-
```typescript
|
|
810
|
-
import { formatHex } from 'colorizr';
|
|
811
|
-
|
|
812
|
-
formatHex('#07e'); // '#0077ee'
|
|
813
|
-
formatHex('#f058'); // '#ff005588'
|
|
814
|
-
```
|
|
815
|
-
|
|
816
|
-
**getColorType(input: string): ColorTypeInput | null**
|
|
817
|
-
Detect the color type from a CSS color string.
|
|
818
|
-
|
|
819
|
-
```typescript
|
|
820
|
-
import { getColorType } from 'colorizr';
|
|
821
|
-
|
|
822
|
-
getColorType('#ff0044'); // 'hex'
|
|
823
|
-
getColorType('red'); // 'named'
|
|
824
|
-
getColorType('hsl(344 100% 50%)'); // 'hsl'
|
|
825
|
-
getColorType('rgb(255 0 68)'); // 'rgb'
|
|
826
|
-
getColorType('oklab(0.63 0.24 0.09)'); // 'oklab'
|
|
827
|
-
getColorType('oklch(0.63 0.25 20)'); // 'oklch'
|
|
828
|
-
getColorType('invalid'); // null
|
|
829
|
-
```
|
|
830
|
-
|
|
831
|
-
**getOkLCHMaxChroma(input: string | LCH, precision?: number): number**
|
|
832
|
-
Get the maximum chroma for a given lightness and hue in the OkLCH color space.
|
|
833
|
-
|
|
834
|
-
```typescript
|
|
835
|
-
import { getOkLCHMaxChroma } from 'colorizr';
|
|
836
|
-
|
|
837
|
-
getOkLCHMaxChroma({ l: 0.63269, c: 0.25404, h: 19.90218 }); // 0.28643
|
|
838
|
-
getOkLCHMaxChroma('#00ff44'); // 0.30921
|
|
839
|
-
```
|
|
840
|
-
|
|
841
|
-
**getP3MaxColor(input: string | LCH): string**
|
|
842
|
-
Get a OkLCH color with maxed chroma in the P3 color space.
|
|
843
|
-
|
|
844
|
-
```typescript
|
|
845
|
-
import { getP3MaxColor } from 'colorizr';
|
|
846
|
-
|
|
847
|
-
getP3MaxColor({ l: 0.63269, c: 0.25404, h: 19.90218 }); // oklch(0.63269 0.28643 19.90218)
|
|
848
|
-
getP3MaxColor('#00ff44'); // oklch(0.86876 0.30921 144.65534)
|
|
849
|
-
```
|
|
850
|
-
|
|
851
|
-
**parseCSS(input: string, format?: ColorType): string | HSL | RGB**
|
|
852
|
-
Parse a css string to hex, HSL, OKLAB, OKLCH, or RGB.
|
|
853
|
-
If the format isn't set, it will return the same format as the input.
|
|
854
|
-
|
|
855
|
-
```typescript
|
|
856
|
-
import { parseCSS } from 'colorizr';
|
|
857
|
-
|
|
858
|
-
parseCSS('hsl(344 100% 50%)'); // { h: 344, l: 50, s: 100 }
|
|
859
|
-
parseCSS('#ff0044', 'hsl'); // { h: 344, l: 50, s: 100 }
|
|
860
|
-
```
|
|
861
|
-
|
|
862
|
-
**random(options?: RandomOptions): string**
|
|
863
|
-
Generate a random color.
|
|
864
|
-
|
|
865
|
-
<details>
|
|
866
|
-
<summary>Type Definition</summary>
|
|
867
|
-
|
|
868
|
-
```typescript
|
|
869
|
-
interface RandomOptions {
|
|
870
|
-
/**
|
|
871
|
-
* The color format to return.
|
|
872
|
-
* @default 'hex'
|
|
873
|
-
*/
|
|
874
|
-
format?: ColorType;
|
|
875
|
-
/**
|
|
876
|
-
* Maximum hue value (0-360).
|
|
877
|
-
* @default 360
|
|
878
|
-
*/
|
|
879
|
-
maxHue?: number;
|
|
880
|
-
/**
|
|
881
|
-
* Maximum lightness value (0-100).
|
|
882
|
-
* @default 90
|
|
883
|
-
*/
|
|
884
|
-
maxLightness?: number;
|
|
885
|
-
/**
|
|
886
|
-
* Maximum saturation value (0-100).
|
|
887
|
-
* @default 100
|
|
888
|
-
*/
|
|
889
|
-
maxSaturation?: number;
|
|
890
|
-
/**
|
|
891
|
-
* Minimum hue value (0-360).
|
|
892
|
-
* If minHue > maxHue, the range wraps around 0° (e.g., 330-30 for reds).
|
|
893
|
-
* @default 0
|
|
894
|
-
*/
|
|
895
|
-
minHue?: number;
|
|
896
|
-
/**
|
|
897
|
-
* Minimum lightness value (0-100).
|
|
898
|
-
* @default 10
|
|
899
|
-
*/
|
|
900
|
-
minLightness?: number;
|
|
901
|
-
/**
|
|
902
|
-
* Minimum saturation value (0-100).
|
|
903
|
-
* @default 10
|
|
904
|
-
*/
|
|
905
|
-
minSaturation?: number;
|
|
906
|
-
}
|
|
907
|
-
```
|
|
908
|
-
</details>
|
|
909
|
-
|
|
910
|
-
```typescript
|
|
911
|
-
import { random } from 'colorizr';
|
|
912
|
-
|
|
913
|
-
random(); // '#b385e0'
|
|
914
|
-
random({ format: 'oklch', minLightness: 40 }) // oklch(58.443% 0.2934 306.42895)
|
|
915
|
-
```
|
|
916
|
-
|
|
917
|
-
**removeAlphaFromHex(input: string): string**
|
|
918
|
-
Remove the alpha value from a hex string
|
|
919
|
-
|
|
920
|
-
```typescript
|
|
921
|
-
import { removeAlphaFromHex } from 'colorizr';
|
|
922
|
-
|
|
923
|
-
removeAlphaFromHex('#ff0044cc'); // '#ff0044'
|
|
924
|
-
```
|
|
925
|
-
|
|
926
|
-
**readableColor(backgroundColor: string, options?: ReadableColorOptions): string**
|
|
927
|
-
Get the most readable color (light or dark) for a given background.
|
|
928
|
-
|
|
929
|
-
<details>
|
|
930
|
-
<summary>Type Definition</summary>
|
|
931
|
-
|
|
932
|
-
```typescript
|
|
933
|
-
interface ReadableColorOptions {
|
|
934
|
-
/**
|
|
935
|
-
* The dark color to return if the background is light.
|
|
936
|
-
* @default '#000000'
|
|
937
|
-
*/
|
|
938
|
-
darkColor?: string;
|
|
939
|
-
/**
|
|
940
|
-
* The light color to return if the background is dark.
|
|
941
|
-
* @default '#ffffff'
|
|
942
|
-
*/
|
|
943
|
-
lightColor?: string;
|
|
944
|
-
/**
|
|
945
|
-
* The method to use for determining contrast.
|
|
946
|
-
*
|
|
947
|
-
* - `yiq`: YIQ brightness formula (fast, simple)
|
|
948
|
-
* - `wcag`: WCAG 2.x relative luminance threshold
|
|
949
|
-
* - `contrast`: WCAG 2.x contrast ratio comparison
|
|
950
|
-
* - `oklab`: OkLab perceptual lightness threshold
|
|
951
|
-
* - `apca`: APCA contrast comparison (WCAG 3.0 candidate)
|
|
952
|
-
*
|
|
953
|
-
* @default 'yiq'
|
|
954
|
-
*/
|
|
955
|
-
method?: ReadableColorMethod;
|
|
956
|
-
/**
|
|
957
|
-
* The threshold for threshold-based methods.
|
|
958
|
-
*
|
|
959
|
-
* - `yiq`: 0-255 (default: 128)
|
|
960
|
-
* - `wcag`: 0-1 (default: 0.5)
|
|
961
|
-
* - `oklab`: 0-1 (default: 0.5)
|
|
962
|
-
* - `contrast` and `apca`: ignored (comparison-based)
|
|
963
|
-
*/
|
|
964
|
-
threshold?: number;
|
|
965
|
-
}
|
|
966
|
-
```
|
|
967
|
-
</details>
|
|
51
|
+
Analyze contrast ratios and find readable text colors:
|
|
968
52
|
|
|
969
53
|
```typescript
|
|
970
|
-
import { readableColor } from 'colorizr';
|
|
54
|
+
import { contrast, readableColor, compare, apcaContrast } from 'colorizr';
|
|
971
55
|
|
|
972
|
-
|
|
973
|
-
readableColor('#
|
|
56
|
+
contrast('#1a1a2e', '#ffffff'); // 17.05
|
|
57
|
+
readableColor('#ff0044'); // '#ffffff'
|
|
58
|
+
apcaContrast('#000000', '#ffffff'); // 106.04067
|
|
974
59
|
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
readableColor('#808080', { method: 'contrast' }); // '#000000'
|
|
978
|
-
readableColor('#808080', { method: 'apca' }); // '#ffffff'
|
|
979
|
-
|
|
980
|
-
// Custom colors and threshold
|
|
981
|
-
readableColor('#ff0044', {
|
|
982
|
-
darkColor: '#111',
|
|
983
|
-
lightColor: '#eee',
|
|
984
|
-
threshold: 150 // for yiq method (0-255)
|
|
985
|
-
});
|
|
986
|
-
|
|
987
|
-
readableColor('#ff0044', {
|
|
988
|
-
method: 'wcag',
|
|
989
|
-
threshold: 0.4 // for wcag/oklab methods (0-1)
|
|
990
|
-
});
|
|
991
|
-
```
|
|
992
|
-
|
|
993
|
-
**readableColorAPCA(backgroundColor: string, options?: ReadableColorAPCAOptions): string**
|
|
994
|
-
Get the most readable color using APCA contrast. Standalone function for APCA method.
|
|
995
|
-
|
|
996
|
-
<details>
|
|
997
|
-
<summary>Type Definition</summary>
|
|
998
|
-
|
|
999
|
-
```typescript
|
|
1000
|
-
interface ReadableColorAPCAOptions {
|
|
1001
|
-
/**
|
|
1002
|
-
* The dark color to return if it has better contrast.
|
|
1003
|
-
* @default '#000000'
|
|
1004
|
-
*/
|
|
1005
|
-
darkColor?: string;
|
|
1006
|
-
/**
|
|
1007
|
-
* The light color to return if it has better contrast.
|
|
1008
|
-
* @default '#ffffff'
|
|
1009
|
-
*/
|
|
1010
|
-
lightColor?: string;
|
|
1011
|
-
}
|
|
1012
|
-
```
|
|
1013
|
-
</details>
|
|
1014
|
-
|
|
1015
|
-
```typescript
|
|
1016
|
-
import { readableColorAPCA } from 'colorizr';
|
|
1017
|
-
|
|
1018
|
-
readableColorAPCA('#ffffff'); // '#000000'
|
|
1019
|
-
readableColorAPCA('#000000'); // '#ffffff'
|
|
1020
|
-
readableColorAPCA('#888888'); // '#ffffff' (APCA favors light text on mid-grays)
|
|
60
|
+
compare('#ff0044', '#ffffff');
|
|
61
|
+
// { contrast: 3.94, normalAA: false, largeAA: true, ... }
|
|
1021
62
|
```
|
|
1022
63
|
|
|
1023
|
-
|
|
64
|
+
## Manipulating Colors
|
|
1024
65
|
|
|
1025
|
-
|
|
1026
|
-
Check if the input is a valid color. Optionally validate against a specific color type.
|
|
66
|
+
Adjust lightness, saturation, hue, and opacity:
|
|
1027
67
|
|
|
1028
68
|
```typescript
|
|
1029
|
-
import {
|
|
69
|
+
import { lighten, darken, saturate, mix, rotate } from 'colorizr';
|
|
1030
70
|
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
isValidColor('hsla(344, 100%, 50%, 0.4)'); // true
|
|
1035
|
-
isValidColor('oklab(70.622% 0.1374 0.14283)'); // true
|
|
1036
|
-
isValidColor('oklch(47.642% 0.29956 274.93693)'); // true
|
|
1037
|
-
isValidColor('rgb(255 230 109)'); // true
|
|
1038
|
-
isValidColor('blue'); // true
|
|
1039
|
-
isValidColor('aliceblue'); // true
|
|
1040
|
-
isValidColor('#mmff00'); // false
|
|
1041
|
-
isValidColor('blue-ish'); // false
|
|
71
|
+
lighten('#ff0044', 20); // '#ff668f'
|
|
72
|
+
darken('#ff0044', 10); // '#cc0036'
|
|
73
|
+
rotate('#ff0044', 180); // '#00ffbb'
|
|
1042
74
|
|
|
1043
|
-
//
|
|
1044
|
-
|
|
1045
|
-
isValidColor('#ff0044', 'hsl'); // false
|
|
1046
|
-
isValidColor('hsl(0 100% 50%)', 'hsl'); // true
|
|
1047
|
-
isValidColor('blue', 'named'); // true
|
|
1048
|
-
isValidColor('blue', 'hex'); // false
|
|
75
|
+
mix('#ff0044', '#0066ff'); // '#bc34d7'
|
|
76
|
+
mix('#ff0044', '#0066ff', 0.5, { space: 'hsl' }); // '#aa00ff'
|
|
1049
77
|
```
|
|
1050
78
|
|
|
1051
|
-
|
|
1052
|
-
Check if the input is a valid hex color.
|
|
79
|
+
## Converting Colors
|
|
1053
80
|
|
|
1054
|
-
|
|
1055
|
-
import { isHex } from 'colorizr';
|
|
1056
|
-
|
|
1057
|
-
isHex('#f04'); // true
|
|
1058
|
-
isHex('#ff0044'); // true
|
|
1059
|
-
isHex('#ff0044cc'); // true
|
|
1060
|
-
```
|
|
1061
|
-
|
|
1062
|
-
**isHSL(input: unknown): boolean**
|
|
1063
|
-
Check if the input is a valid HSL object.
|
|
81
|
+
Convert between all supported color spaces:
|
|
1064
82
|
|
|
1065
83
|
```typescript
|
|
1066
|
-
import {
|
|
1067
|
-
|
|
1068
|
-
isHSL({ h: 344, s: 100, l: 50 }); // true
|
|
1069
|
-
```
|
|
84
|
+
import { convertCSS, hex2oklch, parseCSS } from 'colorizr';
|
|
1070
85
|
|
|
1071
|
-
|
|
1072
|
-
|
|
86
|
+
convertCSS('#ff0044', 'oklch'); // 'oklch(63.269% 0.25404 19.902)'
|
|
87
|
+
convertCSS('#ff0044', 'hsl'); // 'hsl(344 100% 50%)'
|
|
1073
88
|
|
|
1074
|
-
|
|
1075
|
-
|
|
89
|
+
hex2oklch('#ff0044');
|
|
90
|
+
// { l: 0.63269, c: 0.25404, h: 19.90224 }
|
|
1076
91
|
|
|
1077
|
-
|
|
92
|
+
parseCSS('hsl(344 100% 50%)');
|
|
93
|
+
// { h: 344, s: 100, l: 50 }
|
|
1078
94
|
```
|
|
1079
95
|
|
|
1080
|
-
|
|
1081
|
-
Check if the input is a valid LCH color.
|
|
96
|
+
## Class API
|
|
1082
97
|
|
|
1083
|
-
|
|
1084
|
-
import { isLCH } from 'colorizr';
|
|
1085
|
-
|
|
1086
|
-
isLCH({ l: 0.63269, c: 0.25404, h: 19.90218 }); // true
|
|
1087
|
-
```
|
|
1088
|
-
|
|
1089
|
-
**isRGB(input: unknown): boolean**
|
|
1090
|
-
Check if the input is a valid RGB color.
|
|
1091
|
-
|
|
1092
|
-
```typescript
|
|
1093
|
-
import { isRGB } from 'colorizr';
|
|
1094
|
-
|
|
1095
|
-
isRGB({ r: 255, g: 0, b: 68 }); // true
|
|
1096
|
-
```
|
|
1097
|
-
|
|
1098
|
-
### Class
|
|
98
|
+
Create an instance to work with a single color:
|
|
1099
99
|
|
|
1100
100
|
```typescript
|
|
1101
101
|
import Colorizr from 'colorizr';
|
|
1102
102
|
|
|
1103
|
-
const
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
103
|
+
const color = new Colorizr('#ff0044');
|
|
104
|
+
color.luminance; // 0.2168
|
|
105
|
+
color.chroma; // 1
|
|
106
|
+
color.readableColor; // '#ffffff'
|
|
107
|
+
color.lighten(20); // '#ff668f'
|
|
108
|
+
color.mix('#0066ff'); // '#bc34d7'
|
|
1108
109
|
```
|
|
1109
110
|
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
**colorizr.hex**
|
|
1113
|
-
Get the hex code.
|
|
1114
|
-
|
|
1115
|
-
**colorizr.hsl**
|
|
1116
|
-
Get the HSL object.
|
|
1117
|
-
|
|
1118
|
-
**colorizr.oklab**
|
|
1119
|
-
Get the OKLAB object.
|
|
1120
|
-
|
|
1121
|
-
**colorizr.oklch**
|
|
1122
|
-
Get the OKLCH object.
|
|
1123
|
-
|
|
1124
|
-
**colorizr.rgb**
|
|
1125
|
-
Get the RGB object.
|
|
1126
|
-
|
|
1127
|
-
**colorizr.hue**
|
|
1128
|
-
Get the hue (0-360).
|
|
1129
|
-
|
|
1130
|
-
**colorizr.saturation**
|
|
1131
|
-
Get the saturation (0-100).
|
|
1132
|
-
|
|
1133
|
-
**colorizr.lightness**
|
|
1134
|
-
Get the lightness (0-100).
|
|
1135
|
-
|
|
1136
|
-
**colorizr.red**
|
|
1137
|
-
Get the red level (0-255).
|
|
1138
|
-
|
|
1139
|
-
**colorizr.green**
|
|
1140
|
-
Get the green level (0-255).
|
|
1141
|
-
|
|
1142
|
-
**colorizr.blue**
|
|
1143
|
-
Get the blue level (0-255).
|
|
1144
|
-
|
|
1145
|
-
**colorizr.chroma**
|
|
1146
|
-
Get the chroma (0-1).
|
|
1147
|
-
|
|
1148
|
-
**colorizr.luminance**
|
|
1149
|
-
Get the luminance (0-1).
|
|
1150
|
-
|
|
1151
|
-
**colorizr.opacity**
|
|
1152
|
-
Get the opacity (0-1).
|
|
1153
|
-
|
|
1154
|
-
**colorizr.css**
|
|
1155
|
-
Get the css string of the same type as the input.
|
|
1156
|
-
|
|
1157
|
-
**colorizr.readableColor**
|
|
1158
|
-
Get the most readable color (black or white) for this color as a background.
|
|
1159
|
-
|
|
1160
|
-
#### Methods
|
|
1161
|
-
|
|
1162
|
-
**colorizr.format(type: ColorType, precision?: number)**
|
|
1163
|
-
Returns the formatted color in the specified format.
|
|
1164
|
-
|
|
1165
|
-
The class also includes all [Manipulators](#Manipulators) (`lighten`, `darken`, `saturate`, `desaturate`, `invert`, `rotate`, `opacify`, `transparentize`, `grayscale`, `mix`) and [Comparison](#Comparison) methods (`contrast`, `brightnessDifference`, `colorDifference`, `compare`).
|
|
111
|
+
📖 **[Read the full documentation](https://gilbarbara.github.io/colorizr)**
|
|
1166
112
|
|
|
1167
113
|
## Credits / References
|
|
1168
114
|
|