插件名称 | 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 通道的色彩值十六进制文本)除了以上常见的功能,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 文件即可,详细见后面的说明。