Skip to content

AyinColor is a color library tool, in order to avoid memorizing color values like #FF000, RGB(255,0,0), and conveniently call various preset colors during development, So this tool was developed.

License

Notifications You must be signed in to change notification settings

jay86cn/ayin-color

Repository files navigation

English | 简体中文

数字魔方演示站数字魔方文档AyinColor NpmBili视频博客GithubGitee

AyinColor

AyinColor是一款颜色库工具,为了免于记忆类似#FF000、RGB(255,0,0)、这样的颜色值,方便在开发中调用各种预设的颜色,所以开发了此工具。

目录介绍

主要为以下3个目录:

  • aYinColor-V1 source-第一版的源码
  • aYinColor-V2 source-第二版的源码
  • npm publish package-发布到npm打包后的版本

如果只是使用的话,请阅读说明文档后,根据 【项目中使用】小节配置,如果需要二次迭代开发,请下载V1和V2的源码修改迭代。

颜色表预览和视频教程,请到这里

Gitee无法识别html标签中的颜色值,所以无法在本页面展现颜色表。

简介

取色案例如下:

  • 红色-rel5
  • 淡红色-rel1
  • 深红色-rel9
  • 蓝色-bll5
  • 蓝色低饱和度-bld5
  • 淡蓝色低饱和度-bld1

AyinColor 最早的版本于2018年10月份开发完毕V1版本。

AyinColor颜色库包含两个版本:

  • JS版本-基于chroma.js库开发

  • CSS版本-基于Less.js开发

其设计思路是,根据纯正红色的十六进制颜色值#FF0000,通过改变色相、饱和度、明暗来生成颜色表中的所有其他色值。

在第一个版本开发完毕之后,迭代过很多个版本,其本质仅仅是增加饱和度和明暗的变化数量。

但都没用起来,根本原因是V1版本颜色虽然较少,但也容易掌控,且在一般的项目开发中足够用了。

视频介绍请点击 这里 查看


基础色

基础色的选取,本质上是色相角度的调整。

从0度开始,色相每偏转30度,生成一个基础色值,获得了12个基础颜色值

  • -hue=0
  • -hue=30
  • -hue=60
  • 草绿-hue=90
  • 绿-hue=120
  • 水绿-hue=150
  • -hue=180
  • -hue=210
  • -hue=240
  • -hue=270
  • -hue=300
  • 罗兰红-hue=330

如果再次偏移30度,330+30=360度,实际上回到了0度的位置

这12个基础色值,色相差异太大,所以把色相偏转度改为15度,相当于上面的每个基础色值中间穿插了一个中间值,获得了24个基础色值。 24基础色,再额外加一个灰色,一共25个基础色诞生。

如下图:

25个基础色的中、英文名称、以及简写:

  • -red re
    • 红橙-red-orange ro
  • -orange or
    • 橙黄-orange-yellow oy
  • -yellow ye
    • 黄-草绿-yellow-chartreuse yc
  • 草绿-chartreuse ch
    • 草绿-绿-chartreuse-green cg
  • 绿-green gr
    • 绿-水绿-green-aquamarine ga
  • 水绿-aquamarine aq
    • 水绿-青-aquamarine-cyan ac
  • -cyan cy
    • 青蓝-cyan-blue cb
  • -blue bl
    • 蓝靛-blue-indigo bi
  • -indigo in
    • 靛紫-indigo-purple ip
  • -purple pu
    • 紫粉-purple-pink pp
  • -pink pi
    • 粉-洋红-pink-violetred pv
  • 罗兰红-violetred vi
    • 罗兰红-红-violetred-red vr
  • -gray gy

当时对12基础色进行中英文命名的时候,查阅了大量的资料和文献后定下来的,但哪怕现在也不确定这样命名是否准确,姑且这么用吧。


饱和度变化

V1的饱和度分为4种

  • light l
  • middle m
  • rost r
  • dark d

最早的AyinColor的饱和度分为三种,light、middle、dark,但感觉颜色在饱和度的变化太少了,所以才引入了一个rost(烤、烘烤、烤焦),此时V1版本正式定型。

如下图,纵轴方向的变化即为饱和度的变化

V2版本的饱和度变化分为A、B、C、D、E、F六种,因为找不到合适的单词表述这6种饱和度的变化,所以就用大写字母A-F直接替代了。

如下图,纵轴方向的变化即为饱和度的变化


明暗的变化

V1的明暗变化分为9种,用数字1-9代替

如下图,横轴方向的变化即为明暗变化

V2的明暗变化分为19种,用数字01-19代替

如下图,横轴方向的变化即为明暗变化

中间也开发过其他的不同的版本,比如其中代号为AyinColorFull的饱和度变化分了10种,明暗分了19种,每种基础色变形出了190个颜色值,相邻颜色之间的差异非常小,在脑海中取色的时候因为饱和度和明暗的层级太多了,犹如一团浆糊,到后来也没用起来。

V2的开发,是因为后来在开发数据可视化框架的时候,在做配色工作时,感觉V1的饱和度、明暗变化太少了,需要更细腻的颜色表,所以才于2022年3月左右,基于之前开发的AyinColorFull,改造后重命名为V2,集成到框架中。

V2版本是基于AyinColorFull把饱和度从10种减少到6种后而来。

目前作者在开发项目的过程中,使用最多的还是V1版本,因为其变化较少,易于掌握,其颜色的变化在一般的项目开发中使用已经绰绰有余。只有在开发诸如大屏可视化框架遇到一些需要更细致颜色的时候,才会调用V2配色表。


项目中使用

AyinColorV1、V2的JS版本和CSS版均已开源,可以随意在任意项目上使用和修改。

npm地址如下 AyinColor

其内部文件列表如下:

  • ayin-color.less(V1 for CSS版本)
  • ayin-color-expand.less(V2 for CSS版本)
  • ayin-color.js(for JS版本)
  • ayin-color.json(JS版本的对应的静态颜色值)
  • index.js(入口文件)

JS版本使用方式:

//npm安装,推荐cnpm或者pnpm
npm i ayin-color --save

//在main.js中引入
import {AyinColor} from "ayin-color"
Vue.use(AyinColor)

CSS版本使用方式:

//vue2 在vue.config.js中配置
//需要在配置前先安装 less、less-loader、style-resources-loader
pluginOptions: {
    'style-resources-loader': {
        preProcessor: 'less',
            patterns: [
                path.resolve(__dirname, "./node_modules/ayin-color/ayin-color.less"),
                path.resolve(__dirname, "./node_modules/ayin-color/ayin-color-expand.less")
            ]
    }
},
    
//vue3+vite中使用 在 vite.config.js 中配置
//需要在配置前先安装 less、less-loader
css: {
    preprocessorOptions: {
        less: {
            javascriptEnabled: true,
            additionalData:`
          		@import "${path.resolve(__dirname, './node_modules/ayin-color/ayincolor.less')}";
          		@import "${path.resolve(__dirname, './node_modules/ayin-color/ayincolor-expand.less')}";
         	`
        }
    }
},

JS代码中使用

当在项目中配置完毕后,即可全局使用AyinColorV1和V2的JS版本。

使用案例代码:

//AyinColor V1
let color=$c.rel5
//AyinColor V2
let color=$c.reA10

CSS代码中使用

因为CSS的颜色表基于Less开发,所以需要安装less组件。

在此框架中已经集成了AyinColorV1和V2的Less版本,可以直接使用。

使用案例代码:

//AyinColor V1
.text{color:@rel5; background-color:@bll5; border:1px solid @gyd4;}

//AyinColor V2
.text{color:@reA10; background-color:@blA03; border:1px solid @gyE05;}

后续可能会开发一套原生CSS的颜色组件,比如把颜色值挂载到CSS的 :root 下通过 var(--color-rel5)这样的方式取调用。挖个坑等有时间再开发。


颜色值的进阶处理

如果需要把bll5,改为0.5的透明度

JS代码

let color=$c.fade('bll5',.5)

Less代码

.text{color:fade(@bll5,50%);}

JS中提供了以下进阶处理函数:

  • fade-透明度
  • hslh-色相
  • hsls-饱和度
  • hsll-明暗
  • darken-加深
  • lighten-减淡
    • 以上的处理函数,使用方式均为 $c.xxxx(color,num)参考上方的JS代码案例。
    • 以上函数是用chroma.js中的颜色处理函数封装而来。
    • 其中num值的传入有些许的不同,比如透明度是浮点数,色相是度数,具体使用方式和传参,请参考chroma.js中的相关章节。
  • scale-计算多个颜色之间的区间值
    • scale的使用方式为,$c.scale([color1,color2,.....colorN],num,type)
    • 传入的颜色数组最少2个,无上限
    • num是需要获取的颜色数量
    • type是处理方式,非必填,默认值为 lch 备选值为 lchhsllablrgb

Less中提供了以下的处理函数:

  • fade 透明
  • fadein 增加透明度
  • fadeout 降低透明度
  • lighten 明度
  • darken 变暗
  • spin 色相
  • saturate 饱和度+
  • desaturate 饱和度-
  • tint 与白色混合减少颜色比例
  • shade 与黑色混合减少颜色比例
  • greyscale 丢失饱和度
  • contrast 对比度
  • mix 混合两种颜色

常用的无非也就是fade、lighten、darken 等,其余的使用方式和详细介绍,请参考LESS文档中的颜色操作一节


颜色转换工具

在使用AyinColor做开发的过程中,经常需要把普通的16进制颜色或者RGBA颜色转换为AyinColor中的颜色,因此开发了一个颜色转换工具。

此工具,可以输入任意颜色值,如,red,#FF0000,rgb(5,245,230)

返回AyinColor两个版本中的匹配结果,返回结果中的距离参数越小,则说明与原始颜色越接近。

此工具位于aYinColor-V2 source目录中。

About

AyinColor is a color library tool, in order to avoid memorizing color values like #FF000, RGB(255,0,0), and conveniently call various preset colors during development, So this tool was developed.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published