1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = generate;
var _tinycolor = require('tinycolor2');
var _tinycolor2 = _interopRequireDefault(_tinycolor);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var hueStep = 2; // 色相阶梯
var saturationStep = 16; // 饱和度阶梯，浅色部分
var saturationStep2 = 5; // 饱和度阶梯，深色部分
var brightnessStep1 = 5; // 亮度阶梯，浅色部分
var brightnessStep2 = 15; // 亮度阶梯，深色部分
var lightColorCount = 5; // 浅色数量，主色上
var darkColorCount = 4; // 深色数量，主色下
function getHue(hsv, i, light) {
var hue = void 0;
// 根据色相不同，色相转向不同
if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
hue = light ? Math.round(hsv.h) - hueStep * i : Math.round(hsv.h) + hueStep * i;
} else {
hue = light ? Math.round(hsv.h) + hueStep * i : Math.round(hsv.h) - hueStep * i;
}
if (hue < 0) {
hue += 360;
} else if (hue >= 360) {
hue -= 360;
}
return hue;
}
function getSaturation(hsv, i, light) {
// grey color don't change saturation
if (hsv.h === 0 && hsv.s === 0) {
return hsv.s;
}
var saturation = void 0;
if (light) {
saturation = Math.round(hsv.s * 100) - saturationStep * i;
} else if (i === darkColorCount) {
saturation = Math.round(hsv.s * 100) + saturationStep;
} else {
saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
}
// 边界值修正
if (saturation > 100) {
saturation = 100;
}
// 第一格的 s 限制在 6-10 之间
if (light && i === lightColorCount && saturation > 10) {
saturation = 10;
}
if (saturation < 6) {
saturation = 6;
}
return saturation;
}
function getValue(hsv, i, light) {
if (light) {
return Math.round(hsv.v * 100) + brightnessStep1 * i;
}
return Math.round(hsv.v * 100) - brightnessStep2 * i;
}
function generate(color) {
var patterns = [];
var pColor = (0, _tinycolor2.default)(color);
for (var i = lightColorCount; i > 0; i -= 1) {
var hsv = pColor.toHsv();
var colorString = (0, _tinycolor2.default)({
h: getHue(hsv, i, true),
s: getSaturation(hsv, i, true),
v: getValue(hsv, i, true)
}).toHexString();
patterns.push(colorString);
}
patterns.push(pColor.toHexString());
for (var _i = 1; _i <= darkColorCount; _i += 1) {
var _hsv = pColor.toHsv();
var _colorString = (0, _tinycolor2.default)({
h: getHue(_hsv, _i),
s: getSaturation(_hsv, _i),
v: getValue(_hsv, _i)
}).toHexString();
patterns.push(_colorString);
}
return patterns;
}