colorizr 2.1.1 → 3.0.0-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 +500 -148
- package/dist/index.d.mts +415 -0
- package/dist/index.d.ts +415 -0
- package/dist/index.js +1581 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +1505 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +56 -38
- package/src/brightness-difference.ts +18 -11
- package/src/chroma.ts +8 -5
- package/src/color-difference.ts +9 -7
- package/src/colorizr.ts +198 -0
- package/src/compare.ts +10 -7
- package/src/contrast.ts +10 -7
- package/src/convert.ts +12 -0
- package/src/converters/hex2hsl.ts +14 -0
- package/src/converters/hex2oklab.ts +14 -0
- package/src/converters/hex2oklch.ts +14 -0
- package/src/converters/hex2rgb.ts +19 -0
- package/src/converters/hsl2hex.ts +12 -0
- package/src/converters/hsl2oklab.ts +12 -0
- package/src/converters/hsl2oklch.ts +12 -0
- package/src/{hsl2rgb.ts → converters/hsl2rgb.ts} +9 -12
- package/src/converters/index.ts +24 -0
- package/src/converters/oklab2hex.ts +12 -0
- package/src/converters/oklab2hsl.ts +12 -0
- package/src/converters/oklab2oklch.ts +20 -0
- package/src/converters/oklab2rgb.ts +35 -0
- package/src/converters/oklch2hex.ts +12 -0
- package/src/converters/oklch2hsl.ts +12 -0
- package/src/converters/oklch2oklab.ts +26 -0
- package/src/converters/oklch2rgb.ts +12 -0
- package/src/converters/rgb2hex.ts +12 -0
- package/src/{rgb2hsl.ts → converters/rgb2hsl.ts} +9 -15
- package/src/converters/rgb2oklab.ts +34 -0
- package/src/converters/rgb2oklch.ts +12 -0
- package/src/darken.ts +5 -3
- package/src/desaturate.ts +5 -3
- package/src/extract-color-parts.ts +57 -0
- package/src/format-css.ts +83 -21
- package/src/format-hex.ts +15 -11
- package/src/index.ts +35 -191
- package/src/invert.ts +16 -0
- package/src/is-valid-color.ts +2 -2
- package/src/lighten.ts +5 -3
- package/src/luminance.ts +8 -5
- package/src/modules/constants.ts +36 -0
- package/src/modules/css-colors.ts +8 -5
- package/src/modules/hex-utils.ts +69 -0
- package/src/modules/hue2rgb.ts +3 -1
- package/src/modules/invariant.ts +22 -0
- package/src/modules/parse-color.ts +58 -38
- package/src/modules/updater.ts +24 -12
- package/src/modules/utils.ts +137 -187
- package/src/modules/validators.ts +169 -0
- package/src/name.ts +9 -6
- package/src/opacify.ts +21 -0
- package/src/opacity.ts +25 -0
- package/src/palette.ts +22 -12
- package/src/parse-css.ts +118 -62
- package/src/random.ts +1 -1
- package/src/rotate.ts +21 -11
- package/src/saturate.ts +5 -3
- package/src/scheme.ts +9 -6
- package/src/swatch.ts +66 -0
- package/src/text-color.ts +32 -7
- package/src/transparentize.ts +25 -0
- package/src/types/index.ts +61 -32
- package/esm/brightness-difference.d.ts +0 -4
- package/esm/brightness-difference.js +0 -16
- package/esm/brightness-difference.js.map +0 -1
- package/esm/chroma.d.ts +0 -4
- package/esm/chroma.js +0 -14
- package/esm/chroma.js.map +0 -1
- package/esm/color-difference.d.ts +0 -4
- package/esm/color-difference.js +0 -17
- package/esm/color-difference.js.map +0 -1
- package/esm/compare.d.ts +0 -5
- package/esm/compare.js +0 -36
- package/esm/compare.js.map +0 -1
- package/esm/contrast.d.ts +0 -4
- package/esm/contrast.js +0 -16
- package/esm/contrast.js.map +0 -1
- package/esm/darken.d.ts +0 -4
- package/esm/darken.js +0 -8
- package/esm/darken.js.map +0 -1
- package/esm/desaturate.d.ts +0 -4
- package/esm/desaturate.js +0 -8
- package/esm/desaturate.js.map +0 -1
- package/esm/fade.d.ts +0 -5
- package/esm/fade.js +0 -23
- package/esm/fade.js.map +0 -1
- package/esm/format-css.d.ts +0 -2
- package/esm/format-css.js +0 -27
- package/esm/format-css.js.map +0 -1
- package/esm/format-hex.d.ts +0 -1
- package/esm/format-hex.js +0 -17
- package/esm/format-hex.js.map +0 -1
- package/esm/hex2hsl.d.ts +0 -2
- package/esm/hex2hsl.js +0 -8
- package/esm/hex2hsl.js.map +0 -1
- package/esm/hex2rgb.d.ts +0 -2
- package/esm/hex2rgb.js +0 -12
- package/esm/hex2rgb.js.map +0 -1
- package/esm/hsl2hex.d.ts +0 -5
- package/esm/hsl2hex.js +0 -11
- package/esm/hsl2hex.js.map +0 -1
- package/esm/hsl2rgb.d.ts +0 -5
- package/esm/hsl2rgb.js +0 -35
- package/esm/hsl2rgb.js.map +0 -1
- package/esm/index.d.ts +0 -110
- package/esm/index.js +0 -167
- package/esm/index.js.map +0 -1
- package/esm/is-valid-color.d.ts +0 -1
- package/esm/is-valid-color.js +0 -11
- package/esm/is-valid-color.js.map +0 -1
- package/esm/is-valid-hex.d.ts +0 -1
- package/esm/is-valid-hex.js +0 -11
- package/esm/is-valid-hex.js.map +0 -1
- package/esm/lighten.d.ts +0 -4
- package/esm/lighten.js +0 -8
- package/esm/lighten.js.map +0 -1
- package/esm/luminance.d.ts +0 -4
- package/esm/luminance.js +0 -21
- package/esm/luminance.js.map +0 -1
- package/esm/modules/css-colors.d.ts +0 -152
- package/esm/modules/css-colors.js +0 -153
- package/esm/modules/css-colors.js.map +0 -1
- package/esm/modules/hue2rgb.d.ts +0 -4
- package/esm/modules/hue2rgb.js +0 -25
- package/esm/modules/hue2rgb.js.map +0 -1
- package/esm/modules/parse-color.d.ts +0 -2
- package/esm/modules/parse-color.js +0 -56
- package/esm/modules/parse-color.js.map +0 -1
- package/esm/modules/updater.d.ts +0 -4
- package/esm/modules/updater.js +0 -19
- package/esm/modules/updater.js.map +0 -1
- package/esm/modules/utils.d.ts +0 -61
- package/esm/modules/utils.js +0 -199
- package/esm/modules/utils.js.map +0 -1
- package/esm/name.d.ts +0 -1
- package/esm/name.js +0 -10
- package/esm/name.js.map +0 -1
- package/esm/palette.d.ts +0 -2
- package/esm/palette.js +0 -32
- package/esm/palette.js.map +0 -1
- package/esm/parse-css.d.ts +0 -5
- package/esm/parse-css.js +0 -78
- package/esm/parse-css.js.map +0 -1
- package/esm/random.d.ts +0 -4
- package/esm/random.js +0 -13
- package/esm/random.js.map +0 -1
- package/esm/rgb2hex.d.ts +0 -5
- package/esm/rgb2hex.js +0 -20
- package/esm/rgb2hex.js.map +0 -1
- package/esm/rgb2hsl.d.ts +0 -2
- package/esm/rgb2hsl.js +0 -51
- package/esm/rgb2hsl.js.map +0 -1
- package/esm/rotate.d.ts +0 -4
- package/esm/rotate.js +0 -17
- package/esm/rotate.js.map +0 -1
- package/esm/saturate.d.ts +0 -4
- package/esm/saturate.js +0 -8
- package/esm/saturate.js.map +0 -1
- package/esm/scheme.d.ts +0 -5
- package/esm/scheme.js +0 -44
- package/esm/scheme.js.map +0 -1
- package/esm/shift.d.ts +0 -5
- package/esm/shift.js +0 -13
- package/esm/shift.js.map +0 -1
- package/esm/text-color.d.ts +0 -4
- package/esm/text-color.js +0 -13
- package/esm/text-color.js.map +0 -1
- package/esm/types/index.d.ts +0 -46
- package/esm/types/index.js +0 -2
- package/esm/types/index.js.map +0 -1
- package/lib/brightness-difference.d.ts +0 -4
- package/lib/brightness-difference.js +0 -19
- package/lib/brightness-difference.js.map +0 -1
- package/lib/chroma.d.ts +0 -4
- package/lib/chroma.js +0 -17
- package/lib/chroma.js.map +0 -1
- package/lib/color-difference.d.ts +0 -4
- package/lib/color-difference.js +0 -20
- package/lib/color-difference.js.map +0 -1
- package/lib/compare.d.ts +0 -5
- package/lib/compare.js +0 -39
- package/lib/compare.js.map +0 -1
- package/lib/contrast.d.ts +0 -4
- package/lib/contrast.js +0 -19
- package/lib/contrast.js.map +0 -1
- package/lib/darken.d.ts +0 -4
- package/lib/darken.js +0 -11
- package/lib/darken.js.map +0 -1
- package/lib/desaturate.d.ts +0 -4
- package/lib/desaturate.js +0 -11
- package/lib/desaturate.js.map +0 -1
- package/lib/fade.d.ts +0 -5
- package/lib/fade.js +0 -26
- package/lib/fade.js.map +0 -1
- package/lib/format-css.d.ts +0 -2
- package/lib/format-css.js +0 -30
- package/lib/format-css.js.map +0 -1
- package/lib/format-hex.d.ts +0 -1
- package/lib/format-hex.js +0 -20
- package/lib/format-hex.js.map +0 -1
- package/lib/hex2hsl.d.ts +0 -2
- package/lib/hex2hsl.js +0 -11
- package/lib/hex2hsl.js.map +0 -1
- package/lib/hex2rgb.d.ts +0 -2
- package/lib/hex2rgb.js +0 -15
- package/lib/hex2rgb.js.map +0 -1
- package/lib/hsl2hex.d.ts +0 -5
- package/lib/hsl2hex.js +0 -14
- package/lib/hsl2hex.js.map +0 -1
- package/lib/hsl2rgb.d.ts +0 -5
- package/lib/hsl2rgb.js +0 -38
- package/lib/hsl2rgb.js.map +0 -1
- package/lib/index.d.ts +0 -110
- package/lib/index.js +0 -212
- package/lib/index.js.map +0 -1
- package/lib/is-valid-color.d.ts +0 -1
- package/lib/is-valid-color.js +0 -14
- package/lib/is-valid-color.js.map +0 -1
- package/lib/is-valid-hex.d.ts +0 -1
- package/lib/is-valid-hex.js +0 -14
- package/lib/is-valid-hex.js.map +0 -1
- package/lib/lighten.d.ts +0 -4
- package/lib/lighten.js +0 -11
- package/lib/lighten.js.map +0 -1
- package/lib/luminance.d.ts +0 -4
- package/lib/luminance.js +0 -24
- package/lib/luminance.js.map +0 -1
- package/lib/modules/css-colors.d.ts +0 -152
- package/lib/modules/css-colors.js +0 -156
- package/lib/modules/css-colors.js.map +0 -1
- package/lib/modules/hue2rgb.d.ts +0 -4
- package/lib/modules/hue2rgb.js +0 -28
- package/lib/modules/hue2rgb.js.map +0 -1
- package/lib/modules/parse-color.d.ts +0 -2
- package/lib/modules/parse-color.js +0 -59
- package/lib/modules/parse-color.js.map +0 -1
- package/lib/modules/updater.d.ts +0 -4
- package/lib/modules/updater.js +0 -22
- package/lib/modules/updater.js.map +0 -1
- package/lib/modules/utils.d.ts +0 -61
- package/lib/modules/utils.js +0 -215
- package/lib/modules/utils.js.map +0 -1
- package/lib/name.d.ts +0 -1
- package/lib/name.js +0 -13
- package/lib/name.js.map +0 -1
- package/lib/palette.d.ts +0 -2
- package/lib/palette.js +0 -35
- package/lib/palette.js.map +0 -1
- package/lib/parse-css.d.ts +0 -5
- package/lib/parse-css.js +0 -81
- package/lib/parse-css.js.map +0 -1
- package/lib/random.d.ts +0 -4
- package/lib/random.js +0 -16
- package/lib/random.js.map +0 -1
- package/lib/rgb2hex.d.ts +0 -5
- package/lib/rgb2hex.js +0 -23
- package/lib/rgb2hex.js.map +0 -1
- package/lib/rgb2hsl.d.ts +0 -2
- package/lib/rgb2hsl.js +0 -54
- package/lib/rgb2hsl.js.map +0 -1
- package/lib/rotate.d.ts +0 -4
- package/lib/rotate.js +0 -20
- package/lib/rotate.js.map +0 -1
- package/lib/saturate.d.ts +0 -4
- package/lib/saturate.js +0 -11
- package/lib/saturate.js.map +0 -1
- package/lib/scheme.d.ts +0 -5
- package/lib/scheme.js +0 -47
- package/lib/scheme.js.map +0 -1
- package/lib/shift.d.ts +0 -5
- package/lib/shift.js +0 -17
- package/lib/shift.js.map +0 -1
- package/lib/text-color.d.ts +0 -4
- package/lib/text-color.js +0 -16
- package/lib/text-color.js.map +0 -1
- package/lib/types/index.d.ts +0 -46
- package/lib/types/index.js +0 -3
- package/lib/types/index.js.map +0 -1
- package/src/fade.ts +0 -30
- package/src/hex2hsl.ts +0 -10
- package/src/hex2rgb.ts +0 -15
- package/src/hsl2hex.ts +0 -13
- package/src/is-valid-hex.ts +0 -13
- package/src/rgb2hex.ts +0 -24
- package/src/shift.ts +0 -15
package/README.md
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/colorizr) [](https://bundlephobia.com/result?p=colorizr) [](https://github.com/gilbarbara/colorizr/actions/workflows/main.yml) [](https://codeclimate.com/github/gilbarbara/colorizr/maintainability) [](https://codeclimate.com/github/gilbarbara/colorizr/test_coverage)
|
|
4
4
|
|
|
5
|
-
Color conversion, manipulation, comparison, and analysis.
|
|
5
|
+
Color conversion, generation, manipulation, comparison, and analysis.
|
|
6
6
|
|
|
7
7
|
## Highlights
|
|
8
8
|
|
|
9
|
-
- 🏖 **Easy to use**: Works with HSL
|
|
9
|
+
- 🏖 **Easy to use**: Works with Hex, HSL, OkLab, OkLCH, and RGB.
|
|
10
10
|
- ♿️ **Accessibility:** WCAG analysis and comparison.
|
|
11
|
-
- 🛠 **Small:** Less than
|
|
11
|
+
- 🛠 **Small:** Less than 7k (gzipped) and tree-shakable.
|
|
12
12
|
- 🟦 **Modern:** Written in Typescript.
|
|
13
13
|
|
|
14
14
|
## Setup
|
|
@@ -27,29 +27,34 @@ import { luminance } from 'colorizr';
|
|
|
27
27
|
const lux = luminance('#ff0044'); // 0.2168
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
Or you can create an instance to
|
|
30
|
+
Or you can create an instance to use all the methods for the selected color:
|
|
31
31
|
|
|
32
32
|
```typescript
|
|
33
33
|
import Colorizr from 'Colorizr';
|
|
34
34
|
|
|
35
|
-
const
|
|
35
|
+
const colorInstance = new Colorizr('#ff0044');
|
|
36
|
+
colorInstance.luminance; // 0.2168
|
|
37
|
+
colorInstance.chroma; // 1
|
|
38
|
+
colorInstance.opacity; // 1
|
|
36
39
|
```
|
|
37
40
|
|
|
38
|
-
##
|
|
41
|
+
## API
|
|
39
42
|
|
|
40
|
-
> String inputs accept css values: hex, rgb
|
|
43
|
+
> String inputs accept css values: hex, hsl, oklab, oklch, rgb, and named colors.
|
|
41
44
|
|
|
42
|
-
|
|
43
|
-
|
|
45
|
+
- [Info](#Info)
|
|
46
|
+
- [Manipulators](#Manipulators)
|
|
47
|
+
- [Utilities](#Utilities)
|
|
48
|
+
- [Converters](#Converters)
|
|
49
|
+
- [Generators](#Generators)
|
|
50
|
+
- [Comparison](#Comparison)
|
|
51
|
+
- [Validators](#Validators)
|
|
52
|
+
- [Class](#Class)
|
|
44
53
|
|
|
45
|
-
|
|
46
|
-
import { brightnessDifference } from 'colorizr';
|
|
47
|
-
|
|
48
|
-
brightnessDifference('#fff', 'rgb(255, 0, 68)'); // 171.003
|
|
49
|
-
```
|
|
54
|
+
### Info
|
|
50
55
|
|
|
51
56
|
**chroma(input: string): number**
|
|
52
|
-
|
|
57
|
+
Get the chroma of a color.
|
|
53
58
|
|
|
54
59
|
```typescript
|
|
55
60
|
import { chroma } from 'colorizr';
|
|
@@ -58,8 +63,231 @@ chroma('#ff0044'); // 1
|
|
|
58
63
|
chroma('#ffc0cb'); // 0.2471
|
|
59
64
|
```
|
|
60
65
|
|
|
66
|
+
**luminance(input: string): number**
|
|
67
|
+
Get the relative brightness according to the [WCAG definition](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef).
|
|
68
|
+
Normalized to `0` for black and `1` for white.
|
|
69
|
+
|
|
70
|
+
```typescript
|
|
71
|
+
import { luminance } from 'colorizr';
|
|
72
|
+
|
|
73
|
+
luminance('#ff0044'); // 0.2168
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
**name(input: string): string**
|
|
77
|
+
Get the name of a color. Return the hex code if it can't be named.
|
|
78
|
+
|
|
79
|
+
```typescript
|
|
80
|
+
import { name } from 'colorizr';
|
|
81
|
+
|
|
82
|
+
name('#ffc0cb', 10); // pink
|
|
83
|
+
name('rgb(176 224 230)'); // 'powderblue'
|
|
84
|
+
name('hsl(344 100 50)'); // #ff0044
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
**opacity(input: string): string**
|
|
88
|
+
Get the opacity of a color.
|
|
89
|
+
|
|
90
|
+
```typescript
|
|
91
|
+
import { opacity } from 'colorizr';
|
|
92
|
+
|
|
93
|
+
opacity('#ff0044'); 1
|
|
94
|
+
opacity('rgb(255 0 68 / 90%)'); 0.9
|
|
95
|
+
opacity('hsl(344 100 50 / 60%)'); 0.6
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Manipulators
|
|
99
|
+
|
|
100
|
+
**lighten(input: string, alpha: number): string**
|
|
101
|
+
Get a color with increased lightness.
|
|
102
|
+
|
|
103
|
+
```typescript
|
|
104
|
+
import { lighten } from 'colorizr';
|
|
105
|
+
|
|
106
|
+
lighten('#ff0044', 10); // #ff3369
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
**darken(input: string, alpha = 10): string**
|
|
110
|
+
Get a color with decreased lightness.
|
|
111
|
+
|
|
112
|
+
```typescript
|
|
113
|
+
import { darken } from 'colorizr';
|
|
114
|
+
|
|
115
|
+
darken('#ff0044', 10); // #cc0036
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
**saturate(input: string, amount: number): string**
|
|
119
|
+
Get a color with increased saturation.
|
|
120
|
+
|
|
121
|
+
```typescript
|
|
122
|
+
import { saturate } from 'colorizr';
|
|
123
|
+
|
|
124
|
+
saturate('#ff0044', 10); // #ff0044 (already at the maximum)
|
|
125
|
+
saturate('pink', 10); // #ffc0cb
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
**desaturate(input: string, alpha: number): string**
|
|
129
|
+
Get a color with decreased saturation.
|
|
130
|
+
|
|
131
|
+
```typescript
|
|
132
|
+
import { desaturate } from 'colorizr';
|
|
133
|
+
|
|
134
|
+
desaturate('#ff0044', 10); // #f20d4a
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
**invert(input: string): string**
|
|
138
|
+
Invert the color.
|
|
139
|
+
|
|
140
|
+
```typescript
|
|
141
|
+
import { invert } from 'colorizr';
|
|
142
|
+
|
|
143
|
+
invert('#07e'); // '#0077ee'
|
|
144
|
+
invert('#f058'); // '#ff005588'
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
**rotate(input: string, degrees: number): string**
|
|
148
|
+
Get a color with a hue rotated by the specified degrees.
|
|
149
|
+
|
|
150
|
+
```typescript
|
|
151
|
+
import { rotate } from 'colorizr';
|
|
152
|
+
|
|
153
|
+
rotate('#ff0044', 30); // #ff3b00
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
**opacify(input: string, alpha: number, format?: ColorType): string**
|
|
157
|
+
Add opacity to a color
|
|
158
|
+
|
|
159
|
+
```typescript
|
|
160
|
+
import { opacify } from 'colorizr';
|
|
161
|
+
|
|
162
|
+
opacify('hsl(344, 100, 50)', 10); // rgba(255, 0, 68, 0.9)
|
|
163
|
+
opacify('#ff0044', 50); // hsla(344, 100%, 50%, 0.5)
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
**transparentize(input: string, alpha: number, format?: ColorType): string**
|
|
167
|
+
Increase/decrease the color opacity.
|
|
168
|
+
|
|
169
|
+
```typescript
|
|
170
|
+
import { transparentize } from 'colorizr';
|
|
171
|
+
|
|
172
|
+
transparentize('hsl(344, 100, 50)', 10); // rgba(255, 0, 68, 0.9)
|
|
173
|
+
transparentize('#ff0044', 50, 'hsl'); // hsla(344, 100%, 50%, 0.5)
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### Utilities
|
|
177
|
+
|
|
178
|
+
**addAlphaToHex(input: string, alpha: number): string**
|
|
179
|
+
Add an alpha value to a hex string
|
|
180
|
+
|
|
181
|
+
```typescript
|
|
182
|
+
import { addAlphaToHex } from 'colorizr';
|
|
183
|
+
|
|
184
|
+
addAlphaToHex('#ff0044', 0.9); // '#ff0044e6'
|
|
185
|
+
addAlphaToHex('#ff0044cc', 0.9); // '#ff0044e6'
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
**convertAlphaToHex(input: number): string**
|
|
189
|
+
Convert an alpha value to a hex value.
|
|
190
|
+
|
|
191
|
+
```typescript
|
|
192
|
+
import { convertAlphaToHex } from 'colorizr';
|
|
193
|
+
|
|
194
|
+
convertAlphaToHex(0.5); // '80'
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
**extractAlphaFromHex(input: string): number**
|
|
198
|
+
Extract the alpha value from a hex string
|
|
199
|
+
|
|
200
|
+
```typescript
|
|
201
|
+
import { extractAlphaFromHex } from 'colorizr';
|
|
202
|
+
|
|
203
|
+
convertAlphaToHex('#ff004480'); // 0.5
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
**extractColorParts(input: string): ExtractColorPartsReturn**
|
|
207
|
+
Extract the color parts from a CSS color string.
|
|
208
|
+
Hex colors are not supported.
|
|
209
|
+
|
|
210
|
+
```typescript
|
|
211
|
+
type ExtractColorPartsReturn = {
|
|
212
|
+
alpha?: number;
|
|
213
|
+
model: 'hsl' | 'oklab' | 'oklch' | 'rgb';
|
|
214
|
+
} & Record<string, number>;
|
|
215
|
+
|
|
216
|
+
extractColorParts('rgb(255 0 68)') // { model: 'rgb', r: 255, g: 0, b: 68 }
|
|
217
|
+
extractColorParts('hsl(344 100% 50% / 90%)') // { alpha: 0.9, model: 'hsl', h: 344, g: 100, l: 50 }
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
**formatCSS(input: HSL | RGB, options?: FormatOptions): string**
|
|
221
|
+
Get a css string from a color object.
|
|
222
|
+
|
|
223
|
+
```typescript
|
|
224
|
+
import { formatCSS } from 'colorizr';
|
|
225
|
+
|
|
226
|
+
formatCSS({ h: 344, s: 100, l: 50 }, { format: 'rgb' }); // 'rgb(255, 0, 68)'
|
|
227
|
+
formatCSS({ r: 255, g: 0, b: 68 }, { alpha: 0.5, format: 'hsl' }); // 'hsla(344, 100%, 50%, 0.5)'
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
**formatHex(input: string): string**
|
|
231
|
+
Format a short hex string of 3 (or 4) digits into 6 (or 8) digits.
|
|
232
|
+
|
|
233
|
+
```typescript
|
|
234
|
+
import { formatHex } from 'colorizr';
|
|
235
|
+
|
|
236
|
+
formatHex('#07e'); // '#0077ee'
|
|
237
|
+
formatHex('#f058'); // '#ff005588'
|
|
238
|
+
```
|
|
239
|
+
**parseCSS(input: string, format?: ColorType): string | HSL | RGB**
|
|
240
|
+
Parse a css string to hex, HSL, OKLAB, OKLCH, or RGB.
|
|
241
|
+
If the format isn't set, it will return the same format as the input.
|
|
242
|
+
|
|
243
|
+
```typescript
|
|
244
|
+
import { parseCSS } from 'colorizr';
|
|
245
|
+
|
|
246
|
+
parseCSS('hsl(344 100% 50%)'); // { h: 344, l: 50, s: 100 }
|
|
247
|
+
parseCSS('#ff0044', 'hsl'); // { h: 344, l: 50, s: 100 }
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
**random(): string**
|
|
251
|
+
Get a random color.
|
|
252
|
+
|
|
253
|
+
```typescript
|
|
254
|
+
import { random } from 'colorizr';
|
|
255
|
+
|
|
256
|
+
random(); // '#b385e0'
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
**removeAlphaFromHex(input: string): string**
|
|
260
|
+
Remove the alpha value from a hex string
|
|
261
|
+
|
|
262
|
+
```typescript
|
|
263
|
+
import { removeAlphaFromHex } from 'colorizr';
|
|
264
|
+
|
|
265
|
+
removeAlphaFromHex('#ff0044cc'); // '#ff0044'
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
**textColor(input: string): string**
|
|
269
|
+
Get a contrasting color (black or white) for the input color.
|
|
270
|
+
|
|
271
|
+
```typescript
|
|
272
|
+
import { textColor } from 'colorizr';
|
|
273
|
+
|
|
274
|
+
textColor('#ff0044'); // #ffffff
|
|
275
|
+
textColor('#fff800'); // #000000
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
### Comparison
|
|
279
|
+
|
|
280
|
+
**brightnessDifference(left: string, right: string): number**
|
|
281
|
+
Get the brightness difference between the two colors.
|
|
282
|
+
|
|
283
|
+
```typescript
|
|
284
|
+
import { brightnessDifference } from 'colorizr';
|
|
285
|
+
|
|
286
|
+
brightnessDifference('#fff', 'rgb(255, 0, 68)'); // 171.003
|
|
287
|
+
```
|
|
288
|
+
|
|
61
289
|
**colorDifference(left: string, right: string): number**
|
|
62
|
-
|
|
290
|
+
Get the color difference between the two colors.
|
|
63
291
|
|
|
64
292
|
```typescript
|
|
65
293
|
import { colorDifference } from 'colorizr';
|
|
@@ -68,14 +296,14 @@ colorDifference('hsl(0, 0%, 100%)', '#f04'); // 442
|
|
|
68
296
|
```
|
|
69
297
|
|
|
70
298
|
**compare(left: string, right: string): Analysis**
|
|
71
|
-
|
|
299
|
+
Get the WCAG analysis between two colors.
|
|
72
300
|
|
|
73
301
|
```typescript
|
|
74
302
|
import { compare } from 'colorizr';
|
|
75
303
|
|
|
76
304
|
compare('#ff0044', '#fff');
|
|
77
305
|
|
|
78
|
-
{
|
|
306
|
+
({
|
|
79
307
|
"brightnessDifference": 171.003,
|
|
80
308
|
"colorDifference": 442,
|
|
81
309
|
"compliant": 1,
|
|
@@ -84,77 +312,105 @@ compare('#ff0044', '#fff');
|
|
|
84
312
|
"largeAAA": false,
|
|
85
313
|
"normalAA": false,
|
|
86
314
|
"normalAAA": false,
|
|
87
|
-
}
|
|
315
|
+
})
|
|
88
316
|
```
|
|
89
317
|
|
|
90
318
|
**contrast(left: string, right: string): number**
|
|
91
|
-
|
|
319
|
+
Get the WCAG contrast ratio between two colors.
|
|
92
320
|
|
|
93
321
|
```typescript
|
|
94
322
|
import { contrast } from 'colorizr';
|
|
95
323
|
|
|
96
324
|
contrast('hsl(0, 0%, 100%)', 'rgb(255, 0, 68)'); // 3.94
|
|
97
325
|
```
|
|
326
|
+
### Generators
|
|
98
327
|
|
|
99
|
-
**
|
|
100
|
-
|
|
328
|
+
**palette(input: string, options?: PaletteOptions): string[]**
|
|
329
|
+
Generate a palette of colors.
|
|
101
330
|
|
|
102
331
|
```typescript
|
|
103
|
-
import {
|
|
332
|
+
import { palette } from 'colorizr';
|
|
104
333
|
|
|
105
|
-
|
|
334
|
+
palette('#ff0044');
|
|
335
|
+
// ['#ff0044', '#ff7700', '#88ff00', '#00ff77', '#0088ff', '#7700ff'];
|
|
336
|
+
|
|
337
|
+
palette('#ff0044', { type: 'monochromatic' });
|
|
338
|
+
// ['#ff99b4', '#ff5582', '#ff1150', '#cc0036', '#880024', '#440012']
|
|
106
339
|
```
|
|
107
340
|
|
|
108
|
-
**
|
|
109
|
-
|
|
341
|
+
**scheme(input: string, type: Scheme): string[]**
|
|
342
|
+
Get a color scheme.
|
|
110
343
|
|
|
111
344
|
```typescript
|
|
112
|
-
import {
|
|
345
|
+
import { scheme } from 'colorizr';
|
|
113
346
|
|
|
114
|
-
|
|
347
|
+
const complementary = scheme('rgb(255, 0, 68)'); // ['#ff0044', '#00ffbb']
|
|
348
|
+
const triadic = scheme('#ff0044', 'triadic'); // ['#ff0044', '#44ff00', '#0044ff']
|
|
115
349
|
```
|
|
116
350
|
|
|
117
|
-
**
|
|
118
|
-
|
|
351
|
+
**swatch(input: string, variant?: 'up' | 'down'): string[]**
|
|
352
|
+
Generate a color swatch with ten shades.
|
|
353
|
+
The `variant` can be used to generate a lighter or darker swatch.
|
|
119
354
|
|
|
120
355
|
```typescript
|
|
121
|
-
import {
|
|
356
|
+
import { swatch } from 'colorizr';
|
|
122
357
|
|
|
123
|
-
|
|
124
|
-
|
|
358
|
+
const colors = swatch('#ff0044');
|
|
359
|
+
/* [
|
|
360
|
+
"#ffccda",
|
|
361
|
+
"#ff99b4",
|
|
362
|
+
"#ff668f",
|
|
363
|
+
"#ff3369",
|
|
364
|
+
"#ff0044",
|
|
365
|
+
"#cc0036",
|
|
366
|
+
"#990029",
|
|
367
|
+
"#66001b",
|
|
368
|
+
"#33000e",
|
|
369
|
+
"#1a0007",
|
|
370
|
+
] */
|
|
125
371
|
```
|
|
126
372
|
|
|
127
|
-
|
|
128
|
-
|
|
373
|
+
### Converters
|
|
374
|
+
|
|
375
|
+
**convert(input: string, format: ColorType): string**
|
|
376
|
+
Convert a color string from one format to another.
|
|
129
377
|
|
|
130
378
|
```typescript
|
|
131
|
-
import {
|
|
379
|
+
import { convert } from 'colorizr';
|
|
132
380
|
|
|
133
|
-
|
|
134
|
-
|
|
381
|
+
convert('#ff0044', 'hsl') // hsl(344 100% 50%)
|
|
382
|
+
convert('rgb(255 0 68)', 'oklch') // oklch(63.269% 0.25404 19.90218)
|
|
135
383
|
```
|
|
136
384
|
|
|
137
|
-
**
|
|
138
|
-
|
|
385
|
+
**hex2hsl(input: string): HSL**
|
|
386
|
+
Convert HEX to HSL.
|
|
139
387
|
|
|
140
388
|
```typescript
|
|
141
|
-
import {
|
|
389
|
+
import { hex2hsl } from 'colorizr';
|
|
142
390
|
|
|
143
|
-
|
|
144
|
-
formatHex('#f058'); // '#ff005588'
|
|
391
|
+
hex2hsl('#ff0044'); // { h: 344, s: 100, l: 50 }
|
|
145
392
|
```
|
|
146
393
|
|
|
147
|
-
**
|
|
148
|
-
|
|
394
|
+
**hex2oklab(input: string, precision?: number): LAB**
|
|
395
|
+
Convert HEX to OKLAB.
|
|
149
396
|
|
|
150
397
|
```typescript
|
|
151
|
-
import {
|
|
398
|
+
import { hex2oklab } from 'colorizr';
|
|
152
399
|
|
|
153
|
-
|
|
400
|
+
hex2oklab('#ff0044'); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
401
|
+
```
|
|
402
|
+
|
|
403
|
+
**hex2oklch(input: string, precision?: number): LCH**
|
|
404
|
+
Convert HEX to OKLCH.
|
|
405
|
+
|
|
406
|
+
```typescript
|
|
407
|
+
import { hex2oklch } from 'colorizr';
|
|
408
|
+
|
|
409
|
+
hex2oklch('#ff0044'); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
154
410
|
```
|
|
155
411
|
|
|
156
412
|
**hex2rgb(input: string): RGB**
|
|
157
|
-
|
|
413
|
+
Convert HEX to RGB.
|
|
158
414
|
|
|
159
415
|
```typescript
|
|
160
416
|
import { hex2rgb } from 'colorizr';
|
|
@@ -162,170 +418,235 @@ import { hex2rgb } from 'colorizr';
|
|
|
162
418
|
hex2rgb('#ff0044'); // { r: 255, g: 0, b: 68 }
|
|
163
419
|
```
|
|
164
420
|
|
|
165
|
-
**hsl2hex(input: HSL): string**
|
|
166
|
-
|
|
421
|
+
**hsl2hex(input: HSL | ColorTupple): string**
|
|
422
|
+
Convert HSL to HEX.
|
|
167
423
|
|
|
168
424
|
```typescript
|
|
169
425
|
import { hsl2hex } from 'colorizr';
|
|
170
426
|
|
|
171
427
|
hsl2hex({ h: 344, s: 100, l: 50 }); // '#ff0044'
|
|
428
|
+
hsl2hex([344, 100, 50]); // '#ff0044'
|
|
172
429
|
```
|
|
173
430
|
|
|
174
|
-
**
|
|
175
|
-
|
|
431
|
+
**hsl2oklab(input: HSL | ColorTupple, precision?: number): LAB**
|
|
432
|
+
Convert HSL to OKLAB.
|
|
433
|
+
|
|
434
|
+
```typescript
|
|
435
|
+
import { hsl2oklab } from 'colorizr';
|
|
436
|
+
|
|
437
|
+
hsl2oklab({ h: 344, s: 100, l: 50 }); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
438
|
+
hsl2oklab([344, 100, 50]); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
439
|
+
```
|
|
440
|
+
|
|
441
|
+
**hsl2oklch(input: HSL | ColorTupple, precision?: number): string**
|
|
442
|
+
Convert HSL to OKLCH.
|
|
443
|
+
|
|
444
|
+
```typescript
|
|
445
|
+
import { hsl2oklch } from 'colorizr';
|
|
446
|
+
|
|
447
|
+
hsl2oklch({ h: 344, s: 100, l: 50 }); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
448
|
+
hsl2oklch([344, 100, 50]); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
449
|
+
```
|
|
450
|
+
|
|
451
|
+
**hsl2rgb(input: HSL | ColorTupple): RGB**
|
|
452
|
+
Convert HSL to RGB.
|
|
176
453
|
|
|
177
454
|
```typescript
|
|
178
455
|
import { hsl2rgb } from 'colorizr';
|
|
179
456
|
|
|
180
457
|
hsl2rgb({ h: 344, s: 100, l: 50 }); // { r: 255, g: 0, b: 68 }
|
|
458
|
+
hsl2rgb([344, 100, 50]); // { r: 255, g: 0, b: 68 }
|
|
181
459
|
```
|
|
182
460
|
|
|
183
|
-
**
|
|
184
|
-
|
|
461
|
+
**oklab2hex(input: LAB | ColorTupple): string**
|
|
462
|
+
Convert OKLAB to HEX.
|
|
185
463
|
|
|
186
464
|
```typescript
|
|
187
|
-
import {
|
|
465
|
+
import { oklab2hex } from 'colorizr';
|
|
188
466
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
isValidColor('#ff004400'); // true
|
|
192
|
-
isValidColor('rgb(100, 255, 0)'); // true
|
|
193
|
-
isValidColor('hsla(344, 100%, 50%)'); // true
|
|
194
|
-
isValidColor('blue'); // true
|
|
195
|
-
isValidColor('aliceblue'); // true
|
|
196
|
-
isValidColor('#mmff00'); // false
|
|
197
|
-
isValidColor('blue-ish'); // false
|
|
467
|
+
oklab2hex({ l: 0.63269, a: 0.23887, b: 0.08648 }); // '#ff0044'
|
|
468
|
+
oklab2hex([0.63269, 0.23887, 0.08648]); // '#ff0044'
|
|
198
469
|
```
|
|
199
470
|
|
|
200
|
-
**
|
|
201
|
-
|
|
471
|
+
**oklab2hsl(input: LAB | ColorTupple): HSL**
|
|
472
|
+
Convert OKLAB to HSL.
|
|
202
473
|
|
|
203
474
|
```typescript
|
|
204
|
-
import {
|
|
475
|
+
import { oklab2hsl } from 'colorizr';
|
|
205
476
|
|
|
206
|
-
|
|
477
|
+
oklab2hsl({ l: 0.63269, a: 0.23887, b: 0.08648 }); // { h: 344, s: 100, l: 50 }
|
|
478
|
+
oklab2hsl([0.63269, 0.23887, 0.08648]); // { h: 344, s: 100, l: 50 }
|
|
207
479
|
```
|
|
208
480
|
|
|
209
|
-
**
|
|
210
|
-
|
|
481
|
+
**oklab2oklch(input: LAB | ColorTupple, precision?: number): LCH**
|
|
482
|
+
Convert OKLAB to OKLCH.
|
|
211
483
|
|
|
212
484
|
```typescript
|
|
213
|
-
import {
|
|
485
|
+
import { oklab2oklch } from 'colorizr';
|
|
214
486
|
|
|
215
|
-
|
|
487
|
+
oklab2oklch({ l: 0.63269, a: 0.23887, b: 0.08648 }); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
488
|
+
oklab2oklch([0.63269, 0.23887, 0.08648]); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
216
489
|
```
|
|
217
490
|
|
|
218
|
-
**
|
|
219
|
-
|
|
491
|
+
**oklab2rgb(input: LAB | ColorTupple, precision: number = 0): RGB**
|
|
492
|
+
Convert OKLAB to RGB.
|
|
220
493
|
|
|
221
494
|
```typescript
|
|
222
|
-
import {
|
|
495
|
+
import { oklab2rgb } from 'colorizr';
|
|
223
496
|
|
|
224
|
-
|
|
497
|
+
oklab2rgb({ l: 0.63269, a: 0.23887, b: 0.08648 }); // { r: 255, g: 0, b: 68 }
|
|
498
|
+
oklab2rgb([0.63269, 0.23887, 0.08648]); // { r: 255, g: 0, b: 68 }
|
|
225
499
|
```
|
|
226
500
|
|
|
227
|
-
**
|
|
228
|
-
|
|
501
|
+
**oklch2hex(input: LCH | ColorTupple): string**
|
|
502
|
+
Convert OKLCH to HEX.
|
|
229
503
|
|
|
230
504
|
```typescript
|
|
231
|
-
import {
|
|
505
|
+
import { oklch2hex } from 'colorizr';
|
|
232
506
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
name('hsl(344, 100, 50)'); // #ff0044
|
|
507
|
+
oklch2hex({ l: 0.63269, c: 0.25404, h: 19.90218 }); // '#ff0044'
|
|
508
|
+
oklch2hex([0.63269, 0.25404, 19.90218]); // '#ff0044'
|
|
236
509
|
```
|
|
237
510
|
|
|
238
|
-
**
|
|
239
|
-
|
|
511
|
+
**oklch2hsl(input: LCH | ColorTupple): HSL**
|
|
512
|
+
Convert OKLCH to HSL.
|
|
240
513
|
|
|
241
514
|
```typescript
|
|
242
|
-
import {
|
|
243
|
-
|
|
244
|
-
palette('#ff0044');
|
|
245
|
-
// ['#ff0044', '#ff7700', '#88ff00', '#00ff77', '#0088ff', '#7700ff'];
|
|
515
|
+
import { oklch2hsl } from 'colorizr';
|
|
246
516
|
|
|
247
|
-
|
|
248
|
-
|
|
517
|
+
oklch2hsl({ l: 0.63269, c: 0.25404, h: 19.90218 }); // { h: 344, s: 100, l: 50 }
|
|
518
|
+
oklch2hsl([0.63269, 0.25404, 19.90218]); // { h: 344, s: 100, l: 50 }
|
|
249
519
|
```
|
|
250
520
|
|
|
251
|
-
**
|
|
252
|
-
|
|
521
|
+
**oklch2oklab(input: LCH | ColorTupple, precision?: number): LAB**
|
|
522
|
+
Convert OKLCH to OKLAB.
|
|
253
523
|
|
|
254
524
|
```typescript
|
|
255
|
-
import {
|
|
525
|
+
import { oklch2oklab } from 'colorizr';
|
|
256
526
|
|
|
257
|
-
|
|
258
|
-
|
|
527
|
+
oklch2oklab({ l: 0.63269, c: 0.25404, h: 19.90218 }); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
528
|
+
oklch2oklab([0.63269, 0.25404, 19.90218]); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
259
529
|
```
|
|
260
530
|
|
|
261
|
-
**
|
|
262
|
-
|
|
531
|
+
**oklch2rgb(input: LCH | ColorTupple, precision: number = 0): RGB**
|
|
532
|
+
Convert OKLCH to RGB.
|
|
263
533
|
|
|
264
534
|
```typescript
|
|
265
|
-
import {
|
|
535
|
+
import { oklch2rgb } from 'colorizr';
|
|
266
536
|
|
|
267
|
-
|
|
537
|
+
oklch2rgb({ l: 0.63269, c: 0.25404, h: 19.90218 }); // { r: 255, g: 0, b: 68 }
|
|
538
|
+
oklch2rgb([0.63269, 0.25404, 19.90218]); // { r: 255, g: 0, b: 68 }
|
|
268
539
|
```
|
|
269
540
|
|
|
270
|
-
**rgb2hex(input: RGB |
|
|
271
|
-
|
|
541
|
+
**rgb2hex(input: RGB | ColorTupple): string**
|
|
542
|
+
Convert RGB to HEX.
|
|
272
543
|
|
|
273
544
|
```typescript
|
|
274
545
|
import { rgb2hex } from 'colorizr';
|
|
275
546
|
|
|
276
|
-
rgb2hex({ r: 255, g:
|
|
547
|
+
rgb2hex({ r: 255, g: 0, b: 68 }); // '#ff0044'
|
|
277
548
|
rgb2hex([255, 0, 68]); // '#ff0044'
|
|
278
549
|
```
|
|
279
550
|
|
|
280
|
-
**rgb2hsl(input: RGB |
|
|
281
|
-
|
|
551
|
+
**rgb2hsl(input: RGB | ColorTupple): HSL**
|
|
552
|
+
Convert RGB to HSL.
|
|
282
553
|
|
|
283
554
|
```typescript
|
|
284
555
|
import { rgb2hsl } from 'colorizr';
|
|
285
556
|
|
|
286
|
-
rgb2hsl({ r: 255, g:
|
|
557
|
+
rgb2hsl({ r: 255, g: 0, b: 68 }); // { h: 344, s: 100, l: 50 }
|
|
287
558
|
rgb2hsl([255, 0, 68]); // { h: 344, s: 100, l: 50 }
|
|
288
559
|
```
|
|
289
560
|
|
|
290
|
-
**
|
|
561
|
+
**rgb2oklab(input: RGB | ColorTupple, precision: number): LAB**
|
|
562
|
+
Convert RGB to OKLAB.
|
|
291
563
|
|
|
292
564
|
```typescript
|
|
293
|
-
import {
|
|
565
|
+
import { rgb2oklab } from 'colorizr';
|
|
294
566
|
|
|
295
|
-
|
|
567
|
+
rgb2oklab({ r: 255, g: 0, b: 68 }); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
568
|
+
rgb2oklab([255, 0, 68]); // { l: 0.63269, a: 0.23887, b: 0.08648 }
|
|
296
569
|
```
|
|
297
570
|
|
|
298
|
-
**
|
|
299
|
-
|
|
571
|
+
**rgb2oklch(input: RGB | ColorTupple, precision: number): LCH**
|
|
572
|
+
Convert RGB to OKLCH.
|
|
300
573
|
|
|
301
574
|
```typescript
|
|
302
|
-
import {
|
|
575
|
+
import { rgb2oklch } from 'colorizr';
|
|
303
576
|
|
|
304
|
-
|
|
305
|
-
|
|
577
|
+
rgb2oklch({ r: 255, g: 0, b: 68 }); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
578
|
+
rgb2oklch([255, 0, 68]); // { l: 0.63269, c: 0.25404, h: 19.90218 }
|
|
306
579
|
```
|
|
307
580
|
|
|
308
|
-
|
|
309
|
-
|
|
581
|
+
### Validators
|
|
582
|
+
|
|
583
|
+
**isValidColor(input: any): boolean**
|
|
584
|
+
Check if the input is a valid color.
|
|
310
585
|
|
|
311
586
|
```typescript
|
|
312
|
-
import {
|
|
587
|
+
import { isValidColor } from 'colorizr';
|
|
313
588
|
|
|
314
|
-
|
|
315
|
-
|
|
589
|
+
isValidColor('#ff0044'); // true
|
|
590
|
+
isValidColor('#ff004400'); // true
|
|
591
|
+
isValidColor('hsl(136 100% 50%)'); // true
|
|
592
|
+
isValidColor('hsla(344, 100%, 50%, 0.4)'); // true
|
|
593
|
+
isValidColor('oklab(70.622% 0.1374 0.14283)'); // true
|
|
594
|
+
isValidColor('oklch(47.642% 0.29956 274.93693)'); // true
|
|
595
|
+
isValidColor('rgb(255 230 109)'); // true
|
|
596
|
+
isValidColor('blue'); // true
|
|
597
|
+
isValidColor('aliceblue'); // true
|
|
598
|
+
isValidColor('#mmff00'); // false
|
|
599
|
+
isValidColor('blue-ish'); // false
|
|
316
600
|
```
|
|
317
601
|
|
|
318
|
-
**
|
|
319
|
-
|
|
602
|
+
**isHex(input: unknown): boolean**
|
|
603
|
+
Check if the input is a valid hex color.
|
|
320
604
|
|
|
321
605
|
```typescript
|
|
322
|
-
import {
|
|
606
|
+
import { isHex } from 'colorizr';
|
|
323
607
|
|
|
324
|
-
|
|
325
|
-
|
|
608
|
+
isHex('#f04'); // true
|
|
609
|
+
isHex('#ff0044'); // true
|
|
610
|
+
isHex('#ff0044cc'); // true
|
|
611
|
+
```
|
|
612
|
+
|
|
613
|
+
**isHSL(input: unknown): boolean**
|
|
614
|
+
Check if the input is a valid HSL object.
|
|
615
|
+
|
|
616
|
+
```typescript
|
|
617
|
+
import { isHSL } from 'colorizr';
|
|
618
|
+
|
|
619
|
+
isHSL({ h: 344, s: 100, l: 50 }); // true
|
|
326
620
|
```
|
|
327
621
|
|
|
328
|
-
|
|
622
|
+
**isLAB(input: unknown): boolean**
|
|
623
|
+
Check if the input is a valid LAB color.
|
|
624
|
+
|
|
625
|
+
```typescript
|
|
626
|
+
import { isLAB } from 'colorizr';
|
|
627
|
+
|
|
628
|
+
isLAB({ l: 0.63269, a: 0.23887, b: 0.08648 }); // true
|
|
629
|
+
```
|
|
630
|
+
|
|
631
|
+
**isLHC(input: unknown): boolean**
|
|
632
|
+
Check if the input is a valid LCH color.
|
|
633
|
+
|
|
634
|
+
```typescript
|
|
635
|
+
import { isLHC } from 'colorizr';
|
|
636
|
+
|
|
637
|
+
isLHC({ l: 0.63269, c: 0.25404, h: 19.90218 }); // true
|
|
638
|
+
```
|
|
639
|
+
|
|
640
|
+
**isRGB(input: unknown): boolean**
|
|
641
|
+
Check if the input is a valid RGB color.
|
|
642
|
+
|
|
643
|
+
```typescript
|
|
644
|
+
import { isRGB } from 'colorizr';
|
|
645
|
+
|
|
646
|
+
isRGB({ r: 255, g: 0, b: 68 }); // true
|
|
647
|
+
```
|
|
648
|
+
|
|
649
|
+
### Class
|
|
329
650
|
|
|
330
651
|
```typescript
|
|
331
652
|
import Colorizr from 'Colorizr';
|
|
@@ -337,65 +658,96 @@ colorizr.hsl; // { h: 344, s: 100, l: 50 };
|
|
|
337
658
|
colorizr.rgb; // { r: 255, g: 0, b: 68 };
|
|
338
659
|
```
|
|
339
660
|
|
|
340
|
-
|
|
661
|
+
#### Getters
|
|
341
662
|
|
|
342
663
|
**colorizr.hex**
|
|
343
|
-
|
|
664
|
+
Get the hex code.
|
|
344
665
|
|
|
345
666
|
**colorizr.hsl**
|
|
346
|
-
|
|
667
|
+
Get the HSL object.
|
|
668
|
+
|
|
669
|
+
**colorizr.oklab**
|
|
670
|
+
Get the OKLAB object.
|
|
671
|
+
|
|
672
|
+
**colorizr.oklch**
|
|
673
|
+
Get the OKLCH object.
|
|
347
674
|
|
|
348
675
|
**colorizr.rgb**
|
|
349
|
-
|
|
676
|
+
Get the RGB object.
|
|
350
677
|
|
|
351
678
|
**colorizr.hue**
|
|
352
|
-
|
|
679
|
+
Get the hue (0-360).
|
|
353
680
|
|
|
354
681
|
**colorizr.saturation**
|
|
355
|
-
|
|
682
|
+
Get the saturation (0-100).
|
|
356
683
|
|
|
357
684
|
**colorizr.lightness**
|
|
358
|
-
|
|
685
|
+
Get the lightness (0-100).
|
|
359
686
|
|
|
360
687
|
**colorizr.red**
|
|
361
|
-
|
|
688
|
+
Get the red level (0-255).
|
|
362
689
|
|
|
363
690
|
**colorizr.green**
|
|
364
|
-
|
|
691
|
+
Get the green level (0-255).
|
|
365
692
|
|
|
366
693
|
**colorizr.blue**
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
**colorizr.luminance**
|
|
694
|
+
Get the blue level (0-255).
|
|
370
695
|
|
|
371
696
|
**colorizr.chroma**
|
|
697
|
+
Get the chroma (0-1).
|
|
698
|
+
|
|
699
|
+
**colorizr.luminance**
|
|
700
|
+
Get the luminance (0-1).
|
|
701
|
+
|
|
702
|
+
**colorizr.opacity**
|
|
703
|
+
Get the opacity (0-1).
|
|
704
|
+
|
|
705
|
+
**colorizr.css**
|
|
706
|
+
Get the css string of the same time as the input.
|
|
372
707
|
|
|
373
708
|
**colorizr.textColor**
|
|
709
|
+
Get a contrasting color (black or white).
|
|
374
710
|
|
|
375
|
-
|
|
711
|
+
#### Manipulation
|
|
376
712
|
|
|
377
|
-
**colorizr.lighten(percentage
|
|
713
|
+
**colorizr.lighten(percentage: number)**
|
|
714
|
+
Get a lighter color.
|
|
378
715
|
|
|
379
|
-
**colorizr.darken(percentage
|
|
716
|
+
**colorizr.darken(percentage: number)**
|
|
717
|
+
Get a darker color.
|
|
380
718
|
|
|
381
|
-
**colorizr.
|
|
719
|
+
**colorizr.desaturate(percentage: number)**
|
|
720
|
+
Get a desaturated color.
|
|
382
721
|
|
|
383
|
-
**colorizr.saturate(percentage
|
|
722
|
+
**colorizr.saturate(percentage: number)**
|
|
723
|
+
Get a saturated color.
|
|
384
724
|
|
|
385
|
-
**colorizr.rotate(degrees
|
|
725
|
+
**colorizr.rotate(degrees: number)**
|
|
726
|
+
Get a color with a hue rotated.
|
|
386
727
|
|
|
387
|
-
**colorizr.invert()**
|
|
728
|
+
**colorizr.invert()**
|
|
729
|
+
Get the inverted color.
|
|
388
730
|
|
|
389
|
-
**colorizr.
|
|
731
|
+
**colorizr.transparentize(percentage: number)**
|
|
732
|
+
Get a faded color.
|
|
390
733
|
|
|
391
|
-
|
|
734
|
+
#### Comparison
|
|
392
735
|
|
|
393
736
|
**colorizr.compare(color: string)**
|
|
394
|
-
|
|
737
|
+
Returns an object with the analysis (check the compare format above)
|
|
738
|
+
|
|
739
|
+
#### Fortmatting
|
|
395
740
|
|
|
396
|
-
|
|
741
|
+
**colorizr.format(type: ColorType, precision?: number)**
|
|
742
|
+
Returns the formatted color with the type
|
|
397
743
|
|
|
744
|
+
## Credits / References
|
|
745
|
+
|
|
746
|
+
[color.js](https://github.com/color-js/color.js)
|
|
747
|
+
[chroma-js](https://gka.github.io/chroma.js/)
|
|
398
748
|
[calculating-color-contrast](https://24ways.org/2010/calculating-color-contrast/)
|
|
399
749
|
[Colour Contrast Check](https://snook.ca/technical/colour_contrast/colour.html)
|
|
400
750
|
[Contrast Checker](https://webaim.org/resources/contrastchecker/)
|
|
401
|
-
[Converting Color Spaces in typescript](https://css-tricks.com/converting-color-spaces-in-typescript/)
|
|
751
|
+
[Converting Color Spaces in typescript](https://css-tricks.com/converting-color-spaces-in-typescript/)
|
|
752
|
+
[A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/)
|
|
753
|
+
|