@jiaminghi/color

Color Extension

This plugin provides some extension methods for color.

• darken

  Deepen color.

• lighten

  Brighten color.

• fade

  Adjust color opacity.

• toHex

  Convert color to hex color.

• toRgb

  Convert color to rgb/rgba color.

• getOpacity

  Get color opacity.

• getRgbValue

  Get the color rgb value.

• getRgbaValue

  Get the color rgba value.

• getColorFromRgbValue

  Get Color from rgb value.

Install with npm

$ npm install @jiaminghi/color

---

Examples

darken

/**
 * @description Deepen color
 * @param {String} color Hex or rgb/rgba color
 * @return {Number} Percent of Deepen
 * @return {String} Rgba color
 */
function darken (color, percent) {
	//...
}

const before = '#3080E8'

const after = darken(color, 20)
// after = 'rgba(0,78,182,1)'

lighten

/**
 * @description Brighten color
 * @param {String} color Hex or rgb/rgba color
 * @return {Number} Percent of brighten
 * @return {String} Rgba color
 */
function lighten (color, percent) {
	//...
}

const before = '#3080E8'

const after = lighten(color, 20)
// after = 'rgba(98,178,255,1)'

fade

/**
 * @description Adjust color opacity
 * @param {String} color Hex or rgb/rgba color
 * @param {Number} Percent of opacity
 * @return {String} Rgba color
 */
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 or rgb/rgba color
 * @return {String} Hex color
 */
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 or rgb/rgba color
 * @param {Number} opacity The opacity of color
 * @return {String} Rgb/rgba color
 */
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 the color
 * @param {String} color Hex or rgb/rgba color
 * @return {Number} Color opacity
 */
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 color rgb value
 * @param {String} color Hex or rgb/rgba color
 * @return {Array} Rgb value of the color
 */
function getRgbValue (color) {
	//...
}

const color = '#3080E8'

const rgbValue = getRgbValue(color)
// rgbValue = [48, 128, 232]

getRgbaValue

/**
 * @description Get the color rgba value
 * @param {String} color Hex or rgb/rgba color
 * @return {Array} Rgba value of the color
 */
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 value
 * @param {Array} value Rgb color value
 * @return {String} Rgb / rgba color
 */
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)'

Changelog

0.0.5-alpha (2019-06-06)

Perfect

• ES5: Use babel to transcode to ES5.