ENGLISH

Color Extension

这是一个提供如下几个方法的颜色插件。

• isHex

  判断一个颜色是否为 Hex 类型

• isRgb

  判断一个颜色是否为 Rgb 类型

• isRgba

  判断一个颜色是否为 Rgba 类型

• isRgbOrRgba

  判断一个颜色是否为 Rgb 或 Rgba 类型

• darken

  加深颜色

• lighten

  提亮颜色

• fade

  调节颜色透明度

• toHex

  转换成 Hex 颜色

• toRgb

  将颜色转为 Rgb 或 Rgba 颜色

• getOpacity

  获取颜色透明度

• getRgbValue

  获取颜色的 Rgb 值

• getRgbaValue

  获取颜色的 Rgba 值

• getColorFromRgbValue

  从 Rgb 或 Rgba 值获取颜色

附录

• 颜色关键字

  内置颜色关键字

npm 安装

$ npm install @jiaminghi/color

使用

import{toHex}from'@jiaminghi/color'// do something

快速体验

<!--调试版--><scriptsrc="https://unpkg.com/@jiaminghi/color/dist/index.js"></script><!--压缩版--><scriptsrc="https://unpkg.com/@jiaminghi/color/dist/index.min.js"></script><script>const{ darken, lighten }=window.Color// do something</script>

---

示例

isHex

/** * @description 判断一个颜色是否为hex类型 * @param {string} color 可能是hex颜色的字符串 * @return {boolean} 判断结果 */typeisHex=(color: string)=>booleanisHex('#000')// trueisHex('#333333')// trueisHex('Not A Color')// falseisHex('rgb(0,0,0)')// falseisHex('rgba(0,0,0,1)')// false

isRgb

/** * @description 判断一个颜色是否为rgb类型 * @param {string} color 可能是rgb颜色的字符串 * @return {boolean} 判断结果 */typeisRgb=(color: string)=>booleanisRgb('rgb(0,0,0)')// trueisRgb('RGB(0,0,0)')// trueisRgb('Not A Color')// falseisRgb('#000')// falseisRgb('#000000')// false

isRgba

/** * @description 判断一个颜色是否为rgba类型 * @param {string} color 可能是rgba颜色的字符串 * @return {boolean} 判断结果 */typeisRgba=(color: string)=>booleanisRgba('rgba(0,0,0,1)')// trueisRgba('rgb(0,0,0)')// falseisRgba('Not A Color')// falseisRgba('#000')// falseisRgba('#000000')// false

isRgbOrRgba

/** * @description 判断一个颜色是否为rgb或rgba类型 * @param {string} color 可能是rgb或rgba颜色的字符串 * @return {boolean} 判断结果 */typeisRgbOrRgba=(color: string)=>booleanisRgbOrRgba('rgb(0,0,0)')// trueisRgbOrRgba('RGB(0,0,0)')// trueisRgbOrRgba('rgba(0,0,0,1)')// trueisRgbOrRgba('#000')// falseisRgbOrRgba('Not A Color')// false

darken

/** * @description 加深颜色 * @param {string} color Hex|Rgb|Rgba颜色或颜色关键字 * @param {number} percent 加深的百分比 (1-100) * @return {string} Rgba颜色 (无效输入将抛出异常) */typedarken=(color: string,percent: number)=>stringconstbefore='#3080E8'constafter=darken(color,20)// after = 'rgba(0,77,181,1)'

lighten

/** * @description 提亮颜色 * @param {string} color Hex|Rgb|Rgba颜色或颜色关键字 * @param {number} percent 提亮的百分比 (1-100) * @return {string} Rgba颜色 (无效输入将抛出异常) */typelighten=(color: string,percent: number)=>stringconstbefore='#3080E8'constafter=lighten(color,20)// after = 'rgba(99,179,255,1)'

fade

/** * @description 调节颜色透明度 * @param {string} color Hex|Rgb|Rgba颜色或颜色关键字 * @param {number} Percent 透明度百分比 * @return {string} Rgba颜色 (无效输入将抛出异常) */typefade=(color: string,percent: number)=>stringconstbefore='#3080E8'constafter=lighten(color,20)// after = 'rgba(48,128,232,0.2)'

toHex

/** * @description 转换成Hex颜色 * @param {string} color Hex|Rgb|Rgba颜色或颜色关键字 * @return {string} Hex颜色 (无效输入将抛出异常) */typetoHex=(color: string)=>stringconstbefore='rgb(48,128,232)'constafter=toHex(before)// after = '#3080e8'

toRgb

/** * @description 将颜色转为Rgb或Rgba颜色 * @param {string} color Hex|Rgb|Rgba颜色或颜色关键字 * @param {number} opacity 颜色的透明度 (输入该参数将生成Rgba颜色) * @return {string} Rgb或Rgba颜色 (无效输入将抛出异常) */typetoRgb=(color: string,opacity: number)=>stringconstbefore='#3080E8'constafter1=toRgb(before)// after1 = 'rgb(48,128,232)'constafter2=toRgb(before,0.2)// after2 = 'rgba(48,128,232,0.2)'

getOpacity

/** * @description 获取颜色透明度 * @param {string} color Hex|Rgb|Rgba颜色或颜色关键字 * @return {number} 颜色透明度 (无效输入将抛出异常) */typegetOpacity=(color: string)=>numberconstcolor1='#3080E8'constcolor2='rgba(48,128,232,0.2)'constopacity1=getOpacity(color1)// opacity1 = 1constopacity2=getOpacity(color2)// opacity2 = 0.2

getRgbValue

/** * @description 获取颜色的Rgb值 * @param {string} color Hex|Rgb|Rgba颜色或颜色关键字 * @return {RgbValue} Rgb值 (无效输入将抛出异常) */typeRgbValue=[number,number,number]typegetRgbValue=(color: string)=>RgbValueconstcolor='#3080E8'constrgbValue=getRgbValue(color)// rgbValue = [48, 128, 232]

getRgbaValue

/** * @description 获取颜色的Rgba值 * @param {String} color Hex|Rgb|Rgba颜色或颜色关键字 * @return {RgbaValue|null} Rgba值 (无效输入将抛出异常) */typeRgbaValue=[number,number,number,number]typegetRgbaValue=(color: string)=>RgbaValueconstcolor1='#3080E8'constcolor2='rgba(48,128,232,0.2)'constrgbaValue1=getRgbaValue(color1)// rgbaValue1 = [48, 128, 232, 1]constrgbaValue2=getRgbaValue(color2)// rgbaValue2 = [48, 128, 232, 0.2]

getColorFromRgbValue

/** * @description 从Rgb或Rgba值获取颜色 * @param {Value} value Rgb或Rgba颜色的值 * @return {string} Rgb颜色或Rgba颜色 (无效输入将抛出异常) */typeRgbValue=[number,number,number]typeRgbaValue=[number,number,number,number]typeValue=RgbValue|RgbaValuetypegetColorFromRgbValue=(value: Value)=>stringconstvalue1=[48,128,232]constvalue2=[48,128,232,0.2]constcolor1=getColorFromRgbValue(value1)// color1 = 'rgb(48,128,232)'constcolor2=getColorFromRgbValue(value2)// color2 = 'rgba(48,128,232,0.2)'

颜色关键字