|
|
@@ -0,0 +1,130 @@
|
|
|
+/**
|
|
|
+ * 判断是否 十六进制颜色值.
|
|
|
+ * 输入形式可为 #fff000 #f00
|
|
|
+ *
|
|
|
+ * @param String color 十六进制颜色值
|
|
|
+ * @return Boolean
|
|
|
+ */
|
|
|
+export const isHexColor = function (color: string) {
|
|
|
+ const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
|
|
+ return reg.test(color);
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * RGB 颜色值转换为 十六进制颜色值.
|
|
|
+ * r, g, 和 b 需要在 [0, 255] 范围内
|
|
|
+ *
|
|
|
+ * @param Number r 红色色值
|
|
|
+ * @param Number g 绿色色值
|
|
|
+ * @param Number b 蓝色色值
|
|
|
+ * @return String 类似#ff00ff
|
|
|
+ */
|
|
|
+export const rgbToHex = function (r: number, g: number, b: number) {
|
|
|
+ // tslint:disable-next-line:no-bitwise
|
|
|
+ const hex = ((r << 16) | (g << 8) | b).toString(16);
|
|
|
+ return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex;
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * Transform a HEX color to its RGB representation
|
|
|
+ * @param {string} hex The color to transform
|
|
|
+ * @returns The RGB representation of the passed color
|
|
|
+ */
|
|
|
+export const hexToRGB = function (hex: string) {
|
|
|
+ return (
|
|
|
+ parseInt(hex.substring(0, 2), 16) +
|
|
|
+ ',' +
|
|
|
+ parseInt(hex.substring(2, 4), 16) +
|
|
|
+ ',' +
|
|
|
+ parseInt(hex.substring(4, 6), 16)
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * Darkens a HEX color given the passed percentage
|
|
|
+ * @param {string} color The color to process
|
|
|
+ * @param {number} amount The amount to change the color by
|
|
|
+ * @returns {string} The HEX representation of the processed color
|
|
|
+ */
|
|
|
+export const darken = (color: string, amount: number) => {
|
|
|
+ color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
|
|
|
+ amount = Math.trunc((255 * amount) / 100);
|
|
|
+ return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
|
|
|
+ color.substring(2, 4),
|
|
|
+ amount
|
|
|
+ )}${subtractLight(color.substring(4, 6), amount)}`;
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * Lightens a 6 char HEX color according to the passed percentage
|
|
|
+ * @param {string} color The color to change
|
|
|
+ * @param {number} amount The amount to change the color by
|
|
|
+ * @returns {string} The processed color represented as HEX
|
|
|
+ */
|
|
|
+export const lighten = (color: string, amount: number) => {
|
|
|
+ color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
|
|
|
+ amount = Math.trunc((255 * amount) / 100);
|
|
|
+ return `#${addLight(color.substring(0, 2), amount)}${addLight(
|
|
|
+ color.substring(2, 4),
|
|
|
+ amount
|
|
|
+ )}${addLight(color.substring(4, 6), amount)}`;
|
|
|
+};
|
|
|
+
|
|
|
+/* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */
|
|
|
+/**
|
|
|
+ * Sums the passed percentage to the R, G or B of a HEX color
|
|
|
+ * @param {string} color The color to change
|
|
|
+ * @param {number} amount The amount to change the color by
|
|
|
+ * @returns {string} The processed part of the color
|
|
|
+ */
|
|
|
+const addLight = (color: string, amount: number) => {
|
|
|
+ const cc = parseInt(color, 16) + amount;
|
|
|
+ const c = cc > 255 ? 255 : cc;
|
|
|
+ return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * Calculates luminance of an rgb color
|
|
|
+ * @param {number} r red
|
|
|
+ * @param {number} g green
|
|
|
+ * @param {number} b blue
|
|
|
+ */
|
|
|
+const luminanace = (r: stri, g: number, b: number) => {
|
|
|
+ const a = [r, g, b].map((v) => {
|
|
|
+ v /= 255;
|
|
|
+ return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
|
|
|
+ });
|
|
|
+ return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * Calculates contrast between two rgb colors
|
|
|
+ * @param {string} rgb1 rgb color 1
|
|
|
+ * @param {string} rgb2 rgb color 2
|
|
|
+ */
|
|
|
+const contrast = (rgb1: string[], rgb2: number[]) =>
|
|
|
+ (luminanace(rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) /
|
|
|
+ (luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05);
|
|
|
+
|
|
|
+/**
|
|
|
+ * Determines what the best text color is (black or white) based con the contrast with the background
|
|
|
+ * @param hexColor - Last selected color by the user
|
|
|
+ */
|
|
|
+export const calculateBestTextColor = (hexColor: string) => {
|
|
|
+ const rgbColor = hexToRGB(hexColor.substring(1));
|
|
|
+ const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0]);
|
|
|
+
|
|
|
+ return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF';
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * Subtracts the indicated percentage to the R, G or B of a HEX color
|
|
|
+ * @param {string} color The color to change
|
|
|
+ * @param {number} amount The amount to change the color by
|
|
|
+ * @returns {string} The processed part of the color
|
|
|
+ */
|
|
|
+const subtractLight = (color: string, amount: number) => {
|
|
|
+ const cc = parseInt(color, 16) - amount;
|
|
|
+ const c = cc < 0 ? 0 : cc;
|
|
|
+ return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
|
|
|
+};
|
vben