Socket
Socket
Sign inDemoInstall

@jiaminghi/color

Package Overview
Dependencies
Maintainers
2
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@jiaminghi/color - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

.babelrc.js

23

CHANGELOG.md

@@ -1,3 +0,16 @@

# 0.1.1-alpha (2019-08-28)
# 1.0.0-alpha (2020-04-11)
### Upgrade
- **typescript:** Rewrite with typescript.
### New API
- **isHex:** Test is a Hex color.
- **isRgb:** Test is a Rgb color.
- **isRgba:** Test is a Rgba color.
- **isRgbOrRgba:** Test is a Rgb or Rgba color.
# 0.1.1-alpha (2019-08-29)
### Perfect

@@ -29,3 +42,3 @@

* **version:** V 0.0.4-alpha.
- **version:** V 0.0.4-alpha.

@@ -36,3 +49,3 @@ # 0.0.3-alpha (2019-04-30)

* **getOpacity:** Abnormal calculation due to spaces.
- **getOpacity:** Abnormal calculation due to spaces.

@@ -43,3 +56,3 @@ # 0.0.2-alpha (2019-04-08)

* **version:** V 0.0.2-alpha.
- **version:** V 0.0.2-alpha.

@@ -50,2 +63,2 @@ # 0.0.1-alpha (2019-04-04)

* **version:** V 0.0.1-alpha.
- **version:** V 0.0.1-alpha.

@@ -1,86 +0,248 @@

"use strict";
'use strict';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, '__esModule', { value: true });
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getRgbValue = getRgbValue;
exports.getRgbaValue = getRgbaValue;
exports.getOpacity = getOpacity;
exports.toRgb = toRgb;
exports.toHex = toHex;
exports.getColorFromRgbValue = getColorFromRgbValue;
exports.darken = darken;
exports.lighten = lighten;
exports.fade = fade;
exports["default"] = void 0;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
var _keywords = _interopRequireDefault(require("./config/keywords"));
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var hexReg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
var rgbReg = /^(rgb|rgba|RGB|RGBA)/;
var rgbaReg = /^(rgba|RGBA)/;
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
var ColorKeywords;
(function (ColorKeywords) {
ColorKeywords["transparent"] = "rgba(0,0,0,0)";
ColorKeywords["black"] = "#000000";
ColorKeywords["silver"] = "#C0C0C0";
ColorKeywords["gray"] = "#808080";
ColorKeywords["white"] = "#FFFFFF";
ColorKeywords["maroon"] = "#800000";
ColorKeywords["red"] = "#FF0000";
ColorKeywords["purple"] = "#800080";
ColorKeywords["fuchsia"] = "#FF00FF";
ColorKeywords["green"] = "#008000";
ColorKeywords["lime"] = "#00FF00";
ColorKeywords["olive"] = "#808000";
ColorKeywords["yellow"] = "#FFFF00";
ColorKeywords["navy"] = "#000080";
ColorKeywords["blue"] = "#0000FF";
ColorKeywords["teal"] = "#008080";
ColorKeywords["aqua"] = "#00FFFF";
ColorKeywords["aliceblue"] = "#f0f8ff";
ColorKeywords["antiquewhite"] = "#faebd7";
ColorKeywords["aquamarine"] = "#7fffd4";
ColorKeywords["azure"] = "#f0ffff";
ColorKeywords["beige"] = "#f5f5dc";
ColorKeywords["bisque"] = "#ffe4c4";
ColorKeywords["blanchedalmond"] = "#ffebcd";
ColorKeywords["blueviolet"] = "#8a2be2";
ColorKeywords["brown"] = "#a52a2a";
ColorKeywords["burlywood"] = "#deb887";
ColorKeywords["cadetblue"] = "#5f9ea0";
ColorKeywords["chartreuse"] = "#7fff00";
ColorKeywords["chocolate"] = "#d2691e";
ColorKeywords["coral"] = "#ff7f50";
ColorKeywords["cornflowerblue"] = "#6495ed";
ColorKeywords["cornsilk"] = "#fff8dc";
ColorKeywords["crimson"] = "#dc143c";
ColorKeywords["cyan"] = "#00ffff";
ColorKeywords["darkblue"] = "#00008b";
ColorKeywords["darkcyan"] = "#008b8b";
ColorKeywords["darkgoldenrod"] = "#b8860b";
ColorKeywords["darkgray"] = "#a9a9a9";
ColorKeywords["darkgreen"] = "#006400";
ColorKeywords["darkgrey"] = "#a9a9a9";
ColorKeywords["darkkhaki"] = "#bdb76b";
ColorKeywords["darkmagenta"] = "#8b008b";
ColorKeywords["darkolivegreen"] = "#556b2f";
ColorKeywords["darkorange"] = "#ff8c00";
ColorKeywords["darkorchid"] = "#9932cc";
ColorKeywords["darkred"] = "#8b0000";
ColorKeywords["darksalmon"] = "#e9967a";
ColorKeywords["darkseagreen"] = "#8fbc8f";
ColorKeywords["darkslateblue"] = "#483d8b";
ColorKeywords["darkslategray"] = "#2f4f4f";
ColorKeywords["darkslategrey"] = "#2f4f4f";
ColorKeywords["darkturquoise"] = "#00ced1";
ColorKeywords["darkviolet"] = "#9400d3";
ColorKeywords["deeppink"] = "#ff1493";
ColorKeywords["deepskyblue"] = "#00bfff";
ColorKeywords["dimgray"] = "#696969";
ColorKeywords["dimgrey"] = "#696969";
ColorKeywords["dodgerblue"] = "#1e90ff";
ColorKeywords["firebrick"] = "#b22222";
ColorKeywords["floralwhite"] = "#fffaf0";
ColorKeywords["forestgreen"] = "#228b22";
ColorKeywords["gainsboro"] = "#dcdcdc";
ColorKeywords["ghostwhite"] = "#f8f8ff";
ColorKeywords["gold"] = "#ffd700";
ColorKeywords["goldenrod"] = "#daa520";
ColorKeywords["greenyellow"] = "#adff2f";
ColorKeywords["grey"] = "#808080";
ColorKeywords["honeydew"] = "#f0fff0";
ColorKeywords["hotpink"] = "#ff69b4";
ColorKeywords["indianred"] = "#cd5c5c";
ColorKeywords["indigo"] = "#4b0082";
ColorKeywords["ivory"] = "#fffff0";
ColorKeywords["khaki"] = "#f0e68c";
ColorKeywords["lavender"] = "#e6e6fa";
ColorKeywords["lavenderblush"] = "#fff0f5";
ColorKeywords["lawngreen"] = "#7cfc00";
ColorKeywords["lemonchiffon"] = "#fffacd";
ColorKeywords["lightblue"] = "#add8e6";
ColorKeywords["lightcoral"] = "#f08080";
ColorKeywords["lightcyan"] = "#e0ffff";
ColorKeywords["lightgoldenrodyellow"] = "#fafad2";
ColorKeywords["lightgray"] = "#d3d3d3";
ColorKeywords["lightgreen"] = "#90ee90";
ColorKeywords["lightgrey"] = "#d3d3d3";
ColorKeywords["lightpink"] = "#ffb6c1";
ColorKeywords["lightsalmon"] = "#ffa07a";
ColorKeywords["lightseagreen"] = "#20b2aa";
ColorKeywords["lightskyblue"] = "#87cefa";
ColorKeywords["lightslategray"] = "#778899";
ColorKeywords["lightslategrey"] = "#778899";
ColorKeywords["lightsteelblue"] = "#b0c4de";
ColorKeywords["lightyellow"] = "#ffffe0";
ColorKeywords["limegreen"] = "#32cd32";
ColorKeywords["linen"] = "#faf0e6";
ColorKeywords["magenta"] = "#ff00ff";
ColorKeywords["mediumaquamarine"] = "#66cdaa";
ColorKeywords["mediumblue"] = "#0000cd";
ColorKeywords["mediumorchid"] = "#ba55d3";
ColorKeywords["mediumpurple"] = "#9370db";
ColorKeywords["mediumseagreen"] = "#3cb371";
ColorKeywords["mediumslateblue"] = "#7b68ee";
ColorKeywords["mediumspringgreen"] = "#00fa9a";
ColorKeywords["mediumturquoise"] = "#48d1cc";
ColorKeywords["mediumvioletred"] = "#c71585";
ColorKeywords["midnightblue"] = "#191970";
ColorKeywords["mintcream"] = "#f5fffa";
ColorKeywords["mistyrose"] = "#ffe4e1";
ColorKeywords["moccasin"] = "#ffe4b5";
ColorKeywords["navajowhite"] = "#ffdead";
ColorKeywords["oldlace"] = "#fdf5e6";
ColorKeywords["olivedrab"] = "#6b8e23";
ColorKeywords["orange"] = "#ffa500";
ColorKeywords["orangered"] = "#ff4500";
ColorKeywords["orchid"] = "#da70d6";
ColorKeywords["palegoldenrod"] = "#eee8aa";
ColorKeywords["palegreen"] = "#98fb98";
ColorKeywords["paleturquoise"] = "#afeeee";
ColorKeywords["palevioletred"] = "#db7093";
ColorKeywords["papayawhip"] = "#ffefd5";
ColorKeywords["peachpuff"] = "#ffdab9";
ColorKeywords["peru"] = "#cd853f";
ColorKeywords["pink"] = "#ffc0cb";
ColorKeywords["plum"] = "#dda0dd";
ColorKeywords["powderblue"] = "#b0e0e6";
ColorKeywords["rosybrown"] = "#bc8f8f";
ColorKeywords["royalblue"] = "#4169e1";
ColorKeywords["saddlebrown"] = "#8b4513";
ColorKeywords["salmon"] = "#fa8072";
ColorKeywords["sandybrown"] = "#f4a460";
ColorKeywords["seagreen"] = "#2e8b57";
ColorKeywords["seashell"] = "#fff5ee";
ColorKeywords["sienna"] = "#a0522d";
ColorKeywords["skyblue"] = "#87ceeb";
ColorKeywords["slateblue"] = "#6a5acd";
ColorKeywords["slategray"] = "#708090";
ColorKeywords["snow"] = "#fffafa";
ColorKeywords["springgreen"] = "#00ff7f";
ColorKeywords["steelblue"] = "#4682b4";
ColorKeywords["tan"] = "#d2b48c";
ColorKeywords["thistle"] = "#d8bfd8";
ColorKeywords["tomato"] = "#ff6347";
ColorKeywords["turquoise"] = "#40e0d0";
ColorKeywords["violet"] = "#ee82ee";
ColorKeywords["wheat"] = "#f5deb3";
ColorKeywords["whitesmoke"] = "#f5f5f5";
ColorKeywords["yellowgreen"] = "#9acd32";
})(ColorKeywords || (ColorKeywords = {}));
var ColorKeywords$1 = ColorKeywords;
/**
* @description Color validator
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {String|Boolean} Valid color Or false
* @description Test if a hex color
* @param {string} color color string
* @return {boolean} Test result
*/
function validator(color) {
var isHex = hexReg.test(color);
var isRgb = rgbReg.test(color);
if (isHex || isRgb) return color;
color = getColorByKeyword(color);
function isHex(color) {
if (typeof color !== 'string') return false;
color = color.toLowerCase();
return /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(color);
}
/**
* @description Test if a rgb color
* @param {string} color color string
* @return {boolean} Test result
*/
if (!color) {
console.error('Color: Invalid color!');
return false;
}
function isRgb(color) {
if (typeof color !== 'string') return false;
color = color.toLowerCase();
return /^(rgb\(|RGB\()/.test(color);
}
/**
* @description Test if a rgba color
* @param {string} color color string
* @return {boolean} Test result
*/
return color;
function isRgba(color) {
if (typeof color !== 'string') return false;
color = color.toLowerCase();
return /^(rgba|RGBA)/.test(color);
}
/**
* @description Test if a rgb or rgba color
* @param {string} color color string
* @return {boolean} Test result
*/
function isRgbOrRgba(color) {
return /^(rgb|rgba|RGB|RGBA)/.test(color);
}
/**
* @description Get color by keyword
* @param {String} keyword Color keyword like red, green and etc.
* @return {String|Boolean} Hex or rgba color (Invalid keyword will return false)
* @param {keyof typeof ColorKeywords} keyword Color keyword like red, green and etc.
* @return {ColorKeywords} Hex or rgba color
*/
function getColorByKeyword(keyword) {
if (!keyword) {
console.error('getColorByKeywords: Missing parameters!');
return false;
}
if (!_keywords["default"].has(keyword)) return false;
return _keywords["default"].get(keyword);
return ColorKeywords$1[keyword];
}
/**
* @description Get the Rgb value of the color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Array<Number>|Boolean} Rgb value of the color (Invalid input will return false)
* @description Color validator
* @param {string} color Hex|Rgb|Rgba color or color keywords
* @return {string|null} Valid color (Invalid input will return null)
*/
function getRgbValue(color) {
if (!color) {
console.error('getRgbValue: Missing parameters!');
return false;
}
color = validator(color);
if (!color) return false;
var isHex = hexReg.test(color);
var isRgb = rgbReg.test(color);
var lowerColor = color.toLowerCase();
if (isHex) return getRgbValueFromHex(lowerColor);
if (isRgb) return getRgbValueFromRgb(lowerColor);
function validator(color) {
if (isHex(color) || isRgbOrRgba(color)) return color;
return getColorByKeyword(color) || null;
}
/**
* @description Get the rgb value of the hex color
* @param {String} color Hex color
* @return {Array<Number>} Rgb value of the color
* @param {string} color Hex color
* @return {RgbValue} Rgb value of the color
*/

@@ -94,5 +256,5 @@

}).join('');
color = color.split('');
return new Array(3).fill(0).map(function (t, i) {
return parseInt("0x".concat(color[i * 2]).concat(color[i * 2 + 1]));
var colorValues = color.split('');
return new Array(3).fill(0).map(function (_, i) {
return parseInt("0x" + colorValues[i * 2] + colorValues[i * 2 + 1]);
});

@@ -102,4 +264,4 @@ }

* @description Get the rgb value of the rgb/rgba color
* @param {String} color Hex color
* @return {Array} Rgb value of the color
* @param {string} color Hex color
* @return {RgbValue} Rgb value of the color
*/

@@ -114,123 +276,90 @@

/**
* @description Get the Rgba value of the color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Array<Number>|Boolean} Rgba value of the color (Invalid input will return false)
* @description Get the Rgb value of the color
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @return {RgbValue|null} Rgb value of the color (Invalid input will return null)
*/
function getRgbaValue(color) {
if (!color) {
console.error('getRgbaValue: Missing parameters!');
return false;
}
var colorValue = getRgbValue(color);
if (!colorValue) return false;
colorValue.push(getOpacity(color));
return colorValue;
function getRgbValue(color) {
var validColor = validator(color);
if (!validColor) return null;
var lowerColor = validColor.toLowerCase();
return isHex(lowerColor) ? getRgbValueFromHex(lowerColor) : getRgbValueFromRgb(lowerColor);
}
/**
* @description Get the opacity of color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Number|Boolean} Color opacity (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @return {number} Color opacity
*/
function getOpacity(color) {
if (!color) {
console.error('getOpacity: Missing parameters!');
return false;
}
var validColor = validator(color);
if (!validColor || !isRgba(validColor)) return 1;
return Number(validColor.toLowerCase().split(',').slice(-1)[0].replace(/[)|\s]/g, ''));
}
/**
* @description Get the Rgba value of the color
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @return {RgbaValue|null} Rgba value of the color (Invalid input will return null)
*/
color = validator(color);
if (!color) return false;
var isRgba = rgbaReg.test(color);
if (!isRgba) return 1;
color = color.toLowerCase();
return Number(color.split(',').slice(-1)[0].replace(/[)|\s]/g, ''));
function getRgbaValue(color) {
var rgbValue = getRgbValue(color);
return rgbValue && __spreadArrays(rgbValue, [getOpacity(color)]);
}
/**
* @description Convert color to Rgb|Rgba color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @param {Number} opacity The opacity of color
* @return {String|Boolean} Rgb|Rgba color (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @param {number} opacity The opacity of color
* @return {string|null} Rgb|Rgba color (Invalid input will return null)
*/
function toRgb(color, opacity) {
if (!color) {
console.error('toRgb: Missing parameters!');
return false;
}
var rgbValue = getRgbValue(color);
if (!rgbValue) return false;
var addOpacity = typeof opacity === 'number';
if (addOpacity) return 'rgba(' + rgbValue.join(',') + ",".concat(opacity, ")");
return 'rgb(' + rgbValue.join(',') + ')';
if (!rgbValue) return null;
return typeof opacity === 'number' ? "rgba(" + rgbValue.join(',') + "," + opacity + ")" : "rgb(" + rgbValue.join(',') + ")";
}
/**
* @description Convert color to Hex color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {String|Boolean} Hex color (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @return {string|null} Hex color (Invalid input will return null)
*/
function toHex(color) {
if (!color) {
console.error('toHex: Missing parameters!');
return false;
}
if (isHex(color)) return color;
var colorValue = getRgbValue(color);
if (!colorValue) return null;
if (hexReg.test(color)) return color;
color = getRgbValue(color);
if (!color) return false;
return '#' + color.map(function (n) {
return Number(n).toString(16);
}).map(function (n) {
return n === '0' ? '00' : n;
}).join('');
var format10To16 = function format10To16(_) {
return Number(_).toString(16).padStart(2, '0');
};
return "#" + colorValue.map(format10To16).join('');
}
/**
* @description Get Color from Rgb|Rgba value
* @param {Array<Number>} value Rgb|Rgba color value
* @return {String|Boolean} Rgb|Rgba color (Invalid input will return false)
* @param {RgbValue|RgbaValue} value Rgb|Rgba color value
* @return {string|null} Rgb|Rgba color (Invalid input will return null)
*/
function getColorFromRgbValue(value) {
if (!value) {
console.error('getColorFromRgbValue: Missing parameters!');
return false;
}
var valueLength = value.length;
if (valueLength !== 3 && valueLength !== 4) {
console.error('getColorFromRgbValue: Value is illegal!');
return false;
}
var color = valueLength === 3 ? 'rgb(' : 'rgba(';
color += value.join(',') + ')';
return color;
if (!Array.isArray(value)) return null;
var length = value.length;
if (length !== 3 && length !== 4) return null;
return (length === 3 ? 'rgb(' : 'rgba(') + value.join(',') + ')';
}
/**
* @description Deepen color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Number} Percent of Deepen (1-100)
* @return {String|Boolean} Rgba color (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @param {number} percent of Deepen (1-100)
* @return {string|null} Rgba color (Invalid input will return null)
*/
function darken(color) {
var percent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
if (!color) {
console.error('darken: Missing parameters!');
return false;
function darken(color, percent) {
if (percent === void 0) {
percent = 0;
}
var rgbaValue = getRgbaValue(color);
if (!rgbaValue) return false;
if (!rgbaValue) return null;
rgbaValue = rgbaValue.map(function (v, i) {

@@ -245,18 +374,14 @@ return i === 3 ? v : v - Math.ceil(2.55 * percent);

* @description Brighten color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Number} Percent of brighten (1-100)
* @return {String|Boolean} Rgba color (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @param {number} percent of brighten (1-100)
* @return {string|null} Rgba color (Invalid input will return null)
*/
function lighten(color) {
var percent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
if (!color) {
console.error('lighten: Missing parameters!');
return false;
function lighten(color, percent) {
if (percent === void 0) {
percent = 0;
}
var rgbaValue = getRgbaValue(color);
if (!rgbaValue) return false;
if (!rgbaValue) return null;
rgbaValue = rgbaValue.map(function (v, i) {

@@ -271,23 +396,21 @@ return i === 3 ? v : v + Math.ceil(2.55 * percent);

* @description Adjust color opacity
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @param {Number} Percent of opacity
* @return {String|Boolean} Rgba color (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @param {number} percent of opacity
* @return {string|null} Rgba color (Invalid input will return null)
*/
function fade(color) {
var percent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
if (!color) {
console.error('fade: Missing parameters!');
return false;
function fade(color, percent) {
if (percent === void 0) {
percent = 100;
}
var rgbValue = getRgbValue(color);
if (!rgbValue) return false;
var rgbaValue = [].concat((0, _toConsumableArray2["default"])(rgbValue), [percent / 100]);
return getColorFromRgbValue(rgbaValue);
if (!rgbValue) return null;
return getColorFromRgbValue(__spreadArrays(rgbValue, [percent / 100]));
}
var _default = {
var index = {
isHex: isHex,
isRgb: isRgb,
isRgba: isRgba,
isRgbOrRgba: isRgbOrRgba,
fade: fade,

@@ -303,2 +426,16 @@ toHex: toHex,

};
exports["default"] = _default;
exports.darken = darken;
exports.default = index;
exports.fade = fade;
exports.getColorFromRgbValue = getColorFromRgbValue;
exports.getOpacity = getOpacity;
exports.getRgbValue = getRgbValue;
exports.getRgbaValue = getRgbaValue;
exports.isHex = isHex;
exports.isRgb = isRgb;
exports.isRgbOrRgba = isRgbOrRgba;
exports.isRgba = isRgba;
exports.lighten = lighten;
exports.toHex = toHex;
exports.toRgb = toRgb;
{
"name": "@jiaminghi/color",
"version": "0.1.1",
"version": "1.0.0",
"author": "JiaMing <743192023@qq.com>",
"description": "Color extension",
"main": "lib/index.js",
"unpkg": "dist/index.js",
"module": "es/index.js",
"types": "types/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/jiaming743/Color.git"
"url": "https://github.com/DataV-Team/Color.git"
},
"scripts": {
"build": "node build/index.js",
"prepublish": "npm run build",
"deploy": "node deploy/index.js",
"test": "mocha"
"clean": "rimraf lib dist es types",
"format": "prettier --write .",
"format:check": "prettier --check .",
"type:check": "tsc --noEmit",
"lint": "eslint --ext js,ts src test",
"build": "rollup -c",
"prepare": "npm run clean && npm run check && npm run build",
"test": "mocha",
"check": "npm run type:check && npm run lint && npm run format:check && npm run test"
},
"husky": {
"hooks": {
"pre-commit": "npm run check",
"pre-push": "npm run check"
}
},
"license": "MIT",
"bugs": {
"url": "https://github.com/jiaming743/Color/issues"
"url": "https://github.com/DataV-Team/Color/issues"
},

@@ -29,17 +43,32 @@ "keywords": [

],
"homepage": "https://github.com/jiaming743/Color#readme",
"homepage": "https://github.com/DataV-Team/Color#readme",
"dependencies": {
"@babel/runtime": "^7.7.4"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.5.5",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/register": "^7.4.4",
"@jiaminghi/fs": "0.0.2",
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.6",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.6",
"@babel/preset-typescript": "^7.9.0",
"@babel/register": "^7.9.0",
"@types/chai": "^4.2.11",
"@types/mocha": "^7.0.2",
"@types/node": "^13.11.0",
"@typescript-eslint/eslint-plugin": "^2.27.0",
"@typescript-eslint/parser": "^2.27.0",
"chai": "^4.2.0",
"ftp": "^0.3.10",
"mocha": "^6.1.4"
},
"dependencies": {
"@babel/runtime": "^7.5.5"
"eslint": "^6.8.0",
"husky": "^4.2.5",
"mocha": "^6.2.3",
"prettier": "^2.0.4",
"rimraf": "^3.0.2",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-terser": "^5.3.0",
"rollup-plugin-typescript2": "^0.27.0",
"ts-node": "^8.8.2",
"typescript": "^3.8.3"
}
}

@@ -6,41 +6,64 @@ [中文](./README.md)

<p align="center">
<a href="https://travis-ci.com/jiaming743/Color"><img src="https://img.shields.io/travis/com/jiaming743/color.svg" alt="Travis CI"></a>
<a href="https://github.com/jiaming743/Color/blob/master/LICENSE"><img src="https://img.shields.io/github/license/jiaming743/bezierCurve.svg" alt="LICENSE" /> </a>
<a href="https://www.npmjs.com/package/@jiaminghi/color"><img src="https://img.shields.io/npm/v/@jiaminghi/color.svg" alt="NPM" /> </a>
<a href="https://travis-ci.com/DataV-Team/color">
<img src="https://img.shields.io/travis/com/DataV-Team/color.svg" alt="Travis CI" />
</a>
<a href="https://github.com/DataV-Team/color/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/DataV-Team/color.svg" alt="LICENSE" />
</a>
<a href="https://www.npmjs.com/package/@jiaminghi/color">
<img src="https://img.shields.io/npm/v/@jiaminghi/color.svg" alt="NPM" />
</a>
</p>
### This plugin provides some extension methods for color.
- **[darken](#darken)**
- **[isHex](#isHex)**
Test if a Hex color.
- **[isRgb](#isRgb)**
Test if a Rgb color.
* **[isRgba](#isRgba)**
Test if a Rgba color.
* **[isRgbOrRgba](#isRgbOrRgba)**
Test if a Rgb or Rgba color.
* **[darken](#darken)**
Deepen color.
- **[lighten](#lighten)**
* **[lighten](#lighten)**
Brighten color.
- **[fade](#fade)**
* **[fade](#fade)**
Adjust color opacity.
- **[toHex](#toHex)**
* **[toHex](#toHex)**
Convert color to Hex color.
- **[toRgb](#toRgb)**
* **[toRgb](#toRgb)**
Convert color to Rgb|Rgba color.
- **[getOpacity](#getOpacity)**
* **[getOpacity](#getOpacity)**
Get color opacity.
- **[getRgbValue](#getRgbValue)**
* **[getRgbValue](#getRgbValue)**
Get the color Rgb value.
- **[getRgbaValue](#getRgbaValue)**
* **[getRgbaValue](#getRgbaValue)**
Get the color Rgba value.
- **[getColorFromRgbValue](#getColorFromRgbValue)**
* **[getColorFromRgbValue](#getColorFromRgbValue)**

@@ -72,9 +95,8 @@ Get Color from Rgb|Rgba value.

```html
<!--Resources are located on personal servers for experience and testing only, do not use in production environments-->
<!--Debug version-->
<script src="http://lib.jiaminghi.com/color/color.map.js"></script>
<script src="https://unpkg.com/@jiaminghi/color/dist/index.js"></script>
<!--Compression version-->
<script src="http://lib.jiaminghi.com/color/color.min.js"></script>
<script src="https://unpkg.com/@jiaminghi/color/dist/index.min.js"></script>
<script>
const { darken, lighten } = window.color
const { darken, lighten } = window.Color
// do something

@@ -84,18 +106,84 @@ </script>

------
---
<h3 align="center">Examples</h3>
#### isHex
```typescript
/**
* @description Test if a Hex color
* @param {string} color A color string maybe Hex
* @return {boolean} Test result
*/
type isHex = (color: string) => boolean
isHex('#000') // true
isHex('#333333') // true
isHex('Not A Color') // false
isHex('rgb(0,0,0)') // false
isHex('rgba(0,0,0,1)') // false
```
#### isRgb
```typescript
/**
* @description Test if a Rgb color
* @param {string} color A color string maybe Rgb
* @return {boolean} Test result
*/
type isRgb = (color: string) => boolean
isRgb('rgb(0,0,0)') // true
isRgb('RGB(0,0,0)') // true
isRgb('Not A Color') // false
isRgb('#000') // false
isRgb('#000000') // false
```
#### isRgba
```typescript
/**
* @description Test if a Rgba color
* @param {string} color A color string maybe Rgba
* @return {boolean} Test result
*/
type isRgba = (color: string) => boolean
isRgba('rgba(0,0,0,1)') // true
isRgba('rgb(0,0,0)') // false
isRgba('Not A Color') // false
isRgba('#000') // false
isRgba('#000000') // false
```
#### isRgbOrRgba
```typescript
/**
* @description Test if a Rgb or Rgba color
* @param {string} color A color string maybe Rgb or Rgba
* @return {boolean} Test result
*/
type isRgbOrRgba = (color: string) => boolean
isRgbOrRgba('rgb(0,0,0)') // true
isRgbOrRgba('RGB(0,0,0)') // true
isRgbOrRgba('rgba(0,0,0,1)') // true
isRgbOrRgba('#000') // false
isRgbOrRgba('Not A Color') // false
```
#### darken
```javascript
```typescript
/**
* @description Deepen color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @param {Number} percent Percent of Deepen (1-100)
* @return {String|Boolean} Rgba color (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @param {number} percent Percent of Deepen (1-100)
* @return {string|null} Rgba color (Invalid input will return null)
*/
function darken (color, percent) {
//...
}
type darken = (color: string, percent: number) => string | null

@@ -109,19 +197,15 @@ const before = '#3080E8'

<p align="center">
<img width="180px" src="./exampleImgs/1.jpg" />
<img width="180px" src="./exampleImgs/1.jpg" />
</p>
#### lighten
```javascript
```typescript
/**
* @description Brighten color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @param {Number} percent Percent of brighten (1-100)
* @return {String|Boolean} Rgba color (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @param {number} percent Percent of brighten (1-100)
* @return {string|null} Rgba color (Invalid input will return null)
*/
function lighten (color, percent) {
//...
}
type lighten = (color: string, percent: number) => string | null

@@ -135,19 +219,15 @@ const before = '#3080E8'

<p align="center">
<img width="180px" src="./exampleImgs/2.jpg" />
<img width="180px" src="./exampleImgs/2.jpg" />
</p>
#### fade
```javascript
```typescript
/**
* @description Adjust color opacity
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @param {Number} percent Percent of opacity
* @return {String|Boolean} Rgba color (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @param {number} percent Percent of opacity
* @return {string|null} Rgba color (Invalid input will return null)
*/
function fade (color, percent) {
//...
}
type fade = (color: string, percent: number) => string | null

@@ -161,18 +241,14 @@ const before = '#3080E8'

<p align="center">
<img width="180px" src="./exampleImgs/3.jpg" />
<img width="180px" src="./exampleImgs/3.jpg" />
</p>
#### toHex
```javascript
```typescript
/**
* @description Convert color to Hex color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {String|Boolean} Hex color (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @return {string|null} Hex color (Invalid input will return null)
*/
function toHex (color) {
//...
}
type toHex = (color: string) => string | null

@@ -185,16 +261,12 @@ const before = 'rgb(48,128,232)'

#### toRgb
```javascript
```typescript
/**
* @description Convert color to Rgb|Rgba color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @param {Number} opacity The opacity of color
* @return {String|Boolean} Rgb|Rgba color (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @param {number} opacity The opacity of color
* @return {string|null} Rgb|Rgba color (Invalid input will return null)
*/
function toRgb (color, opacity) {
//...
}
type toRgb = (color: string, opacity: number) => string | null

@@ -209,15 +281,11 @@ const before = '#3080E8'

#### getOpacity
```javascript
```typescript
/**
* @description Get the opacity of color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Number|Boolean} Color opacity (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @return {number|null} Color opacity (Invalid input will return null)
*/
function getOpacity (color) {
//...
}
type getOpacity = (color: string) => number | null

@@ -233,15 +301,12 @@ const color1 = '#3080E8'

#### getRgbValue
```javascript
```typescript
/**
* @description Get the Rgb value of the color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Array<Number>|Boolean} Rgb value of the color (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @return {RgbValue|null} Rgb value of the color (Invalid input will return null)
*/
function getRgbValue (color) {
//...
}
type RgbValue = [number, number, number]
type getRgbValue = (color: string) => RgbValue | null

@@ -254,15 +319,12 @@ const color = '#3080E8'

#### getRgbaValue
```javascript
```typescript
/**
* @description Get the Rgba value of the color
* @param {String} color Hex|Rgb|Rgba color or color keyword
* @return {Array<Number>|Boolean} Rgba value of the color (Invalid input will return false)
* @param {string} color Hex|Rgb|Rgba color or color keyword
* @return {RgbaValue|null} Rgba value of the color (Invalid input will return null)
*/
function getRgbaValue (color) {
//...
}
type RgbaValue = [number, number, number, number]
type getRgbaValue = (color: string) => RgbaValue

@@ -278,15 +340,14 @@ const color1 = '#3080E8'

#### getColorFromRgbValue
```javascript
```typescript
/**
* @description Get Color from Rgb|Rgba value
* @param {Array<Number>} value Rgb|Rgba color value
* @return {String|Boolean} Rgb|Rgba color (Invalid input will return false)
* @param {Value} value Rgb|Rgba color value
* @return {string|null} Rgb|Rgba color (Invalid input will return null)
*/
function getColorFromRgbValue (value) {
//...
}
type RgbValue = [number, number, number]
type RgbaValue = [number, number, number, number]
type Value = RgbValue | RgbaValue
type getColorFromRgbValue = (value: Value) => string | null

@@ -302,8 +363,6 @@ const value1 = [48, 128, 232]

#### Color Keywords
<p align="center">
<img width="750px" src="./exampleImgs/keywords.png" />
<img width="750px" src="./exampleImgs/keywords.png" />
</p>

@@ -6,5 +6,11 @@ [ENGLISH](./README_EN.md)

<p align="center">
<a href="https://travis-ci.com/jiaming743/Color"><img src="https://img.shields.io/travis/com/jiaming743/color.svg" alt="Travis CI"></a>
<a href="https://github.com/jiaming743/Color/blob/master/LICENSE"><img src="https://img.shields.io/github/license/jiaming743/bezierCurve.svg" alt="LICENSE" /> </a>
<a href="https://www.npmjs.com/package/@jiaminghi/color"><img src="https://img.shields.io/npm/v/@jiaminghi/color.svg" alt="NPM" /> </a>
<a href="https://travis-ci.com/DataV-Team/color">
<img src="https://img.shields.io/travis/com/DataV-Team/color.svg" alt="Travis CI" />
</a>
<a href="https://github.com/DataV-Team/color/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/DataV-Team/color.svg" alt="LICENSE" />
</a>
<a href="https://www.npmjs.com/package/@jiaminghi/color">
<img src="https://img.shields.io/npm/v/@jiaminghi/color.svg" alt="NPM" />
</a>
</p>

@@ -14,2 +20,18 @@

- **[isHex](#isHex)**
判断一个颜色是否为 Hex 类型
- **[isRgb](#isRgb)**
判断一个颜色是否为 Rgb 类型
- **[isRgba](#isRgba)**
判断一个颜色是否为 Rgba 类型
- **[isRgbOrRgba](#isRgbOrRgba)**
判断一个颜色是否为 Rgb 或 Rgba 类型
- **[darken](#darken)**

@@ -29,7 +51,7 @@

转换成Hex颜色
转换成 Hex 颜色
- **[toRgb](#toRgb)**
将颜色转为Rgb或Rgba颜色
将颜色转为 Rgb 或 Rgba 颜色

@@ -42,11 +64,11 @@ - **[getOpacity](#getOpacity)**

获取颜色的Rgb值
获取颜色的 Rgb 值
- **[getRgbaValue](#getRgbaValue)**
获取颜色的Rgba值
获取颜色的 Rgba 值
- **[getColorFromRgbValue](#getColorFromRgbValue)**
从Rgb或Rgba值获取颜色
从 Rgb 或 Rgba 值获取颜色

@@ -59,3 +81,3 @@ ### 附录

### npm安装
### npm 安装

@@ -77,9 +99,8 @@ ```shell

```html
<!--资源位于个人服务器仅供体验和测试,请勿在生产环境使用-->
<!--调试版-->
<script src="http://lib.jiaminghi.com/color/color.map.js"></script>
<script src="https://unpkg.com/@jiaminghi/color/dist/index.js"></script>
<!--压缩版-->
<script src="http://lib.jiaminghi.com/color/color.min.js"></script>
<script src="https://unpkg.com/@jiaminghi/color/dist/index.min.js"></script>
<script>
const { darken, lighten } = window.color
const { darken, lighten } = window.Color
// do something

@@ -89,18 +110,84 @@ </script>

------
---
<h3 align="center">示例</h3>
#### isHex
```typescript
/**
* @description 判断一个颜色是否为hex类型
* @param {string} color 可能是hex颜色的字符串
* @return {boolean} 判断结果
*/
type isHex = (color: string) => boolean
isHex('#000') // true
isHex('#333333') // true
isHex('Not A Color') // false
isHex('rgb(0,0,0)') // false
isHex('rgba(0,0,0,1)') // false
```
#### isRgb
```typescript
/**
* @description 判断一个颜色是否为rgb类型
* @param {string} color 可能是rgb颜色的字符串
* @return {boolean} 判断结果
*/
type isRgb = (color: string) => boolean
isRgb('rgb(0,0,0)') // true
isRgb('RGB(0,0,0)') // true
isRgb('Not A Color') // false
isRgb('#000') // false
isRgb('#000000') // false
```
#### isRgba
```typescript
/**
* @description 判断一个颜色是否为rgba类型
* @param {string} color 可能是rgba颜色的字符串
* @return {boolean} 判断结果
*/
type isRgba = (color: string) => boolean
isRgba('rgba(0,0,0,1)') // true
isRgba('rgb(0,0,0)') // false
isRgba('Not A Color') // false
isRgba('#000') // false
isRgba('#000000') // false
```
#### isRgbOrRgba
```typescript
/**
* @description 判断一个颜色是否为rgb或rgba类型
* @param {string} color 可能是rgb或rgba颜色的字符串
* @return {boolean} 判断结果
*/
type isRgbOrRgba = (color: string) => boolean
isRgbOrRgba('rgb(0,0,0)') // true
isRgbOrRgba('RGB(0,0,0)') // true
isRgbOrRgba('rgba(0,0,0,1)') // true
isRgbOrRgba('#000') // false
isRgbOrRgba('Not A Color') // false
```
#### darken
```javascript
```typescript
/**
* @description 加深颜色
* @param {String} color Hex|Rgb|Rgba颜色或颜色关键字
* @param {Number} percent 加深的百分比 (1-100)
* @return {String|Boolean} Rgba颜色 (无效输入将返回false)
* @param {string} color Hex|Rgb|Rgba颜色或颜色关键字
* @param {number} percent 加深的百分比 (1-100)
* @return {string|null} Rgba颜色 (无效输入将返回null)
*/
function darken (color, percent) {
//...
}
type darken = (color: string, percent: number) => string | null

@@ -114,19 +201,15 @@ const before = '#3080E8'

<p align="center">
<img width="180px" src="./exampleImgs/1.jpg" />
<img width="180px" src="./exampleImgs/1.jpg" />
</p>
#### lighten
```javascript
```typescript
/**
* @description 提亮颜色
* @param {String} color Hex|Rgb|Rgba颜色或颜色关键字
* @param {Number} percent 提亮的百分比 (1-100)
* @return {String|Boolean} Rgba颜色 (无效输入将返回false)
* @param {string} color Hex|Rgb|Rgba颜色或颜色关键字
* @param {number} percent 提亮的百分比 (1-100)
* @return {string|null} Rgba颜色 (无效输入将返回null)
*/
function lighten (color, percent) {
//...
}
type lighten = (color: string, percent: number) => string | null

@@ -143,16 +226,12 @@ const before = '#3080E8'

#### fade
```javascript
```typescript
/**
* @description 调节颜色透明度
* @param {String} color Hex|Rgb|Rgba颜色或颜色关键字
* @param {Number} Percent 透明度百分比
* @return {String|Boolean} Rgba颜色 (无效输入将返回false)
* @param {string} color Hex|Rgb|Rgba颜色或颜色关键字
* @param {number} Percent 透明度百分比
* @return {string|null} Rgba颜色 (无效输入将返回null)
*/
function fade (color, percent) {
//...
}
type fade = (color: string, percent: number) => string | null

@@ -166,18 +245,14 @@ const before = '#3080E8'

<p align="center">
<img width="180px" src="./exampleImgs/3.jpg" />
<img width="180px" src="./exampleImgs/3.jpg" />
</p>
#### toHex
```javascript
```typescript
/**
* @description 转换成Hex颜色
* @param {String} color Hex|Rgb|Rgba颜色或颜色关键字
* @return {String|Boolean} Hex颜色 (无效输入将返回false)
* @param {string} color Hex|Rgb|Rgba颜色或颜色关键字
* @return {string|null} Hex颜色 (无效输入将返回null)
*/
function toHex (color) {
//...
}
type toHex = (color: string) => string | false

@@ -190,16 +265,12 @@ const before = 'rgb(48,128,232)'

#### toRgb
```javascript
```typescript
/**
* @description 将颜色转为Rgb或Rgba颜色
* @param {String} color Hex|Rgb|Rgba颜色或颜色关键字
* @param {Number} opacity 颜色的透明度 (输入该参数将生成Rgba颜色)
* @return {String|Boolean} Rgb或Rgba颜色 (无效输入将返回false)
* @param {string} color Hex|Rgb|Rgba颜色或颜色关键字
* @param {number} opacity 颜色的透明度 (输入该参数将生成Rgba颜色)
* @return {string|null} Rgb或Rgba颜色 (无效输入将返回null)
*/
function toRgb (color, opacity) {
//...
}
type toRgb = (color: string, opacity: number) => string | null

@@ -214,15 +285,11 @@ const before = '#3080E8'

#### getOpacity
```javascript
```typescript
/**
* @description 获取颜色透明度
* @param {String} color Hex|Rgb|Rgba颜色或颜色关键字
* @return {Number|Boolean} 颜色透明度 (无效输入将返回false)
* @param {string} color Hex|Rgb|Rgba颜色或颜色关键字
* @return {number|null} 颜色透明度 (无效输入将返回null)
*/
function getOpacity (color) {
//...
}
type getOpacity = (color: string) => number | null

@@ -238,15 +305,12 @@ const color1 = '#3080E8'

#### getRgbValue
```javascript
```typescript
/**
* @description 获取颜色的Rgb值
* @param {String} color Hex|Rgb|Rgba颜色或颜色关键字
* @return {Array<Number>|Boolean} Rgb值 (无效输入将返回false)
* @param {string} color Hex|Rgb|Rgba颜色或颜色关键字
* @return {RgbValue|null} Rgb值 (无效输入将返回null)
*/
function getRgbValue (color) {
//...
}
type RgbValue = [number, number, number]
type getRgbValue = (color: string) => RgbValue | null

@@ -259,15 +323,12 @@ const color = '#3080E8'

#### getRgbaValue
```javascript
```typescript
/**
* @description 获取颜色的Rgba值
* @param {String} color Hex|Rgb|Rgba颜色或颜色关键字
* @return {Array<Number>|Boolean} Rgba值 (无效输入将返回false)
* @return {RgbaValue|null} Rgba值 (无效输入将返回null)
*/
function getRgbaValue (color) {
//...
}
type RgbaValue = [number, number, number, number]
type getRgbaValue = (color: string) => RgbaValue

@@ -283,15 +344,14 @@ const color1 = '#3080E8'

#### getColorFromRgbValue
```javascript
```typescript
/**
* @description 从Rgb或Rgba值获取颜色
* @param {Array<Number>} value Rgb或Rgba颜色的值
* @return {String|Boolean} Rgb颜色或Rgba颜色 (无效输入将返回false)
* @param {Value} value Rgb或Rgba颜色的值
* @return {string|null} Rgb颜色或Rgba颜色 (无效输入将返回null)
*/
function getColorFromRgbValue (value) {
//...
}
type RgbValue = [number, number, number]
type RgbaValue = [number, number, number, number]
type Value = RgbValue | RgbaValue
type getColorFromRgbValue = (value: Value) => string | null

@@ -307,8 +367,6 @@ const value1 = [48, 128, 232]

#### 颜色关键字
<p align="center">
<img width="750px" src="./exampleImgs/keywords.png" />
<img width="750px" src="./exampleImgs/keywords.png" />
</p>

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc