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.
Files changed (291) hide show
  1. package/README.md +500 -148
  2. package/dist/index.d.mts +415 -0
  3. package/dist/index.d.ts +415 -0
  4. package/dist/index.js +1581 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +1505 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +56 -38
  9. package/src/brightness-difference.ts +18 -11
  10. package/src/chroma.ts +8 -5
  11. package/src/color-difference.ts +9 -7
  12. package/src/colorizr.ts +198 -0
  13. package/src/compare.ts +10 -7
  14. package/src/contrast.ts +10 -7
  15. package/src/convert.ts +12 -0
  16. package/src/converters/hex2hsl.ts +14 -0
  17. package/src/converters/hex2oklab.ts +14 -0
  18. package/src/converters/hex2oklch.ts +14 -0
  19. package/src/converters/hex2rgb.ts +19 -0
  20. package/src/converters/hsl2hex.ts +12 -0
  21. package/src/converters/hsl2oklab.ts +12 -0
  22. package/src/converters/hsl2oklch.ts +12 -0
  23. package/src/{hsl2rgb.ts → converters/hsl2rgb.ts} +9 -12
  24. package/src/converters/index.ts +24 -0
  25. package/src/converters/oklab2hex.ts +12 -0
  26. package/src/converters/oklab2hsl.ts +12 -0
  27. package/src/converters/oklab2oklch.ts +20 -0
  28. package/src/converters/oklab2rgb.ts +35 -0
  29. package/src/converters/oklch2hex.ts +12 -0
  30. package/src/converters/oklch2hsl.ts +12 -0
  31. package/src/converters/oklch2oklab.ts +26 -0
  32. package/src/converters/oklch2rgb.ts +12 -0
  33. package/src/converters/rgb2hex.ts +12 -0
  34. package/src/{rgb2hsl.ts → converters/rgb2hsl.ts} +9 -15
  35. package/src/converters/rgb2oklab.ts +34 -0
  36. package/src/converters/rgb2oklch.ts +12 -0
  37. package/src/darken.ts +5 -3
  38. package/src/desaturate.ts +5 -3
  39. package/src/extract-color-parts.ts +57 -0
  40. package/src/format-css.ts +83 -21
  41. package/src/format-hex.ts +15 -11
  42. package/src/index.ts +35 -191
  43. package/src/invert.ts +16 -0
  44. package/src/is-valid-color.ts +2 -2
  45. package/src/lighten.ts +5 -3
  46. package/src/luminance.ts +8 -5
  47. package/src/modules/constants.ts +36 -0
  48. package/src/modules/css-colors.ts +8 -5
  49. package/src/modules/hex-utils.ts +69 -0
  50. package/src/modules/hue2rgb.ts +3 -1
  51. package/src/modules/invariant.ts +22 -0
  52. package/src/modules/parse-color.ts +58 -38
  53. package/src/modules/updater.ts +24 -12
  54. package/src/modules/utils.ts +137 -187
  55. package/src/modules/validators.ts +169 -0
  56. package/src/name.ts +9 -6
  57. package/src/opacify.ts +21 -0
  58. package/src/opacity.ts +25 -0
  59. package/src/palette.ts +22 -12
  60. package/src/parse-css.ts +118 -62
  61. package/src/random.ts +1 -1
  62. package/src/rotate.ts +21 -11
  63. package/src/saturate.ts +5 -3
  64. package/src/scheme.ts +9 -6
  65. package/src/swatch.ts +66 -0
  66. package/src/text-color.ts +32 -7
  67. package/src/transparentize.ts +25 -0
  68. package/src/types/index.ts +61 -32
  69. package/esm/brightness-difference.d.ts +0 -4
  70. package/esm/brightness-difference.js +0 -16
  71. package/esm/brightness-difference.js.map +0 -1
  72. package/esm/chroma.d.ts +0 -4
  73. package/esm/chroma.js +0 -14
  74. package/esm/chroma.js.map +0 -1
  75. package/esm/color-difference.d.ts +0 -4
  76. package/esm/color-difference.js +0 -17
  77. package/esm/color-difference.js.map +0 -1
  78. package/esm/compare.d.ts +0 -5
  79. package/esm/compare.js +0 -36
  80. package/esm/compare.js.map +0 -1
  81. package/esm/contrast.d.ts +0 -4
  82. package/esm/contrast.js +0 -16
  83. package/esm/contrast.js.map +0 -1
  84. package/esm/darken.d.ts +0 -4
  85. package/esm/darken.js +0 -8
  86. package/esm/darken.js.map +0 -1
  87. package/esm/desaturate.d.ts +0 -4
  88. package/esm/desaturate.js +0 -8
  89. package/esm/desaturate.js.map +0 -1
  90. package/esm/fade.d.ts +0 -5
  91. package/esm/fade.js +0 -23
  92. package/esm/fade.js.map +0 -1
  93. package/esm/format-css.d.ts +0 -2
  94. package/esm/format-css.js +0 -27
  95. package/esm/format-css.js.map +0 -1
  96. package/esm/format-hex.d.ts +0 -1
  97. package/esm/format-hex.js +0 -17
  98. package/esm/format-hex.js.map +0 -1
  99. package/esm/hex2hsl.d.ts +0 -2
  100. package/esm/hex2hsl.js +0 -8
  101. package/esm/hex2hsl.js.map +0 -1
  102. package/esm/hex2rgb.d.ts +0 -2
  103. package/esm/hex2rgb.js +0 -12
  104. package/esm/hex2rgb.js.map +0 -1
  105. package/esm/hsl2hex.d.ts +0 -5
  106. package/esm/hsl2hex.js +0 -11
  107. package/esm/hsl2hex.js.map +0 -1
  108. package/esm/hsl2rgb.d.ts +0 -5
  109. package/esm/hsl2rgb.js +0 -35
  110. package/esm/hsl2rgb.js.map +0 -1
  111. package/esm/index.d.ts +0 -110
  112. package/esm/index.js +0 -167
  113. package/esm/index.js.map +0 -1
  114. package/esm/is-valid-color.d.ts +0 -1
  115. package/esm/is-valid-color.js +0 -11
  116. package/esm/is-valid-color.js.map +0 -1
  117. package/esm/is-valid-hex.d.ts +0 -1
  118. package/esm/is-valid-hex.js +0 -11
  119. package/esm/is-valid-hex.js.map +0 -1
  120. package/esm/lighten.d.ts +0 -4
  121. package/esm/lighten.js +0 -8
  122. package/esm/lighten.js.map +0 -1
  123. package/esm/luminance.d.ts +0 -4
  124. package/esm/luminance.js +0 -21
  125. package/esm/luminance.js.map +0 -1
  126. package/esm/modules/css-colors.d.ts +0 -152
  127. package/esm/modules/css-colors.js +0 -153
  128. package/esm/modules/css-colors.js.map +0 -1
  129. package/esm/modules/hue2rgb.d.ts +0 -4
  130. package/esm/modules/hue2rgb.js +0 -25
  131. package/esm/modules/hue2rgb.js.map +0 -1
  132. package/esm/modules/parse-color.d.ts +0 -2
  133. package/esm/modules/parse-color.js +0 -56
  134. package/esm/modules/parse-color.js.map +0 -1
  135. package/esm/modules/updater.d.ts +0 -4
  136. package/esm/modules/updater.js +0 -19
  137. package/esm/modules/updater.js.map +0 -1
  138. package/esm/modules/utils.d.ts +0 -61
  139. package/esm/modules/utils.js +0 -199
  140. package/esm/modules/utils.js.map +0 -1
  141. package/esm/name.d.ts +0 -1
  142. package/esm/name.js +0 -10
  143. package/esm/name.js.map +0 -1
  144. package/esm/palette.d.ts +0 -2
  145. package/esm/palette.js +0 -32
  146. package/esm/palette.js.map +0 -1
  147. package/esm/parse-css.d.ts +0 -5
  148. package/esm/parse-css.js +0 -78
  149. package/esm/parse-css.js.map +0 -1
  150. package/esm/random.d.ts +0 -4
  151. package/esm/random.js +0 -13
  152. package/esm/random.js.map +0 -1
  153. package/esm/rgb2hex.d.ts +0 -5
  154. package/esm/rgb2hex.js +0 -20
  155. package/esm/rgb2hex.js.map +0 -1
  156. package/esm/rgb2hsl.d.ts +0 -2
  157. package/esm/rgb2hsl.js +0 -51
  158. package/esm/rgb2hsl.js.map +0 -1
  159. package/esm/rotate.d.ts +0 -4
  160. package/esm/rotate.js +0 -17
  161. package/esm/rotate.js.map +0 -1
  162. package/esm/saturate.d.ts +0 -4
  163. package/esm/saturate.js +0 -8
  164. package/esm/saturate.js.map +0 -1
  165. package/esm/scheme.d.ts +0 -5
  166. package/esm/scheme.js +0 -44
  167. package/esm/scheme.js.map +0 -1
  168. package/esm/shift.d.ts +0 -5
  169. package/esm/shift.js +0 -13
  170. package/esm/shift.js.map +0 -1
  171. package/esm/text-color.d.ts +0 -4
  172. package/esm/text-color.js +0 -13
  173. package/esm/text-color.js.map +0 -1
  174. package/esm/types/index.d.ts +0 -46
  175. package/esm/types/index.js +0 -2
  176. package/esm/types/index.js.map +0 -1
  177. package/lib/brightness-difference.d.ts +0 -4
  178. package/lib/brightness-difference.js +0 -19
  179. package/lib/brightness-difference.js.map +0 -1
  180. package/lib/chroma.d.ts +0 -4
  181. package/lib/chroma.js +0 -17
  182. package/lib/chroma.js.map +0 -1
  183. package/lib/color-difference.d.ts +0 -4
  184. package/lib/color-difference.js +0 -20
  185. package/lib/color-difference.js.map +0 -1
  186. package/lib/compare.d.ts +0 -5
  187. package/lib/compare.js +0 -39
  188. package/lib/compare.js.map +0 -1
  189. package/lib/contrast.d.ts +0 -4
  190. package/lib/contrast.js +0 -19
  191. package/lib/contrast.js.map +0 -1
  192. package/lib/darken.d.ts +0 -4
  193. package/lib/darken.js +0 -11
  194. package/lib/darken.js.map +0 -1
  195. package/lib/desaturate.d.ts +0 -4
  196. package/lib/desaturate.js +0 -11
  197. package/lib/desaturate.js.map +0 -1
  198. package/lib/fade.d.ts +0 -5
  199. package/lib/fade.js +0 -26
  200. package/lib/fade.js.map +0 -1
  201. package/lib/format-css.d.ts +0 -2
  202. package/lib/format-css.js +0 -30
  203. package/lib/format-css.js.map +0 -1
  204. package/lib/format-hex.d.ts +0 -1
  205. package/lib/format-hex.js +0 -20
  206. package/lib/format-hex.js.map +0 -1
  207. package/lib/hex2hsl.d.ts +0 -2
  208. package/lib/hex2hsl.js +0 -11
  209. package/lib/hex2hsl.js.map +0 -1
  210. package/lib/hex2rgb.d.ts +0 -2
  211. package/lib/hex2rgb.js +0 -15
  212. package/lib/hex2rgb.js.map +0 -1
  213. package/lib/hsl2hex.d.ts +0 -5
  214. package/lib/hsl2hex.js +0 -14
  215. package/lib/hsl2hex.js.map +0 -1
  216. package/lib/hsl2rgb.d.ts +0 -5
  217. package/lib/hsl2rgb.js +0 -38
  218. package/lib/hsl2rgb.js.map +0 -1
  219. package/lib/index.d.ts +0 -110
  220. package/lib/index.js +0 -212
  221. package/lib/index.js.map +0 -1
  222. package/lib/is-valid-color.d.ts +0 -1
  223. package/lib/is-valid-color.js +0 -14
  224. package/lib/is-valid-color.js.map +0 -1
  225. package/lib/is-valid-hex.d.ts +0 -1
  226. package/lib/is-valid-hex.js +0 -14
  227. package/lib/is-valid-hex.js.map +0 -1
  228. package/lib/lighten.d.ts +0 -4
  229. package/lib/lighten.js +0 -11
  230. package/lib/lighten.js.map +0 -1
  231. package/lib/luminance.d.ts +0 -4
  232. package/lib/luminance.js +0 -24
  233. package/lib/luminance.js.map +0 -1
  234. package/lib/modules/css-colors.d.ts +0 -152
  235. package/lib/modules/css-colors.js +0 -156
  236. package/lib/modules/css-colors.js.map +0 -1
  237. package/lib/modules/hue2rgb.d.ts +0 -4
  238. package/lib/modules/hue2rgb.js +0 -28
  239. package/lib/modules/hue2rgb.js.map +0 -1
  240. package/lib/modules/parse-color.d.ts +0 -2
  241. package/lib/modules/parse-color.js +0 -59
  242. package/lib/modules/parse-color.js.map +0 -1
  243. package/lib/modules/updater.d.ts +0 -4
  244. package/lib/modules/updater.js +0 -22
  245. package/lib/modules/updater.js.map +0 -1
  246. package/lib/modules/utils.d.ts +0 -61
  247. package/lib/modules/utils.js +0 -215
  248. package/lib/modules/utils.js.map +0 -1
  249. package/lib/name.d.ts +0 -1
  250. package/lib/name.js +0 -13
  251. package/lib/name.js.map +0 -1
  252. package/lib/palette.d.ts +0 -2
  253. package/lib/palette.js +0 -35
  254. package/lib/palette.js.map +0 -1
  255. package/lib/parse-css.d.ts +0 -5
  256. package/lib/parse-css.js +0 -81
  257. package/lib/parse-css.js.map +0 -1
  258. package/lib/random.d.ts +0 -4
  259. package/lib/random.js +0 -16
  260. package/lib/random.js.map +0 -1
  261. package/lib/rgb2hex.d.ts +0 -5
  262. package/lib/rgb2hex.js +0 -23
  263. package/lib/rgb2hex.js.map +0 -1
  264. package/lib/rgb2hsl.d.ts +0 -2
  265. package/lib/rgb2hsl.js +0 -54
  266. package/lib/rgb2hsl.js.map +0 -1
  267. package/lib/rotate.d.ts +0 -4
  268. package/lib/rotate.js +0 -20
  269. package/lib/rotate.js.map +0 -1
  270. package/lib/saturate.d.ts +0 -4
  271. package/lib/saturate.js +0 -11
  272. package/lib/saturate.js.map +0 -1
  273. package/lib/scheme.d.ts +0 -5
  274. package/lib/scheme.js +0 -47
  275. package/lib/scheme.js.map +0 -1
  276. package/lib/shift.d.ts +0 -5
  277. package/lib/shift.js +0 -17
  278. package/lib/shift.js.map +0 -1
  279. package/lib/text-color.d.ts +0 -4
  280. package/lib/text-color.js +0 -16
  281. package/lib/text-color.js.map +0 -1
  282. package/lib/types/index.d.ts +0 -46
  283. package/lib/types/index.js +0 -3
  284. package/lib/types/index.js.map +0 -1
  285. package/src/fade.ts +0 -30
  286. package/src/hex2hsl.ts +0 -10
  287. package/src/hex2rgb.ts +0 -15
  288. package/src/hsl2hex.ts +0 -13
  289. package/src/is-valid-hex.ts +0 -13
  290. package/src/rgb2hex.ts +0 -24
  291. package/src/shift.ts +0 -15
package/README.md CHANGED
@@ -2,13 +2,13 @@
2
2
 
3
3
  [![NPM version](https://badge.fury.io/js/colorizr.svg)](https://www.npmjs.com/package/colorizr) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/colorizr)](https://bundlephobia.com/result?p=colorizr) [![CI](https://github.com/gilbarbara/colorizr/actions/workflows/main.yml/badge.svg)](https://github.com/gilbarbara/colorizr/actions/workflows/main.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/maintainability)](https://codeclimate.com/github/gilbarbara/colorizr/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/6d686ce2a9f2a1a47d98/test_coverage)](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 and RGB, including CSS strings
9
+ - 🏖 **Easy to use**: Works with Hex, HSL, OkLab, OkLCH, and RGB.
10
10
  - ♿️ **Accessibility:** WCAG analysis and comparison.
11
- - 🛠 **Small:** Less than 6k (gzipped) and zero dependencies.
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 access all methods:
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 colorizr = new Colorizr('#ff0044');
35
+ const colorInstance = new Colorizr('#ff0044');
36
+ colorInstance.luminance; // 0.2168
37
+ colorInstance.chroma; // 1
38
+ colorInstance.opacity; // 1
36
39
  ```
37
40
 
38
- ## Methods
41
+ ## API
39
42
 
40
- > String inputs accept css values: hex, rgb(a), hsl(a) and named colors.
43
+ > String inputs accept css values: hex, hsl, oklab, oklch, rgb, and named colors.
41
44
 
42
- **brightnessDifference(left: string, right: string): number**
43
- _get the brightness difference between 2 colors_
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
- ```typescript
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
- _get the chroma of a color_
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
- _get the color difference between 2 colors_
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
- _get the WCAG analysis for two colors_
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
- _get the WCAG contrast ratio between 2 colors_
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
- **darken(input: string, amount = 10): string**
100
- _get a color with decreased lightness_
328
+ **palette(input: string, options?: PaletteOptions): string[]**
329
+ Generate a palette of colors.
101
330
 
102
331
  ```typescript
103
- import { darken } from 'colorizr';
332
+ import { palette } from 'colorizr';
104
333
 
105
- darken('#ff0044', 10); // #cc0036
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
- **desaturate(input: string, amount: number): string**
109
- _get a color with decreased saturation_
341
+ **scheme(input: string, type: Scheme): string[]**
342
+ Get a color scheme.
110
343
 
111
344
  ```typescript
112
- import { desaturate } from 'colorizr';
345
+ import { scheme } from 'colorizr';
113
346
 
114
- desaturate('#ff0044', 10); // #f20d4a
347
+ const complementary = scheme('rgb(255, 0, 68)'); // ['#ff0044', '#00ffbb']
348
+ const triadic = scheme('#ff0044', 'triadic'); // ['#ff0044', '#44ff00', '#0044ff']
115
349
  ```
116
350
 
117
- **fade(input: string, amount: number = 10, output?: ColorTypes = 'rgb'): string**
118
- _get a transparent color_
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 { fade } from 'colorizr';
356
+ import { swatch } from 'colorizr';
122
357
 
123
- fade('hsl(344, 100, 50)', 10); // rgba(255, 0, 68, 0.9)
124
- fade('#ff0044', 50, 'hsl'); // hsla(344, 100%, 50%, 0.5)
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
- **formatCSS(input: HSL | RGB, options?: FormatOptions): string**
128
- _get the css string for a color model object_
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 { formatCSS } from 'colorizr';
379
+ import { convert } from 'colorizr';
132
380
 
133
- formatCSS({ h: 344, s: 100, l: 50 }, { model: 'rgb' }); // 'rgb(255, 0, 68)'
134
- formatCSS({ r: 255, g: 0, b: 68 }, { alpha: 0.5, model: 'hsl' }); // 'hsla(344, 100%, 50%, 0.5)'
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
- **formatHex(input: string): string**
138
- _format a short hex string of 3 (or 4) digits into 6 (or 8) digits._
385
+ **hex2hsl(input: string): HSL**
386
+ Convert HEX to HSL.
139
387
 
140
388
  ```typescript
141
- import { formatHex } from 'colorizr';
389
+ import { hex2hsl } from 'colorizr';
142
390
 
143
- formatHex('#07e'); // '#0077ee'
144
- formatHex('#f058'); // '#ff005588'
391
+ hex2hsl('#ff0044'); // { h: 344, s: 100, l: 50 }
145
392
  ```
146
393
 
147
- **hex2hsl(input: string): HSL**
148
- _convert a hex string into an HSL object_
394
+ **hex2oklab(input: string, precision?: number): LAB**
395
+ Convert HEX to OKLAB.
149
396
 
150
397
  ```typescript
151
- import { hex2hsl } from 'colorizr';
398
+ import { hex2oklab } from 'colorizr';
152
399
 
153
- hex2hsl('#ff0044'); // { h: 344, s: 100, l: 50 }
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
- _convert a hex string into an RGB object_
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
- _convert an HSL object into a hex string_
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
- **hsl2rgb(input: HSL): RGB**
175
- _convert an HSL object into an RGB object_
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
- **isValidColor(input: any): boolean**
184
- _check if the input can be parsed correctly_
461
+ **oklab2hex(input: LAB | ColorTupple): string**
462
+ Convert OKLAB to HEX.
185
463
 
186
464
  ```typescript
187
- import { isValidColor } from 'colorizr';
465
+ import { oklab2hex } from 'colorizr';
188
466
 
189
- isValidColor('#f04'); // true
190
- isValidColor('#ff0044'); // true
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
- **isValidHex(input: any): boolean**
201
- _check if the input is a valid hex_
471
+ **oklab2hsl(input: LAB | ColorTupple): HSL**
472
+ Convert OKLAB to HSL.
202
473
 
203
474
  ```typescript
204
- import { isValidHex } from 'colorizr';
475
+ import { oklab2hsl } from 'colorizr';
205
476
 
206
- isValidHex('#f04'); // true
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
- **lighten(input: string, amount: number): string**
210
- _get a color with increased lightness_
481
+ **oklab2oklch(input: LAB | ColorTupple, precision?: number): LCH**
482
+ Convert OKLAB to OKLCH.
211
483
 
212
484
  ```typescript
213
- import { lighten } from 'colorizr';
485
+ import { oklab2oklch } from 'colorizr';
214
486
 
215
- lighten('#ff0044', 10); // #ff3369
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
- **luminance(input: string): number**
219
- _get the relative brightness according to the [WCAG definition](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef). Normalized to `0` for black and `1` for white._
491
+ **oklab2rgb(input: LAB | ColorTupple, precision: number = 0): RGB**
492
+ Convert OKLAB to RGB.
220
493
 
221
494
  ```typescript
222
- import { luminance } from 'colorizr';
495
+ import { oklab2rgb } from 'colorizr';
223
496
 
224
- luminance('#ff0044'); // 0.2168
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
- **name(input: string): string**
228
- _get the named color. return the hex code if it can't be named_
501
+ **oklch2hex(input: LCH | ColorTupple): string**
502
+ Convert OKLCH to HEX.
229
503
 
230
504
  ```typescript
231
- import { name } from 'colorizr';
505
+ import { oklch2hex } from 'colorizr';
232
506
 
233
- name('#ffc0cb', 10); // pink
234
- name('rgb(176, 224, 230)'); // 'powderblue'
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
- **palette(input: string, options?: PaletteOptions): string[]**
239
- _get a palette for a color_
511
+ **oklch2hsl(input: LCH | ColorTupple): HSL**
512
+ Convert OKLCH to HSL.
240
513
 
241
514
  ```typescript
242
- import { palette } from 'colorizr';
243
-
244
- palette('#ff0044');
245
- // ['#ff0044', '#ff7700', '#88ff00', '#00ff77', '#0088ff', '#7700ff'];
515
+ import { oklch2hsl } from 'colorizr';
246
516
 
247
- palette('#ff0044', { type: 'monochromatic' });
248
- // ['#ff99b4', '#ff5582', '#ff1150', '#cc0036', '#880024', '#440012']
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
- **parseCSS(input: string, output: ColorTypes = 'hex'): string | HSL | RGB**
252
- _parse a css string to hex, hsl, or RGB_
521
+ **oklch2oklab(input: LCH | ColorTupple, precision?: number): LAB**
522
+ Convert OKLCH to OKLAB.
253
523
 
254
524
  ```typescript
255
- import { parseCSS } from 'colorizr';
525
+ import { oklch2oklab } from 'colorizr';
256
526
 
257
- parseCSS('hsl(270 60% 70%)'); // '#b385e0'
258
- parseCSS('#ff0044', 'hsl'); // { h: 344, l: 50, s: 100 }
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
- **random(): string**
262
- _get a random color_
531
+ **oklch2rgb(input: LCH | ColorTupple, precision: number = 0): RGB**
532
+ Convert OKLCH to RGB.
263
533
 
264
534
  ```typescript
265
- import { random } from 'colorizr';
535
+ import { oklch2rgb } from 'colorizr';
266
536
 
267
- random(); // '#b385e0'
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 | RGBArray): string**
271
- _convert an RGB object into a hex string_
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: 55, b: 75 }); // '#ff374b'
547
+ rgb2hex({ r: 255, g: 0, b: 68 }); // '#ff0044'
277
548
  rgb2hex([255, 0, 68]); // '#ff0044'
278
549
  ```
279
550
 
280
- **rgb2hsl(input: RGB | RGBArray): HSL**
281
- _convert an RGB object into an HSL object_
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: 55, b: 75 }); // { h: 354, s: 100, l: 60.78 }
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
- **rotate(input: string, degrees = 15): string** _get a color with changed hue_
561
+ **rgb2oklab(input: RGB | ColorTupple, precision: number): LAB**
562
+ Convert RGB to OKLAB.
291
563
 
292
564
  ```typescript
293
- import { rotate } from 'colorizr';
565
+ import { rgb2oklab } from 'colorizr';
294
566
 
295
- rotate('#ff0044', 30); // #ff3b00
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
- **saturate(input: string, amount: number): string**
299
- _get a color with increased saturation_
571
+ **rgb2oklch(input: RGB | ColorTupple, precision: number): LCH**
572
+ Convert RGB to OKLCH.
300
573
 
301
574
  ```typescript
302
- import { saturate } from 'colorizr';
575
+ import { rgb2oklch } from 'colorizr';
303
576
 
304
- saturate('#ff0044', 10); // #ff0044 (already at the maximum)
305
- saturate('pink', 10); // #ffc0cb
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
- **scheme(input: string, type: Scheme): string[]**
309
- _get the scheme for a color_
581
+ ### Validators
582
+
583
+ **isValidColor(input: any): boolean**
584
+ Check if the input is a valid color.
310
585
 
311
586
  ```typescript
312
- import { scheme } from 'colorizr';
587
+ import { isValidColor } from 'colorizr';
313
588
 
314
- const complementary = scheme('rgb(255, 0, 68)'); // ['#ff0044', '#00ffbb']
315
- const triadic = scheme('#ff0044', 'triadic'); // ['#ff0044', '#44ff00', '#0044ff']
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
- **textColor(input: string): string**
319
- _get a contrasting color to use with the text_
602
+ **isHex(input: unknown): boolean**
603
+ Check if the input is a valid hex color.
320
604
 
321
605
  ```typescript
322
- import { textColor } from 'colorizr';
606
+ import { isHex } from 'colorizr';
323
607
 
324
- textColor('#ff0044'); // #ffffff
325
- textColor('#fff800'); // #000000
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
- ## Instance API
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
- ### Getters
661
+ #### Getters
341
662
 
342
663
  **colorizr.hex**
343
- _returns the hex_
664
+ Get the hex code.
344
665
 
345
666
  **colorizr.hsl**
346
- _returns the HSL object_
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
- _returns the RGB object_
676
+ Get the RGB object.
350
677
 
351
678
  **colorizr.hue**
352
- _returns the color hue, between 0 and 360_
679
+ Get the hue (0-360).
353
680
 
354
681
  **colorizr.saturation**
355
- _returns the color saturation, between 0 and 100_
682
+ Get the saturation (0-100).
356
683
 
357
684
  **colorizr.lightness**
358
- _returns the color lightness, between 0 and 100_
685
+ Get the lightness (0-100).
359
686
 
360
687
  **colorizr.red**
361
- _returns the color red level, between 0 and 255_
688
+ Get the red level (0-255).
362
689
 
363
690
  **colorizr.green**
364
- _returns the color green level, between 0 and 255_
691
+ Get the green level (0-255).
365
692
 
366
693
  **colorizr.blue**
367
- _returns the color blue level, between 0 and 255_
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
- ### Manipulation
711
+ #### Manipulation
376
712
 
377
- **colorizr.lighten(percentage = 10)**
713
+ **colorizr.lighten(percentage: number)**
714
+ Get a lighter color.
378
715
 
379
- **colorizr.darken(percentage = 10)**
716
+ **colorizr.darken(percentage: number)**
717
+ Get a darker color.
380
718
 
381
- **colorizr.saturate(percentage = 10)**
719
+ **colorizr.desaturate(percentage: number)**
720
+ Get a desaturated color.
382
721
 
383
- **colorizr.saturate(percentage = 10)**
722
+ **colorizr.saturate(percentage: number)**
723
+ Get a saturated color.
384
724
 
385
- **colorizr.rotate(degrees = 15)**
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.fade(percentage = 10)**
731
+ **colorizr.transparentize(percentage: number)**
732
+ Get a faded color.
390
733
 
391
- ### Comparison
734
+ #### Comparison
392
735
 
393
736
  **colorizr.compare(color: string)**
394
- _returns an object with the analysis (check the compare output above)_
737
+ Returns an object with the analysis (check the compare format above)
738
+
739
+ #### Fortmatting
395
740
 
396
- ## References
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
+