提交 | 用户 | age
|
4baf90
|
1 |
/** |
V |
2 |
* 判断是否 十六进制颜色值. |
|
3 |
* 输入形式可为 #fff000 #f00 |
|
4 |
* |
|
5 |
* @param String color 十六进制颜色值 |
|
6 |
* @return Boolean |
|
7 |
*/ |
144ab5
|
8 |
export function isHexColor(color: string) { |
d6fdfd
|
9 |
const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/; |
4baf90
|
10 |
return reg.test(color); |
144ab5
|
11 |
} |
4baf90
|
12 |
|
V |
13 |
/** |
|
14 |
* RGB 颜色值转换为 十六进制颜色值. |
|
15 |
* r, g, 和 b 需要在 [0, 255] 范围内 |
|
16 |
* |
|
17 |
* @return String 类似#ff00ff |
ecfb70
|
18 |
* @param r |
V |
19 |
* @param g |
|
20 |
* @param b |
4baf90
|
21 |
*/ |
144ab5
|
22 |
export function rgbToHex(r: number, g: number, b: number) { |
4baf90
|
23 |
// tslint:disable-next-line:no-bitwise |
V |
24 |
const hex = ((r << 16) | (g << 8) | b).toString(16); |
|
25 |
return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex; |
144ab5
|
26 |
} |
4baf90
|
27 |
|
V |
28 |
/** |
|
29 |
* Transform a HEX color to its RGB representation |
|
30 |
* @param {string} hex The color to transform |
|
31 |
* @returns The RGB representation of the passed color |
|
32 |
*/ |
144ab5
|
33 |
export function hexToRGB(hex: string) { |
7692ff
|
34 |
let sHex = hex.toLowerCase(); |
V |
35 |
if (isHexColor(hex)) { |
|
36 |
if (sHex.length === 4) { |
|
37 |
let sColorNew = '#'; |
|
38 |
for (let i = 1; i < 4; i += 1) { |
|
39 |
sColorNew += sHex.slice(i, i + 1).concat(sHex.slice(i, i + 1)); |
|
40 |
} |
|
41 |
sHex = sColorNew; |
|
42 |
} |
581007
|
43 |
const sColorChange: number[] = []; |
7692ff
|
44 |
for (let i = 1; i < 7; i += 2) { |
V |
45 |
sColorChange.push(parseInt('0x' + sHex.slice(i, i + 2))); |
|
46 |
} |
|
47 |
return 'RGB(' + sColorChange.join(',') + ')'; |
|
48 |
} |
|
49 |
return sHex; |
144ab5
|
50 |
} |
7692ff
|
51 |
|
144ab5
|
52 |
export function colorIsDark(color: string) { |
7692ff
|
53 |
if (!isHexColor(color)) return; |
V |
54 |
const [r, g, b] = hexToRGB(color) |
|
55 |
.replace(/(?:\(|\)|rgb|RGB)*/g, '') |
|
56 |
.split(',') |
|
57 |
.map((item) => Number(item)); |
|
58 |
return r * 0.299 + g * 0.578 + b * 0.114 < 192; |
144ab5
|
59 |
} |
4baf90
|
60 |
|
V |
61 |
/** |
|
62 |
* Darkens a HEX color given the passed percentage |
|
63 |
* @param {string} color The color to process |
|
64 |
* @param {number} amount The amount to change the color by |
|
65 |
* @returns {string} The HEX representation of the processed color |
|
66 |
*/ |
144ab5
|
67 |
export function darken(color: string, amount: number) { |
4baf90
|
68 |
color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color; |
V |
69 |
amount = Math.trunc((255 * amount) / 100); |
|
70 |
return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight( |
|
71 |
color.substring(2, 4), |
56a966
|
72 |
amount, |
4baf90
|
73 |
)}${subtractLight(color.substring(4, 6), amount)}`; |
144ab5
|
74 |
} |
4baf90
|
75 |
|
V |
76 |
/** |
|
77 |
* Lightens a 6 char HEX color according to the passed percentage |
|
78 |
* @param {string} color The color to change |
|
79 |
* @param {number} amount The amount to change the color by |
|
80 |
* @returns {string} The processed color represented as HEX |
|
81 |
*/ |
144ab5
|
82 |
export function lighten(color: string, amount: number) { |
4baf90
|
83 |
color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color; |
V |
84 |
amount = Math.trunc((255 * amount) / 100); |
|
85 |
return `#${addLight(color.substring(0, 2), amount)}${addLight( |
|
86 |
color.substring(2, 4), |
56a966
|
87 |
amount, |
4baf90
|
88 |
)}${addLight(color.substring(4, 6), amount)}`; |
144ab5
|
89 |
} |
4baf90
|
90 |
|
V |
91 |
/* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */ |
|
92 |
/** |
|
93 |
* Sums the passed percentage to the R, G or B of a HEX color |
|
94 |
* @param {string} color The color to change |
|
95 |
* @param {number} amount The amount to change the color by |
|
96 |
* @returns {string} The processed part of the color |
|
97 |
*/ |
144ab5
|
98 |
function addLight(color: string, amount: number) { |
4baf90
|
99 |
const cc = parseInt(color, 16) + amount; |
V |
100 |
const c = cc > 255 ? 255 : cc; |
|
101 |
return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`; |
144ab5
|
102 |
} |
4baf90
|
103 |
|
V |
104 |
/** |
|
105 |
* Calculates luminance of an rgb color |
|
106 |
* @param {number} r red |
|
107 |
* @param {number} g green |
|
108 |
* @param {number} b blue |
|
109 |
*/ |
144ab5
|
110 |
function luminanace(r: number, g: number, b: number) { |
4baf90
|
111 |
const a = [r, g, b].map((v) => { |
V |
112 |
v /= 255; |
|
113 |
return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); |
|
114 |
}); |
|
115 |
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; |
144ab5
|
116 |
} |
4baf90
|
117 |
|
V |
118 |
/** |
|
119 |
* Calculates contrast between two rgb colors |
|
120 |
* @param {string} rgb1 rgb color 1 |
|
121 |
* @param {string} rgb2 rgb color 2 |
|
122 |
*/ |
144ab5
|
123 |
function contrast(rgb1: string[], rgb2: number[]) { |
V |
124 |
return ( |
|
125 |
(luminanace(~~rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) / |
|
126 |
(luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05) |
|
127 |
); |
|
128 |
} |
4baf90
|
129 |
|
V |
130 |
/** |
|
131 |
* Determines what the best text color is (black or white) based con the contrast with the background |
|
132 |
* @param hexColor - Last selected color by the user |
|
133 |
*/ |
144ab5
|
134 |
export function calculateBestTextColor(hexColor: string) { |
4baf90
|
135 |
const rgbColor = hexToRGB(hexColor.substring(1)); |
V |
136 |
const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0]); |
|
137 |
|
|
138 |
return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF'; |
144ab5
|
139 |
} |
4baf90
|
140 |
|
V |
141 |
/** |
|
142 |
* Subtracts the indicated percentage to the R, G or B of a HEX color |
|
143 |
* @param {string} color The color to change |
|
144 |
* @param {number} amount The amount to change the color by |
|
145 |
* @returns {string} The processed part of the color |
|
146 |
*/ |
144ab5
|
147 |
function subtractLight(color: string, amount: number) { |
4baf90
|
148 |
const cc = parseInt(color, 16) - amount; |
V |
149 |
const c = cc < 0 ? 0 : cc; |
|
150 |
return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`; |
144ab5
|
151 |
} |