You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
lianglongbin 386245dbd4 | 3 months ago | |
---|---|---|
.. | ||
build | 3 months ago | |
deploy | 3 months ago | |
dist | 3 months ago | |
exampleImgs | 3 months ago | |
lib | 3 months ago | |
src | 3 months ago | |
test | 3 months ago | |
.babelrc | 3 months ago | |
.travis.yml | 3 months ago | |
CHANGELOG.md | 3 months ago | |
LICENSE | 3 months ago | |
README.md | 3 months ago | |
README_EN.md | 3 months ago | |
package.json | 3 months ago |
README_EN.md
Color Extension
This plugin provides some extension methods for color.
-
Deepen color.
-
Brighten color.
-
Adjust color opacity.
-
Convert color to Hex color.
-
Convert color to Rgb|Rgba color.
-
Get color opacity.
-
Get the color Rgb value.
-
Get the color Rgba value.
-
Get Color from Rgb|Rgba value.
Appendix
-
Built-in color keywords.
Install with npm
$ npm install @jiaminghi/color
Use
import { toHex } from '@jiaminghi/color'
// do something
Quick experience
<!--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>
<!--Compression version-->
<script src="http://lib.jiaminghi.com/color/color.min.js"></script>
<script>
const { darken, lighten } = window.color
// do something
</script>
Examples
darken
/**
* @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)
*/
function darken (color, percent) {
//...
}
const before = '#3080E8'
const after = darken(color, 20)
// after = 'rgba(0,77,181,1)'
lighten
/**
* @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)
*/
function lighten (color, percent) {
//...
}
const before = '#3080E8'
const after = lighten(color, 20)
// after = 'rgba(99,179,255,1)'
fade
/**
* @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)
*/
function fade (color, percent) {
//...
}
const before = '#3080E8'
const after = lighten(color, 20)
// after = 'rgba(48,128,232,0.2)'
toHex
/**
* @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)
*/
function toHex (color) {
//...
}
const before = 'rgb(48,128,232)'
const after = toHex(before)
// after = '#3080e8'
toRgb
/**
* @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)
*/
function toRgb (color, opacity) {
//...
}
const before = '#3080E8'
const after1 = toRgb(before)
// after1 = 'rgb(48,128,232)'
const after2 = toRgb(before, 0.2)
// after2 = 'rgba(48,128,232,0.2)'
getOpacity
/**
* @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)
*/
function getOpacity (color) {
//...
}
const color1 = '#3080E8'
const color2 = 'rgba(48,128,232,0.2)'
const opacity1 = getOpacity(color1)
// opacity1 = 1
const opacity2 = getOpacity(color2)
// opacity2 = 0.2
getRgbValue
/**
* @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)
*/
function getRgbValue (color) {
//...
}
const color = '#3080E8'
const rgbValue = getRgbValue(color)
// rgbValue = [48, 128, 232]
getRgbaValue
/**
* @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)
*/
function getRgbaValue (color) {
//...
}
const color1 = '#3080E8'
const color2 = 'rgba(48,128,232,0.2)'
const rgbaValue1 = getRgbaValue(color1)
// rgbaValue1 = [48, 128, 232, 1]
const rgbaValue2 = getRgbaValue(color2)
// rgbaValue2 = [48, 128, 232, 0.2]
getColorFromRgbValue
/**
* @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)
*/
function getColorFromRgbValue (value) {
//...
}
const value1 = [48, 128, 232]
const value2 = [48, 128, 232, 0.2]
const color1 = getColorFromRgbValue(value1)
// color1 = 'rgb(48,128,232)'
const color2 = getColorFromRgbValue(value2)
// color2 = 'rgba(48,128,232,0.2)'
Color Keywords