|
|
|
@ -5,10 +5,10 @@ |
|
|
|
* @param String color 十六进制颜色值 |
|
|
|
* @return Boolean |
|
|
|
*/ |
|
|
|
export const isHexColor = function (color: string) { |
|
|
|
export function isHexColor(color: string) { |
|
|
|
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; |
|
|
|
return reg.test(color); |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* RGB 颜色值转换为 十六进制颜色值. |
|
|
|
@ -19,18 +19,18 @@ export const isHexColor = function (color: string) { |
|
|
|
* @param g |
|
|
|
* @param b |
|
|
|
*/ |
|
|
|
export const rgbToHex = function (r: number, g: number, b: number) { |
|
|
|
export function rgbToHex(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) { |
|
|
|
export function hexToRGB(hex: string) { |
|
|
|
let sHex = hex.toLowerCase(); |
|
|
|
if (isHexColor(hex)) { |
|
|
|
if (sHex.length === 4) { |
|
|
|
@ -47,16 +47,16 @@ export const hexToRGB = function (hex: string) { |
|
|
|
return 'RGB(' + sColorChange.join(',') + ')'; |
|
|
|
} |
|
|
|
return sHex; |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
export const colorIsDark = (color: string) => { |
|
|
|
export function colorIsDark(color: string) { |
|
|
|
if (!isHexColor(color)) return; |
|
|
|
const [r, g, b] = hexToRGB(color) |
|
|
|
.replace(/(?:\(|\)|rgb|RGB)*/g, '') |
|
|
|
.split(',') |
|
|
|
.map((item) => Number(item)); |
|
|
|
return r * 0.299 + g * 0.578 + b * 0.114 < 192; |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Darkens a HEX color given the passed percentage |
|
|
|
@ -64,14 +64,14 @@ export const colorIsDark = (color: string) => { |
|
|
|
* @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) => { |
|
|
|
export function 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 |
|
|
|
@ -79,14 +79,14 @@ export const darken = (color: string, amount: number) => { |
|
|
|
* @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) => { |
|
|
|
export function 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 */ |
|
|
|
/** |
|
|
|
@ -95,11 +95,11 @@ export const lighten = (color: string, amount: number) => { |
|
|
|
* @param {number} amount The amount to change the color by |
|
|
|
* @returns {string} The processed part of the color |
|
|
|
*/ |
|
|
|
const addLight = (color: string, amount: number) => { |
|
|
|
function 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 |
|
|
|
@ -107,33 +107,36 @@ const addLight = (color: string, amount: number) => { |
|
|
|
* @param {number} g green |
|
|
|
* @param {number} b blue |
|
|
|
*/ |
|
|
|
const luminanace = (r: number, g: number, b: number) => { |
|
|
|
function luminanace(r: number, 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); |
|
|
|
function contrast(rgb1: string[], rgb2: number[]) { |
|
|
|
return ( |
|
|
|
(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) => { |
|
|
|
export function 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 |
|
|
|
@ -141,8 +144,8 @@ export const calculateBestTextColor = (hexColor: string) => { |
|
|
|
* @param {number} amount The amount to change the color by |
|
|
|
* @returns {string} The processed part of the color |
|
|
|
*/ |
|
|
|
const subtractLight = (color: string, amount: number) => { |
|
|
|
function 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
5 years ago