ordinary-palette 0.2.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/LICENSE +21 -0
- package/README.en.md +161 -0
- package/README.md +318 -0
- package/dist/colors.css +286 -0
- package/dist/colors.json +344 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/palette.d.ts +1300 -0
- package/dist/palette.d.ts.map +1 -0
- package/dist/palette.js +1019 -0
- package/dist/palette.js.map +1 -0
- package/package.json +45 -0
package/dist/palette.js
ADDED
|
@@ -0,0 +1,1019 @@
|
|
|
1
|
+
export const steps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
2
|
+
export const opacitySteps = ["00", "05", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"];
|
|
3
|
+
/** Light-scale yellow OKLCH L minus blue L. Zero on step 50, which every color family shares. Positive from 100, where yellow stays lighter than blue. */
|
|
4
|
+
export const yellowLightnessOffset = {
|
|
5
|
+
50: 0,
|
|
6
|
+
100: 1.9,
|
|
7
|
+
200: 5.8,
|
|
8
|
+
300: 10,
|
|
9
|
+
400: 14.7,
|
|
10
|
+
500: 19.5,
|
|
11
|
+
600: 21.6,
|
|
12
|
+
700: 22.4,
|
|
13
|
+
800: 22.4,
|
|
14
|
+
900: 19.8,
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Dark cool-gray OKLCH L. The dark scale runs the other way: step 50 is the darkest surface tint and
|
|
18
|
+
* step 900 the lightest, so a step keeps its role (50 background, 900 text) in both modes.
|
|
19
|
+
*/
|
|
20
|
+
export const darkLightness = {
|
|
21
|
+
50: 22,
|
|
22
|
+
100: 27,
|
|
23
|
+
200: 33,
|
|
24
|
+
300: 40,
|
|
25
|
+
400: 49,
|
|
26
|
+
500: 59,
|
|
27
|
+
600: 70,
|
|
28
|
+
700: 81,
|
|
29
|
+
800: 90,
|
|
30
|
+
900: 97,
|
|
31
|
+
};
|
|
32
|
+
// Chromatic families: chroma sits about 12% above the earlier quieter curve, up to what sRGB holds.
|
|
33
|
+
// Every chromatic family except yellow shares one lightness curve, within about 1 L of blue on each step.
|
|
34
|
+
// From 500, each step falls about 7.5 L and keeps what chroma sRGB allows,
|
|
35
|
+
// so 700–900 stay apart and each family keeps its own color instead of settling into brown.
|
|
36
|
+
// Pink sits at hue 356, a true pink, so it stays apart from red (ΔE OK above 0.1 at 500).
|
|
37
|
+
export const pink = {
|
|
38
|
+
50: "#feeff4",
|
|
39
|
+
100: "#fcdee8",
|
|
40
|
+
200: "#f9bfd3",
|
|
41
|
+
300: "#ff95be",
|
|
42
|
+
400: "#ff61a7",
|
|
43
|
+
500: "#e7388d",
|
|
44
|
+
600: "#ca1476",
|
|
45
|
+
700: "#a80061",
|
|
46
|
+
800: "#85004b",
|
|
47
|
+
900: "#650038",
|
|
48
|
+
};
|
|
49
|
+
export const red = {
|
|
50
|
+
50: "#ffefed",
|
|
51
|
+
100: "#ffdfda",
|
|
52
|
+
200: "#fdc1b9",
|
|
53
|
+
300: "#ff998f",
|
|
54
|
+
400: "#ff6960",
|
|
55
|
+
500: "#ee3635",
|
|
56
|
+
600: "#d20b1b",
|
|
57
|
+
700: "#ac0014",
|
|
58
|
+
800: "#88000a",
|
|
59
|
+
900: "#660006",
|
|
60
|
+
};
|
|
61
|
+
// Orange is vivid at 500 (hue 44, chroma about 0.19, close to SEED carrot) and sits 3 L above the shared curve from 400, since orange only turns vivid when light. Pale steps lean toward apricot (hue 60), dark steps toward 42.
|
|
62
|
+
export const orange = {
|
|
63
|
+
50: "#fcf1e8",
|
|
64
|
+
100: "#fae2d0",
|
|
65
|
+
200: "#f5c8a4",
|
|
66
|
+
300: "#faaa76",
|
|
67
|
+
400: "#ff8542",
|
|
68
|
+
500: "#ec5f00",
|
|
69
|
+
600: "#c94d00",
|
|
70
|
+
700: "#a83d00",
|
|
71
|
+
800: "#873000",
|
|
72
|
+
900: "#692300",
|
|
73
|
+
};
|
|
74
|
+
// Yellow shares only step 50 with the other color families. From 100 it sits lighter, so chroma
|
|
75
|
+
// reaches the Toss TDS level (about 0.165 at 500) inside sRGB and pale steps read yellow, not beige.
|
|
76
|
+
// From 500, hue leans toward amber but stays within 15° of step 50. Steps 600–900 fall faster, so 900 is a deep
|
|
77
|
+
// gold that carries 4.5:1 text on white and on yellow 100.
|
|
78
|
+
export const yellow = {
|
|
79
|
+
50: "#fdf3da",
|
|
80
|
+
100: "#ffecbd",
|
|
81
|
+
200: "#ffe29b",
|
|
82
|
+
300: "#ffd576",
|
|
83
|
+
400: "#ffc84c",
|
|
84
|
+
500: "#feb700",
|
|
85
|
+
600: "#e9a400",
|
|
86
|
+
700: "#d28f00",
|
|
87
|
+
800: "#b57a00",
|
|
88
|
+
900: "#916000",
|
|
89
|
+
};
|
|
90
|
+
// Yellow-green 연두 between yellow and green (hue 124–130). From 300 it stays lighter than green.
|
|
91
|
+
export const lightGreen = {
|
|
92
|
+
50: "#f0f5e9",
|
|
93
|
+
100: "#e2ecd2",
|
|
94
|
+
200: "#c8daa7",
|
|
95
|
+
300: "#aacd5d",
|
|
96
|
+
400: "#8cb809",
|
|
97
|
+
500: "#739c00",
|
|
98
|
+
600: "#588000",
|
|
99
|
+
700: "#466c00",
|
|
100
|
+
800: "#325600",
|
|
101
|
+
900: "#234200",
|
|
102
|
+
};
|
|
103
|
+
export const green = {
|
|
104
|
+
50: "#ebf6ed",
|
|
105
|
+
100: "#d5efdd",
|
|
106
|
+
200: "#afe0be",
|
|
107
|
+
300: "#7bd59a",
|
|
108
|
+
400: "#4dbf7a",
|
|
109
|
+
500: "#21a65b",
|
|
110
|
+
600: "#008849",
|
|
111
|
+
700: "#00723c",
|
|
112
|
+
800: "#005a2e",
|
|
113
|
+
900: "#004422",
|
|
114
|
+
};
|
|
115
|
+
// Cyan at hue 195: aqua like #00ffff at the pale end, teal like #008080 at the dark end. Lighter than the other
|
|
116
|
+
// families from 300, because this hue only holds chroma at high lightness in sRGB.
|
|
117
|
+
export const cyan = {
|
|
118
|
+
50: "#e7f7f7",
|
|
119
|
+
100: "#cdf0ef",
|
|
120
|
+
200: "#9be1e1",
|
|
121
|
+
300: "#44d5d7",
|
|
122
|
+
400: "#18bcbe",
|
|
123
|
+
500: "#00a0a0",
|
|
124
|
+
600: "#008282",
|
|
125
|
+
700: "#006d6d",
|
|
126
|
+
800: "#005656",
|
|
127
|
+
900: "#004141",
|
|
128
|
+
};
|
|
129
|
+
// Sky blue between cyan and blue. Hue runs 232–242, and from 300 it stays lighter than blue.
|
|
130
|
+
export const lightBlue = {
|
|
131
|
+
50: "#e8f6fc",
|
|
132
|
+
100: "#d0ecfb",
|
|
133
|
+
200: "#a4dbf8",
|
|
134
|
+
300: "#64cbff",
|
|
135
|
+
400: "#01b3f5",
|
|
136
|
+
500: "#0097d3",
|
|
137
|
+
600: "#007db5",
|
|
138
|
+
700: "#006697",
|
|
139
|
+
800: "#004f79",
|
|
140
|
+
900: "#003c5e",
|
|
141
|
+
};
|
|
142
|
+
// Pale steps hold hue near 245–251 so they stay apart from light-blue.
|
|
143
|
+
// 500 is the main step: 600 and 700 stay just under its chroma so 600 does not read as the brand blue.
|
|
144
|
+
export const blue = {
|
|
145
|
+
50: "#eaf5fe",
|
|
146
|
+
100: "#d5eaff",
|
|
147
|
+
200: "#b0d6ff",
|
|
148
|
+
300: "#8abeff",
|
|
149
|
+
400: "#5fa4ff",
|
|
150
|
+
500: "#2b84ff",
|
|
151
|
+
600: "#126be0",
|
|
152
|
+
700: "#0056bd",
|
|
153
|
+
800: "#004395",
|
|
154
|
+
900: "#003272",
|
|
155
|
+
};
|
|
156
|
+
// Purple sits at hue 288, just past indigo toward violet, so it stays apart from blue.
|
|
157
|
+
export const purple = {
|
|
158
|
+
50: "#f1f3ff",
|
|
159
|
+
100: "#e6e4ff",
|
|
160
|
+
200: "#cfcbfe",
|
|
161
|
+
300: "#b4abff",
|
|
162
|
+
400: "#9d8bff",
|
|
163
|
+
500: "#8568f6",
|
|
164
|
+
600: "#6e4fdb",
|
|
165
|
+
700: "#593eb5",
|
|
166
|
+
800: "#452f8f",
|
|
167
|
+
900: "#33226c",
|
|
168
|
+
};
|
|
169
|
+
// Warm brown between orange and gray (hue 56–64), with low chroma so it reads as wood and earth, not orange.
|
|
170
|
+
export const brown = {
|
|
171
|
+
50: "#f8f2ec",
|
|
172
|
+
100: "#f3e5d9",
|
|
173
|
+
200: "#e6cdb9",
|
|
174
|
+
300: "#d3b090",
|
|
175
|
+
400: "#c1956f",
|
|
176
|
+
500: "#aa7a53",
|
|
177
|
+
600: "#91633e",
|
|
178
|
+
700: "#784f2e",
|
|
179
|
+
800: "#5f3b20",
|
|
180
|
+
900: "#482b14",
|
|
181
|
+
};
|
|
182
|
+
// Gray keeps a denser pale end than the color families (L 98, 96.5, 93.5) for surfaces and borders.
|
|
183
|
+
export const coolGray = {
|
|
184
|
+
50: "#f7f8fa",
|
|
185
|
+
100: "#f2f4f5",
|
|
186
|
+
200: "#e7eaed",
|
|
187
|
+
300: "#d2d6db",
|
|
188
|
+
400: "#afb5bb",
|
|
189
|
+
500: "#838a91",
|
|
190
|
+
600: "#61686f",
|
|
191
|
+
700: "#454b51",
|
|
192
|
+
800: "#2e3338",
|
|
193
|
+
900: "#1c2023",
|
|
194
|
+
};
|
|
195
|
+
// Chroma 0 and no hue. Lightness matches cool-gray at the same step.
|
|
196
|
+
// #666666 only illustrates that zero-chroma character. It is not copied onto these steps.
|
|
197
|
+
export const neutralGray = {
|
|
198
|
+
50: "#f8f8f8",
|
|
199
|
+
100: "#f3f3f3",
|
|
200
|
+
200: "#e9e9e9",
|
|
201
|
+
300: "#d6d6d6",
|
|
202
|
+
400: "#b4b4b4",
|
|
203
|
+
500: "#898989",
|
|
204
|
+
600: "#676767",
|
|
205
|
+
700: "#4a4a4a",
|
|
206
|
+
800: "#333333",
|
|
207
|
+
900: "#1f1f1f",
|
|
208
|
+
};
|
|
209
|
+
export const whiteOpacity = {
|
|
210
|
+
"00": "#ffffff00",
|
|
211
|
+
"05": "#ffffff0d",
|
|
212
|
+
"10": "#ffffff1a",
|
|
213
|
+
"20": "#ffffff33",
|
|
214
|
+
"30": "#ffffff4d",
|
|
215
|
+
"40": "#ffffff66",
|
|
216
|
+
"50": "#ffffff80",
|
|
217
|
+
"60": "#ffffff99",
|
|
218
|
+
"70": "#ffffffb3",
|
|
219
|
+
"80": "#ffffffcc",
|
|
220
|
+
"90": "#ffffffe6",
|
|
221
|
+
"100": "#ffffffff",
|
|
222
|
+
};
|
|
223
|
+
export const blackOpacity = {
|
|
224
|
+
"00": "#00000000",
|
|
225
|
+
"05": "#0000000d",
|
|
226
|
+
"10": "#0000001a",
|
|
227
|
+
"20": "#00000033",
|
|
228
|
+
"30": "#0000004d",
|
|
229
|
+
"40": "#00000066",
|
|
230
|
+
"50": "#00000080",
|
|
231
|
+
"60": "#00000099",
|
|
232
|
+
"70": "#000000b3",
|
|
233
|
+
"80": "#000000cc",
|
|
234
|
+
"90": "#000000e6",
|
|
235
|
+
"100": "#000000ff",
|
|
236
|
+
};
|
|
237
|
+
// Dark steps rise from a tinted dark surface at 50 to a pale tint at 900. Steps 50–200 share L 29, 34, 40.
|
|
238
|
+
// Step 500 sits within 4 L of light 500 (about 1 L above for most families), so the vivid step reads the same on a dark page.
|
|
239
|
+
export const darkPink = {
|
|
240
|
+
50: "#3b232c",
|
|
241
|
+
100: "#512939",
|
|
242
|
+
200: "#6b3249",
|
|
243
|
+
300: "#9a2b5f",
|
|
244
|
+
400: "#c22d76",
|
|
245
|
+
500: "#eb3c90",
|
|
246
|
+
600: "#ff66a9",
|
|
247
|
+
700: "#ff96bf",
|
|
248
|
+
800: "#ffbcd4",
|
|
249
|
+
900: "#ffdee9",
|
|
250
|
+
};
|
|
251
|
+
export const darkRed = {
|
|
252
|
+
50: "#3d2321",
|
|
253
|
+
100: "#542a26",
|
|
254
|
+
200: "#6e332e",
|
|
255
|
+
300: "#a02b29",
|
|
256
|
+
400: "#ca2e2c",
|
|
257
|
+
500: "#f33c39",
|
|
258
|
+
600: "#ff7067",
|
|
259
|
+
700: "#ff9c92",
|
|
260
|
+
800: "#ffc0b7",
|
|
261
|
+
900: "#ffe0db",
|
|
262
|
+
};
|
|
263
|
+
export const darkOrange = {
|
|
264
|
+
50: "#3c251b",
|
|
265
|
+
100: "#532c1d",
|
|
266
|
+
200: "#6d3620",
|
|
267
|
+
300: "#9a3e13",
|
|
268
|
+
400: "#c54c03",
|
|
269
|
+
500: "#f0620a",
|
|
270
|
+
600: "#ff8440",
|
|
271
|
+
700: "#ffa970",
|
|
272
|
+
800: "#ffc79a",
|
|
273
|
+
900: "#ffe2cb",
|
|
274
|
+
};
|
|
275
|
+
// Dark yellow 500 stays lighter than dark blue 500. Hue follows the light yellow step nearest in lightness.
|
|
276
|
+
export const darkYellow = {
|
|
277
|
+
50: "#362915",
|
|
278
|
+
100: "#4a330d",
|
|
279
|
+
200: "#614000",
|
|
280
|
+
300: "#986600",
|
|
281
|
+
400: "#cc8b00",
|
|
282
|
+
500: "#f2ae00",
|
|
283
|
+
600: "#fcba32",
|
|
284
|
+
700: "#fbcd6d",
|
|
285
|
+
800: "#f9dfa0",
|
|
286
|
+
900: "#fcefd0",
|
|
287
|
+
};
|
|
288
|
+
export const darkLightGreen = {
|
|
289
|
+
50: "#23301b",
|
|
290
|
+
100: "#2b3f1c",
|
|
291
|
+
200: "#36511c",
|
|
292
|
+
300: "#456a03",
|
|
293
|
+
400: "#5a8300",
|
|
294
|
+
500: "#769f00",
|
|
295
|
+
600: "#8fb832",
|
|
296
|
+
700: "#abcb67",
|
|
297
|
+
800: "#c7dd9b",
|
|
298
|
+
900: "#e1eecd",
|
|
299
|
+
};
|
|
300
|
+
export const darkGreen = {
|
|
301
|
+
50: "#1b3122",
|
|
302
|
+
100: "#1a4129",
|
|
303
|
+
200: "#1a5531",
|
|
304
|
+
300: "#1a6e3f",
|
|
305
|
+
400: "#118b4d",
|
|
306
|
+
500: "#26a95e",
|
|
307
|
+
600: "#4fc17c",
|
|
308
|
+
700: "#7ed39b",
|
|
309
|
+
800: "#abe2bc",
|
|
310
|
+
900: "#d4f0dd",
|
|
311
|
+
};
|
|
312
|
+
export const darkCyan = {
|
|
313
|
+
50: "#0e3231",
|
|
314
|
+
100: "#004141",
|
|
315
|
+
200: "#005353",
|
|
316
|
+
300: "#006b6b",
|
|
317
|
+
400: "#008585",
|
|
318
|
+
500: "#00a3a3",
|
|
319
|
+
600: "#3abcbe",
|
|
320
|
+
700: "#72cfd0",
|
|
321
|
+
800: "#a5e0df",
|
|
322
|
+
900: "#d2efee",
|
|
323
|
+
};
|
|
324
|
+
export const darkLightBlue = {
|
|
325
|
+
50: "#182e3e",
|
|
326
|
+
100: "#163b55",
|
|
327
|
+
200: "#104c71",
|
|
328
|
+
300: "#086392",
|
|
329
|
+
400: "#007db5",
|
|
330
|
+
500: "#009ad7",
|
|
331
|
+
600: "#34b4f0",
|
|
332
|
+
700: "#6cc9f9",
|
|
333
|
+
800: "#a0dcfc",
|
|
334
|
+
900: "#d0edfd",
|
|
335
|
+
};
|
|
336
|
+
export const darkBlue = {
|
|
337
|
+
50: "#1f2c3f",
|
|
338
|
+
100: "#233858",
|
|
339
|
+
200: "#294875",
|
|
340
|
+
300: "#305b9b",
|
|
341
|
+
400: "#3270cb",
|
|
342
|
+
500: "#3388ff",
|
|
343
|
+
600: "#63a6ff",
|
|
344
|
+
700: "#8cbfff",
|
|
345
|
+
800: "#b0d6ff",
|
|
346
|
+
900: "#d6ebff",
|
|
347
|
+
};
|
|
348
|
+
export const darkPurple = {
|
|
349
|
+
50: "#2a283e",
|
|
350
|
+
100: "#373256",
|
|
351
|
+
200: "#463f73",
|
|
352
|
+
300: "#594e97",
|
|
353
|
+
400: "#6e5dc4",
|
|
354
|
+
500: "#886bfa",
|
|
355
|
+
600: "#a08fff",
|
|
356
|
+
700: "#b6aeff",
|
|
357
|
+
800: "#cecaff",
|
|
358
|
+
900: "#e6e5ff",
|
|
359
|
+
};
|
|
360
|
+
export const darkBrown = {
|
|
361
|
+
50: "#342921",
|
|
362
|
+
100: "#443429",
|
|
363
|
+
200: "#594231",
|
|
364
|
+
300: "#73533b",
|
|
365
|
+
400: "#906646",
|
|
366
|
+
500: "#ad7d56",
|
|
367
|
+
600: "#c59872",
|
|
368
|
+
700: "#d6b392",
|
|
369
|
+
800: "#e6ccb7",
|
|
370
|
+
900: "#f2e5da",
|
|
371
|
+
};
|
|
372
|
+
export const darkCoolGray = {
|
|
373
|
+
50: "#161b20",
|
|
374
|
+
100: "#22272c",
|
|
375
|
+
200: "#31363b",
|
|
376
|
+
300: "#43484e",
|
|
377
|
+
400: "#5c6167",
|
|
378
|
+
500: "#797e83",
|
|
379
|
+
600: "#9b9fa3",
|
|
380
|
+
700: "#bec1c5",
|
|
381
|
+
800: "#dcdee0",
|
|
382
|
+
900: "#f4f5f6",
|
|
383
|
+
};
|
|
384
|
+
export const darkNeutralGray = {
|
|
385
|
+
50: "#1b1b1b",
|
|
386
|
+
100: "#262626",
|
|
387
|
+
200: "#353535",
|
|
388
|
+
300: "#484848",
|
|
389
|
+
400: "#606060",
|
|
390
|
+
500: "#7d7d7d",
|
|
391
|
+
600: "#9e9e9e",
|
|
392
|
+
700: "#c1c1c1",
|
|
393
|
+
800: "#dedede",
|
|
394
|
+
900: "#f5f5f5",
|
|
395
|
+
};
|
|
396
|
+
export const families = [
|
|
397
|
+
"pink",
|
|
398
|
+
"red",
|
|
399
|
+
"orange",
|
|
400
|
+
"yellow",
|
|
401
|
+
"light-green",
|
|
402
|
+
"green",
|
|
403
|
+
"cyan",
|
|
404
|
+
"light-blue",
|
|
405
|
+
"blue",
|
|
406
|
+
"purple",
|
|
407
|
+
"brown",
|
|
408
|
+
"cool-gray",
|
|
409
|
+
"neutral-gray",
|
|
410
|
+
];
|
|
411
|
+
export const colors = {
|
|
412
|
+
pink,
|
|
413
|
+
red,
|
|
414
|
+
orange,
|
|
415
|
+
yellow,
|
|
416
|
+
"light-green": lightGreen,
|
|
417
|
+
green,
|
|
418
|
+
cyan,
|
|
419
|
+
"light-blue": lightBlue,
|
|
420
|
+
blue,
|
|
421
|
+
purple,
|
|
422
|
+
brown,
|
|
423
|
+
"cool-gray": coolGray,
|
|
424
|
+
"neutral-gray": neutralGray,
|
|
425
|
+
"white-opacity": whiteOpacity,
|
|
426
|
+
"black-opacity": blackOpacity,
|
|
427
|
+
};
|
|
428
|
+
export const darkColors = {
|
|
429
|
+
pink: darkPink,
|
|
430
|
+
red: darkRed,
|
|
431
|
+
orange: darkOrange,
|
|
432
|
+
yellow: darkYellow,
|
|
433
|
+
"light-green": darkLightGreen,
|
|
434
|
+
green: darkGreen,
|
|
435
|
+
cyan: darkCyan,
|
|
436
|
+
"light-blue": darkLightBlue,
|
|
437
|
+
blue: darkBlue,
|
|
438
|
+
purple: darkPurple,
|
|
439
|
+
brown: darkBrown,
|
|
440
|
+
"cool-gray": darkCoolGray,
|
|
441
|
+
"neutral-gray": darkNeutralGray,
|
|
442
|
+
};
|
|
443
|
+
/** Primitive hue used when mapping. Gamut fitting may lower chroma and must not change this hue. */
|
|
444
|
+
export const sourceHue = {
|
|
445
|
+
"pink": {
|
|
446
|
+
"50": 355,
|
|
447
|
+
"100": 355.77,
|
|
448
|
+
"200": 356.45,
|
|
449
|
+
"300": 356.06,
|
|
450
|
+
"400": 355.89,
|
|
451
|
+
"500": 356.2,
|
|
452
|
+
"600": 356.13,
|
|
453
|
+
"700": 355.72,
|
|
454
|
+
"800": 355.9,
|
|
455
|
+
"900": 356.13
|
|
456
|
+
},
|
|
457
|
+
"red": {
|
|
458
|
+
"50": 25.87,
|
|
459
|
+
"100": 27.37,
|
|
460
|
+
"200": 27.41,
|
|
461
|
+
"300": 26.37,
|
|
462
|
+
"400": 26.45,
|
|
463
|
+
"500": 26.7,
|
|
464
|
+
"600": 26.8,
|
|
465
|
+
"700": 26.36,
|
|
466
|
+
"800": 26.95,
|
|
467
|
+
"900": 26.78
|
|
468
|
+
},
|
|
469
|
+
"orange": {
|
|
470
|
+
"50": 58.79,
|
|
471
|
+
"100": 59.67,
|
|
472
|
+
"200": 60.28,
|
|
473
|
+
"300": 53,
|
|
474
|
+
"400": 47,
|
|
475
|
+
"500": 44,
|
|
476
|
+
"600": 43,
|
|
477
|
+
"700": 42,
|
|
478
|
+
"800": 42,
|
|
479
|
+
"900": 42
|
|
480
|
+
},
|
|
481
|
+
"yellow": {
|
|
482
|
+
"50": 88.77,
|
|
483
|
+
"100": 88.62,
|
|
484
|
+
"200": 88.23,
|
|
485
|
+
"300": 85.99,
|
|
486
|
+
"400": 84.19,
|
|
487
|
+
"500": 80.39,
|
|
488
|
+
"600": 77.97,
|
|
489
|
+
"700": 75.85,
|
|
490
|
+
"800": 74.95,
|
|
491
|
+
"900": 74.6
|
|
492
|
+
},
|
|
493
|
+
"light-green": {
|
|
494
|
+
"50": 125.19,
|
|
495
|
+
"100": 124.14,
|
|
496
|
+
"200": 123.83,
|
|
497
|
+
"300": 123.96,
|
|
498
|
+
"400": 125.13,
|
|
499
|
+
"500": 125.92,
|
|
500
|
+
"600": 128.32999999999998,
|
|
501
|
+
"700": 129.74,
|
|
502
|
+
"800": 131.95,
|
|
503
|
+
"900": 132.85
|
|
504
|
+
},
|
|
505
|
+
"green": {
|
|
506
|
+
"50": 151.77,
|
|
507
|
+
"100": 155,
|
|
508
|
+
"200": 154.23,
|
|
509
|
+
"300": 153.93,
|
|
510
|
+
"400": 153.92,
|
|
511
|
+
"500": 152.61,
|
|
512
|
+
"600": 153.64,
|
|
513
|
+
"700": 153.64,
|
|
514
|
+
"800": 153.58,
|
|
515
|
+
"900": 153.62
|
|
516
|
+
},
|
|
517
|
+
"cyan": {
|
|
518
|
+
"50": 196.79,
|
|
519
|
+
"100": 194.8,
|
|
520
|
+
"200": 195.61,
|
|
521
|
+
"300": 196.44,
|
|
522
|
+
"400": 196.25,
|
|
523
|
+
"500": 194.77,
|
|
524
|
+
"600": 194.77,
|
|
525
|
+
"700": 194.77,
|
|
526
|
+
"800": 194.77,
|
|
527
|
+
"900": 194.77
|
|
528
|
+
},
|
|
529
|
+
"light-blue": {
|
|
530
|
+
"50": 227.28,
|
|
531
|
+
"100": 231.71,
|
|
532
|
+
"200": 232.11,
|
|
533
|
+
"300": 233.04,
|
|
534
|
+
"400": 233.87,
|
|
535
|
+
"500": 235.61,
|
|
536
|
+
"600": 238.26,
|
|
537
|
+
"700": 239.77,
|
|
538
|
+
"800": 241.15,
|
|
539
|
+
"900": 242.06
|
|
540
|
+
},
|
|
541
|
+
"blue": {
|
|
542
|
+
"50": 242.96,
|
|
543
|
+
"100": 248.22,
|
|
544
|
+
"200": 250.59,
|
|
545
|
+
"300": 254.2,
|
|
546
|
+
"400": 256.06,
|
|
547
|
+
"500": 257.96,
|
|
548
|
+
"600": 258.14,
|
|
549
|
+
"700": 258.09,
|
|
550
|
+
"800": 258,
|
|
551
|
+
"900": 257.89
|
|
552
|
+
},
|
|
553
|
+
"purple": {
|
|
554
|
+
"50": 280.48,
|
|
555
|
+
"100": 288.02,
|
|
556
|
+
"200": 288.53,
|
|
557
|
+
"300": 288.61,
|
|
558
|
+
"400": 288.46,
|
|
559
|
+
"500": 288.47,
|
|
560
|
+
"600": 287.84,
|
|
561
|
+
"700": 287.9,
|
|
562
|
+
"800": 288.28,
|
|
563
|
+
"900": 288.21
|
|
564
|
+
},
|
|
565
|
+
"brown": {
|
|
566
|
+
"50": 67.68,
|
|
567
|
+
"100": 61.99,
|
|
568
|
+
"200": 61.77,
|
|
569
|
+
"300": 63.95,
|
|
570
|
+
"400": 62.23,
|
|
571
|
+
"500": 60.07,
|
|
572
|
+
"600": 58.93,
|
|
573
|
+
"700": 57.71,
|
|
574
|
+
"800": 56.34,
|
|
575
|
+
"900": 56.1
|
|
576
|
+
},
|
|
577
|
+
"cool-gray": {
|
|
578
|
+
"50": 246.56,
|
|
579
|
+
"100": 246.56,
|
|
580
|
+
"200": 246.56,
|
|
581
|
+
"300": 246.56,
|
|
582
|
+
"400": 246.56,
|
|
583
|
+
"500": 246.56,
|
|
584
|
+
"600": 246.56,
|
|
585
|
+
"700": 246.56,
|
|
586
|
+
"800": 246.56,
|
|
587
|
+
"900": 246.56
|
|
588
|
+
}
|
|
589
|
+
};
|
|
590
|
+
/** Primitive chroma before gamut fitting. Stored colors stay at or below this chroma. */
|
|
591
|
+
export const sourceChroma = {
|
|
592
|
+
"pink": {
|
|
593
|
+
"50": 0.017,
|
|
594
|
+
"100": 0.036,
|
|
595
|
+
"200": 0.07,
|
|
596
|
+
"300": 0.1354,
|
|
597
|
+
"400": 0.2029,
|
|
598
|
+
"500": 0.2201,
|
|
599
|
+
"600": 0.2171,
|
|
600
|
+
"700": 0.2065,
|
|
601
|
+
"800": 0.1824,
|
|
602
|
+
"900": 0.1596
|
|
603
|
+
},
|
|
604
|
+
"red": {
|
|
605
|
+
"50": 0.017,
|
|
606
|
+
"100": 0.036,
|
|
607
|
+
"200": 0.07,
|
|
608
|
+
"300": 0.1332,
|
|
609
|
+
"400": 0.1992,
|
|
610
|
+
"500": 0.2197,
|
|
611
|
+
"600": 0.2182,
|
|
612
|
+
"700": 0.2071,
|
|
613
|
+
"800": 0.1841,
|
|
614
|
+
"900": 0.1664
|
|
615
|
+
},
|
|
616
|
+
"orange": {
|
|
617
|
+
"50": 0.017,
|
|
618
|
+
"100": 0.036,
|
|
619
|
+
"200": 0.07,
|
|
620
|
+
"300": 0.1163,
|
|
621
|
+
"400": 0.25,
|
|
622
|
+
"500": 0.25,
|
|
623
|
+
"600": 0.25,
|
|
624
|
+
"700": 0.25,
|
|
625
|
+
"800": 0.25,
|
|
626
|
+
"900": 0.25
|
|
627
|
+
},
|
|
628
|
+
"yellow": {
|
|
629
|
+
"50": 0.0345,
|
|
630
|
+
"100": 0.064,
|
|
631
|
+
"200": 0.0946,
|
|
632
|
+
"300": 0.1231,
|
|
633
|
+
"400": 0.1497,
|
|
634
|
+
"500": 0.1705,
|
|
635
|
+
"600": 0.165,
|
|
636
|
+
"700": 0.16,
|
|
637
|
+
"800": 0.155,
|
|
638
|
+
"900": 0.15
|
|
639
|
+
},
|
|
640
|
+
"light-green": {
|
|
641
|
+
"50": 0.017,
|
|
642
|
+
"100": 0.036,
|
|
643
|
+
"200": 0.07,
|
|
644
|
+
"300": 0.145,
|
|
645
|
+
"400": 0.1802,
|
|
646
|
+
"500": 0.1828,
|
|
647
|
+
"600": 0.1648,
|
|
648
|
+
"700": 0.1441,
|
|
649
|
+
"800": 0.1336,
|
|
650
|
+
"900": 0.123
|
|
651
|
+
},
|
|
652
|
+
"green": {
|
|
653
|
+
"50": 0.017,
|
|
654
|
+
"100": 0.036,
|
|
655
|
+
"200": 0.07,
|
|
656
|
+
"300": 0.1215,
|
|
657
|
+
"400": 0.1452,
|
|
658
|
+
"500": 0.1558,
|
|
659
|
+
"600": 0.15,
|
|
660
|
+
"700": 0.1359,
|
|
661
|
+
"800": 0.1232,
|
|
662
|
+
"900": 0.1122
|
|
663
|
+
},
|
|
664
|
+
"cyan": {
|
|
665
|
+
"50": 0.017,
|
|
666
|
+
"100": 0.036,
|
|
667
|
+
"200": 0.07,
|
|
668
|
+
"300": 0.1197,
|
|
669
|
+
"400": 0.12,
|
|
670
|
+
"500": 0.1229,
|
|
671
|
+
"600": 0.1086,
|
|
672
|
+
"700": 0.0938,
|
|
673
|
+
"800": 0.0853,
|
|
674
|
+
"900": 0.0767
|
|
675
|
+
},
|
|
676
|
+
"light-blue": {
|
|
677
|
+
"50": 0.017,
|
|
678
|
+
"100": 0.036,
|
|
679
|
+
"200": 0.07,
|
|
680
|
+
"300": 0.1206,
|
|
681
|
+
"400": 0.1509,
|
|
682
|
+
"500": 0.1499,
|
|
683
|
+
"600": 0.1396,
|
|
684
|
+
"700": 0.1267,
|
|
685
|
+
"800": 0.1179,
|
|
686
|
+
"900": 0.1081
|
|
687
|
+
},
|
|
688
|
+
"blue": {
|
|
689
|
+
"50": 0.017,
|
|
690
|
+
"100": 0.036,
|
|
691
|
+
"200": 0.07,
|
|
692
|
+
"300": 0.1154,
|
|
693
|
+
"400": 0.1612,
|
|
694
|
+
"500": 0.201,
|
|
695
|
+
"600": 0.1944,
|
|
696
|
+
"700": 0.1861,
|
|
697
|
+
"800": 0.1716,
|
|
698
|
+
"900": 0.1548
|
|
699
|
+
},
|
|
700
|
+
"purple": {
|
|
701
|
+
"50": 0.017,
|
|
702
|
+
"100": 0.036,
|
|
703
|
+
"200": 0.07,
|
|
704
|
+
"300": 0.1204,
|
|
705
|
+
"400": 0.1735,
|
|
706
|
+
"500": 0.2039,
|
|
707
|
+
"600": 0.2031,
|
|
708
|
+
"700": 0.1794,
|
|
709
|
+
"800": 0.1509,
|
|
710
|
+
"900": 0.1223
|
|
711
|
+
},
|
|
712
|
+
"brown": {
|
|
713
|
+
"50": 0.0102,
|
|
714
|
+
"100": 0.0225,
|
|
715
|
+
"200": 0.0391,
|
|
716
|
+
"300": 0.0599,
|
|
717
|
+
"400": 0.075,
|
|
718
|
+
"500": 0.0803,
|
|
719
|
+
"600": 0.0786,
|
|
720
|
+
"700": 0.0725,
|
|
721
|
+
"800": 0.0648,
|
|
722
|
+
"900": 0.0564
|
|
723
|
+
},
|
|
724
|
+
"cool-gray": {
|
|
725
|
+
"50": 0.003,
|
|
726
|
+
"100": 0.0056,
|
|
727
|
+
"200": 0.0088,
|
|
728
|
+
"300": 0.0119,
|
|
729
|
+
"400": 0.0138,
|
|
730
|
+
"500": 0.015,
|
|
731
|
+
"600": 0.0132,
|
|
732
|
+
"700": 0.0117,
|
|
733
|
+
"800": 0.0093,
|
|
734
|
+
"900": 0.007
|
|
735
|
+
},
|
|
736
|
+
"neutral-gray": {
|
|
737
|
+
"50": 0,
|
|
738
|
+
"100": 0,
|
|
739
|
+
"200": 0,
|
|
740
|
+
"300": 0,
|
|
741
|
+
"400": 0,
|
|
742
|
+
"500": 0,
|
|
743
|
+
"600": 0,
|
|
744
|
+
"700": 0,
|
|
745
|
+
"800": 0,
|
|
746
|
+
"900": 0
|
|
747
|
+
}
|
|
748
|
+
};
|
|
749
|
+
/** Dark-scale hue before gamut fitting. Each step takes the hue of the light step nearest in lightness for yellow, orange, light-green, cyan, light-blue, and blue. */
|
|
750
|
+
export const darkSourceHue = {
|
|
751
|
+
"pink": {
|
|
752
|
+
"50": 355.74,
|
|
753
|
+
"100": 355.74,
|
|
754
|
+
"200": 356,
|
|
755
|
+
"300": 355.64,
|
|
756
|
+
"400": 356.14,
|
|
757
|
+
"500": 356.2,
|
|
758
|
+
"600": 356,
|
|
759
|
+
"700": 355.97,
|
|
760
|
+
"800": 356.15,
|
|
761
|
+
"900": 355.66
|
|
762
|
+
},
|
|
763
|
+
"red": {
|
|
764
|
+
"50": 26.81,
|
|
765
|
+
"100": 26.81,
|
|
766
|
+
"200": 27.04,
|
|
767
|
+
"300": 26.25,
|
|
768
|
+
"400": 26.77,
|
|
769
|
+
"500": 26.67,
|
|
770
|
+
"600": 26.3,
|
|
771
|
+
"700": 26.23,
|
|
772
|
+
"800": 27.28,
|
|
773
|
+
"900": 28.34
|
|
774
|
+
},
|
|
775
|
+
"orange": {
|
|
776
|
+
"50": 41.93,
|
|
777
|
+
"100": 41.93,
|
|
778
|
+
"200": 42.27,
|
|
779
|
+
"300": 41.95,
|
|
780
|
+
"400": 42.84,
|
|
781
|
+
"500": 43.89,
|
|
782
|
+
"600": 46.93,
|
|
783
|
+
"700": 53.37,
|
|
784
|
+
"800": 60.34,
|
|
785
|
+
"900": 59.2
|
|
786
|
+
},
|
|
787
|
+
"yellow": {
|
|
788
|
+
"50": 75.77,
|
|
789
|
+
"100": 75.77,
|
|
790
|
+
"200": 75.77,
|
|
791
|
+
"300": 75.77,
|
|
792
|
+
"400": 75.77,
|
|
793
|
+
"500": 80.39,
|
|
794
|
+
"600": 80.39,
|
|
795
|
+
"700": 84.19,
|
|
796
|
+
"800": 88.23,
|
|
797
|
+
"900": 88.62
|
|
798
|
+
},
|
|
799
|
+
"light-green": {
|
|
800
|
+
"50": 132.92,
|
|
801
|
+
"100": 132.92,
|
|
802
|
+
"200": 131.81,
|
|
803
|
+
"300": 129.65,
|
|
804
|
+
"400": 128.2,
|
|
805
|
+
"500": 126.07,
|
|
806
|
+
"600": 125.11,
|
|
807
|
+
"700": 124.09,
|
|
808
|
+
"800": 123.66,
|
|
809
|
+
"900": 124.27
|
|
810
|
+
},
|
|
811
|
+
"green": {
|
|
812
|
+
"50": 153.96,
|
|
813
|
+
"100": 153.96,
|
|
814
|
+
"200": 153.52,
|
|
815
|
+
"300": 153.58,
|
|
816
|
+
"400": 153.67,
|
|
817
|
+
"500": 152.55,
|
|
818
|
+
"600": 153.86,
|
|
819
|
+
"700": 153.99,
|
|
820
|
+
"800": 154.46,
|
|
821
|
+
"900": 155.4
|
|
822
|
+
},
|
|
823
|
+
"cyan": {
|
|
824
|
+
"50": 194.77,
|
|
825
|
+
"100": 194.77,
|
|
826
|
+
"200": 194.77,
|
|
827
|
+
"300": 194.77,
|
|
828
|
+
"400": 194.77,
|
|
829
|
+
"500": 194.77,
|
|
830
|
+
"600": 196.22,
|
|
831
|
+
"700": 196.38,
|
|
832
|
+
"800": 195.93,
|
|
833
|
+
"900": 194.42
|
|
834
|
+
},
|
|
835
|
+
"light-blue": {
|
|
836
|
+
"50": 241.9,
|
|
837
|
+
"100": 241.9,
|
|
838
|
+
"200": 241.45,
|
|
839
|
+
"300": 239.71,
|
|
840
|
+
"400": 238.45,
|
|
841
|
+
"500": 235.72,
|
|
842
|
+
"600": 234.09,
|
|
843
|
+
"700": 233.04,
|
|
844
|
+
"800": 231.56,
|
|
845
|
+
"900": 231.11
|
|
846
|
+
},
|
|
847
|
+
"blue": {
|
|
848
|
+
"50": 257.73,
|
|
849
|
+
"100": 257.73,
|
|
850
|
+
"200": 257.9,
|
|
851
|
+
"300": 258.12,
|
|
852
|
+
"400": 258.26,
|
|
853
|
+
"500": 257.96,
|
|
854
|
+
"600": 256,
|
|
855
|
+
"700": 254.45,
|
|
856
|
+
"800": 250.59,
|
|
857
|
+
"900": 248.22
|
|
858
|
+
},
|
|
859
|
+
"purple": {
|
|
860
|
+
"50": 288.05,
|
|
861
|
+
"100": 288.05,
|
|
862
|
+
"200": 287.87,
|
|
863
|
+
"300": 287.78,
|
|
864
|
+
"400": 287.76,
|
|
865
|
+
"500": 288.38,
|
|
866
|
+
"600": 288.52,
|
|
867
|
+
"700": 288.24,
|
|
868
|
+
"800": 288.42,
|
|
869
|
+
"900": 289.07
|
|
870
|
+
},
|
|
871
|
+
"brown": {
|
|
872
|
+
"50": 57.37,
|
|
873
|
+
"100": 57.37,
|
|
874
|
+
"200": 56.26,
|
|
875
|
+
"300": 58.5,
|
|
876
|
+
"400": 58.84,
|
|
877
|
+
"500": 59.63,
|
|
878
|
+
"600": 61.98,
|
|
879
|
+
"700": 64.22,
|
|
880
|
+
"800": 60.93,
|
|
881
|
+
"900": 63.2
|
|
882
|
+
}
|
|
883
|
+
};
|
|
884
|
+
/** Dark-scale chroma before gamut fitting: a share of the family's light peak, highest at 500. */
|
|
885
|
+
export const darkSourceChroma = {
|
|
886
|
+
"pink": {
|
|
887
|
+
"50": 0.04,
|
|
888
|
+
"100": 0.062,
|
|
889
|
+
"200": 0.085,
|
|
890
|
+
"300": 0.154,
|
|
891
|
+
"400": 0.1937,
|
|
892
|
+
"500": 0.2201,
|
|
893
|
+
"600": 0.2047,
|
|
894
|
+
"700": 0.1628,
|
|
895
|
+
"800": 0.11,
|
|
896
|
+
"900": 0.055
|
|
897
|
+
},
|
|
898
|
+
"red": {
|
|
899
|
+
"50": 0.04,
|
|
900
|
+
"100": 0.062,
|
|
901
|
+
"200": 0.085,
|
|
902
|
+
"300": 0.1537,
|
|
903
|
+
"400": 0.1932,
|
|
904
|
+
"500": 0.2196,
|
|
905
|
+
"600": 0.2042,
|
|
906
|
+
"700": 0.1625,
|
|
907
|
+
"800": 0.1098,
|
|
908
|
+
"900": 0.0549
|
|
909
|
+
},
|
|
910
|
+
"orange": {
|
|
911
|
+
"50": 0.04,
|
|
912
|
+
"100": 0.062,
|
|
913
|
+
"200": 0.085,
|
|
914
|
+
"300": 0.1342,
|
|
915
|
+
"400": 0.1687,
|
|
916
|
+
"500": 0.1917,
|
|
917
|
+
"600": 0.1783,
|
|
918
|
+
"700": 0.1419,
|
|
919
|
+
"800": 0.0959,
|
|
920
|
+
"900": 0.0479
|
|
921
|
+
},
|
|
922
|
+
"yellow": {
|
|
923
|
+
"50": 0.0375,
|
|
924
|
+
"100": 0.0614,
|
|
925
|
+
"200": 0.0887,
|
|
926
|
+
"300": 0.1194,
|
|
927
|
+
"400": 0.1501,
|
|
928
|
+
"500": 0.1705,
|
|
929
|
+
"600": 0.1586,
|
|
930
|
+
"700": 0.1262,
|
|
931
|
+
"800": 0.0853,
|
|
932
|
+
"900": 0.0426
|
|
933
|
+
},
|
|
934
|
+
"light-green": {
|
|
935
|
+
"50": 0.04,
|
|
936
|
+
"100": 0.062,
|
|
937
|
+
"200": 0.085,
|
|
938
|
+
"300": 0.1263,
|
|
939
|
+
"400": 0.1588,
|
|
940
|
+
"500": 0.1804,
|
|
941
|
+
"600": 0.1678,
|
|
942
|
+
"700": 0.1335,
|
|
943
|
+
"800": 0.0902,
|
|
944
|
+
"900": 0.0451
|
|
945
|
+
},
|
|
946
|
+
"green": {
|
|
947
|
+
"50": 0.04,
|
|
948
|
+
"100": 0.062,
|
|
949
|
+
"200": 0.085,
|
|
950
|
+
"300": 0.1092,
|
|
951
|
+
"400": 0.1373,
|
|
952
|
+
"500": 0.156,
|
|
953
|
+
"600": 0.1451,
|
|
954
|
+
"700": 0.1155,
|
|
955
|
+
"800": 0.078,
|
|
956
|
+
"900": 0.039
|
|
957
|
+
},
|
|
958
|
+
"cyan": {
|
|
959
|
+
"50": 0.04,
|
|
960
|
+
"100": 0.062,
|
|
961
|
+
"200": 0.085,
|
|
962
|
+
"300": 0.0839,
|
|
963
|
+
"400": 0.1055,
|
|
964
|
+
"500": 0.1199,
|
|
965
|
+
"600": 0.1115,
|
|
966
|
+
"700": 0.0887,
|
|
967
|
+
"800": 0.0599,
|
|
968
|
+
"900": 0.03
|
|
969
|
+
},
|
|
970
|
+
"light-blue": {
|
|
971
|
+
"50": 0.04,
|
|
972
|
+
"100": 0.062,
|
|
973
|
+
"200": 0.085,
|
|
974
|
+
"300": 0.1059,
|
|
975
|
+
"400": 0.1331,
|
|
976
|
+
"500": 0.1513,
|
|
977
|
+
"600": 0.1407,
|
|
978
|
+
"700": 0.112,
|
|
979
|
+
"800": 0.0756,
|
|
980
|
+
"900": 0.0378
|
|
981
|
+
},
|
|
982
|
+
"blue": {
|
|
983
|
+
"50": 0.04,
|
|
984
|
+
"100": 0.062,
|
|
985
|
+
"200": 0.085,
|
|
986
|
+
"300": 0.115,
|
|
987
|
+
"400": 0.155,
|
|
988
|
+
"500": 0.201,
|
|
989
|
+
"600": 0.187,
|
|
990
|
+
"700": 0.1488,
|
|
991
|
+
"800": 0.1005,
|
|
992
|
+
"900": 0.0503
|
|
993
|
+
},
|
|
994
|
+
"purple": {
|
|
995
|
+
"50": 0.04,
|
|
996
|
+
"100": 0.062,
|
|
997
|
+
"200": 0.085,
|
|
998
|
+
"300": 0.115,
|
|
999
|
+
"400": 0.155,
|
|
1000
|
+
"500": 0.2034,
|
|
1001
|
+
"600": 0.1891,
|
|
1002
|
+
"700": 0.1505,
|
|
1003
|
+
"800": 0.1017,
|
|
1004
|
+
"900": 0.0508
|
|
1005
|
+
},
|
|
1006
|
+
"brown": {
|
|
1007
|
+
"50": 0.022,
|
|
1008
|
+
"100": 0.0291,
|
|
1009
|
+
"200": 0.042,
|
|
1010
|
+
"300": 0.0565,
|
|
1011
|
+
"400": 0.071,
|
|
1012
|
+
"500": 0.0807,
|
|
1013
|
+
"600": 0.0751,
|
|
1014
|
+
"700": 0.0597,
|
|
1015
|
+
"800": 0.0404,
|
|
1016
|
+
"900": 0.0202
|
|
1017
|
+
}
|
|
1018
|
+
};
|
|
1019
|
+
//# sourceMappingURL=palette.js.map
|