Vue.js的全功能颜色解析器 - ichi-color

Vue.js的全功能颜色解析器 - ichi-color
插件名称 ichiColor
发布时间 2021年2月22日
插件作者 nullice

适用于vue.js的全功能颜色解析器模块,支持RGB,HSL,HSV / HSB,HSL255,HSL240,HWB,XYZ,LAB,LUV,LHCab,xyY。

安装和下载:

$ npm install --save ichi-color

响应式风格

使用 ichiColor 进行色彩格式的转换均可通过属性赋值来完成:

var color= IchiColor("#f2a2a2")

color.r = 30
color.hex //"#1ea2a2"

color.rgb = "rgb(255, 0, 0)"
color.r // 255

这种全部用赋值的方式来进行操作,相较于通过 get 、set 方法实现, 除了简单直观,少打字以外更重要的是能更简单方便的与数据绑定式的框架(如 Vue.js 、AngularJS 等)结合,用极少的代码完成色彩控件:

// html
<span>RGB</span><input v-model="ichiColor.rgb" type="text">
<span>Hex</span><input v-model="ichiColor.hex" type="text">


<script>
var vueApp = new Vue({
    el: 'body',
    data: {
        ichiColor: new IchiColor(),
    },
})
</script>

全功能支持

ichiColor 支持你能遇到的几乎所有常见色彩格式,并且相赋值式的操作能让你轻松的把色彩值组合成想要的形式。

支持色彩在以下色彩格式间转换:

  • rgb
  • hsl
  • hsv (hsb)
  • hwb
  • hex (色彩值十六进制文本)
  • int (色彩值十进制整数)
  • rgba (CSS 格式 RGBA 文本)
  • ahex (argb 包含 alpha 通道的色彩值十六进制文本)

extension 扩展功能

除了以上常见的功能,ichiColor 还可以提供以下更加高级的色彩模型间的转换:

  • hsl255 (Microsoft Office 色彩选择器风格)
  • hsl240 (Windows 系统色彩选择器风格)
  • labPs (D50 白点, Photoshop 风格)
  • lab (D65 白点)
  • xyz
  • xyY
  • LCHab
  • luv
  • theLuma_Rec709 (只读, Rec709 标准辉度)
  • theLuma_WCAG (只读, Rec709 标准辉度)
  • theWavelength (只读, 光谱波长)
  • getWCAGcontrastThan() (计算 Web 无障碍标准颜色对比度)

使用扩展的 ichiColor 只是在非常简单,只要引入额外的 JavaScript 文件即可,详细见后面的说明。