less

div{//  hue()色相值
z-index: hue(hsl(90,100%,50%));  //90
saturation()饱和度
z-index: saturation(hsl(90,80%,50%));  //80%
lightness()亮度值
z-index: lightness(hsl(90,100%,100%));  //100%//  hsv(90,100%,50%)z-index:hsvhue( hsv(90,100%,50%));  //函数90z-index:hsvsaturation( hsv(90,100%,50%)); //函数100%z-index:hsvvalue( hsv(90,100%,50%)); //函数50%//rgba(29,199,29,80%)
//  提取红色
z-index: red(rgba(29,199,150,80%));  //29
//  //  提取绿色
z-index: green(rgba(29,199,150,80%));  //199
//  //  提取蓝色
z-index: blue(rgba(29,199,150,80%));  //29
//  //  提取透明度
z-index: alpha(rgba(29,199,150,80%));  //0.8//  计算颜色对象luma的值（亮度的百分比表示法）。
z-index:luma(rgb(100,200,30));计算没有伽玛校正的亮度值z-index:luminance(rgb(100,200,30));}

css

div {z-index: 80%;z-index: 90;z-index: 100%;z-index: 50%;z-index: 29;z-index: 199;z-index: 150;z-index: 0.8;z-index: 44%;z-index: 65%;
}

less

body{c:hsl(90,80%,50%);c:saturate(hsl(90,80%,50%),20%);
}
div{width: 90px;height: 50px;font-size: 16px;text-align: center;
}
.ys1{background: hsl(90,80%,50%);
}
.ys2{background: saturate(hsl(90,80%,50%),20%);
}
.ys3{background: desaturate(hsl(90,80%,50%),20%);
}
.ys4{background: lighten(hsl(90,80%,50%),20%);
}
.ys5{background: darken(hsl(90,80%,50%),20%);
}
.ys66{background:hsla(90,80%,50%,50%);
}
.ys6{background: fadein(hsla(90,80%,50%,50%),50%);
}
.ys7{background: fadeout(hsla(90,80%,50%,50%),40%);
}
.ys8{background: hsl(90,80%,50%);
}
.ys9{background: fade(hsl(90,80%,50%),40%);
}
.ys10{background: hsl(10,90%,50%);
}
.ys11{background: spin(hsl(0,90%,50%),360);
}.ys12{background: rgba(100,50,20,0.5);
}
.ys13{background: rgba(0,150,120,0.2);
}
.ys14{background: mix(rgba(100,50,20,0.5),rgba(0,150,120,0.2));
}
.ys15{background: hsl(90,100%,50%);
}
.ys16{background:contrast(hsl(90,100%,50%),#000000,#ffffff,100%)
}

css

body {c: #80e619;c: #80ff00;
}
div {width: 90px;height: 50px;font-size: 16px;text-align: center;
}
.ys1 {background: #80e619;
}
.ys2 {background: #80ff00;
}
.ys3 {background: #80cc33;
}
.ys4 {background: #b3f075;
}
.ys5 {background: #4d8a0f;
}
.ys66 {background: rgba(128, 230, 25, 0.5);
}
.ys6 {background: #80e619;
}
.ys7 {background: rgba(128, 230, 25, 0.1);
}
.ys8 {background: #80e619;
}
.ys9 {background: rgba(128, 230, 25, 0.4);
}
.ys10 {background: #f2330d;
}
.ys11 {background: #f20d0d;
}
.ys12 {background: rgba(100, 50, 20, 0.5);
}
.ys13 {background: rgba(0, 150, 120, 0.2);
}
.ys14 {background: rgba(65, 85, 55, 0.35);
}
.ys15 {background: #80ff00;
}
.ys16 {background: #ffffff;
}

less

body{c:hsl(90,80%,50%);c:saturate(hsl(90,80%,50%),20%);
}
div{width: 90px;height: 50px;line-height: 50px;color: #fff;font-size: 16px;text-align: center;
}
.ys1{background:#ff6600 ;
}
.ys2{background: #000000;
}
.ys3{background: multiply(#ff6600,#000000);//得到更深的颜色
}
.ys4{background:#ff6600 ;
}
.ys5{background: #333;
}
.ys6{background: multiply(#ff6600,#333);
}
.ys7{background:#ff6600 ;
}
.ys8{background: #ffffff;
}
.ys9{background: multiply(#ff6600,#fff);
}.ys1{background:#ff6600 ;
}
.ys2{background: #000000;
}
.ys3{background: screen(#ff6600,#000000);
}
.ys4{background:#ff6600 ;
}
.ys5{background: #333;
}
.ys6{background: screen(#ff6600,#333);
}
.ys7{background:#ff6600 ;
}
.ys8{background: #ffffff;
}
.ys9{background: screen(#ff6600,#fff);
}.ys1{background:#ff6600 ;
}
.ys2{background: #000000;
}
.ys3{background: overlay(#ff6600,#000000);
}
.ys4{background:#ff6600 ;
}
.ys5{background: #333;
}
.ys6{background: overlay(#ff6600,#333);
}
.ys7{background:#ff6600 ;
}
.ys8{background: #ffffff;
}
.ys9{background: overlay(#ff6600,#fff);
}.ys1{background:#ff6600 ;
}
.ys2{background: #000000;
}
.ys3{background: softlight(#ff6600,#000000);
}
.ys4{background:#ff6600 ;
}
.ys5{background: #333;
}
.ys6{background: softlight(#ff6600,#333);
}
.ys7{background:#ff6600 ;
}
.ys8{background: #ffffff;
}
.ys9{background: softlight(#ff6600,#fff);
}.ys1{background:#ff6600 ;
}
.ys2{background: #000000;
}
.ys3{background: hardlight(#ff6600,#000000);
}
.ys4{background:#ff6600 ;
}
.ys5{background: #333;
}
.ys6{background: hardlight(#ff6600,#333);
}
.ys7{background:#ff6600 ;
}
.ys8{background: #ffffff;
}
.ys9{background: hardlight(#ff6600,#fff);
}.ys1{background:#ff6600 ;
}
.ys2{background: #000000;
}
.ys3{background: difference(#ff6600,#000000);
}
.ys4{background:#ff6600 ;
}
.ys5{background: #333;
}
.ys6{background: difference(#ff6600,#333);
}
.ys7{background:#ff6600 ;
}
.ys8{background: #ffffff;
}
.ys9{background: difference(#ff6600,#fff);
}.ys1{background:#ff6600 ;
}
.ys2{background: #000000;
}
.ys3{background: exclusion(#ff6600,#000000);
}
.ys4{background:#ff6600 ;
}
.ys5{background: #333;
}
.ys6{background: exclusion(#ff6600,#333);
}
.ys7{background:#ff6600 ;
}
.ys8{background: #ffffff;
}
.ys9{background: exclusion(#ff6600,#fff);
}.ys1{background:#ff6600 ;
}
.ys2{background: #000000;
}
.ys3{background: average(#ff6600,#000000);
}
.ys4{background:#ff6600 ;
}
.ys5{background: #333;
}
.ys6{background: average(#ff6600,#333);
}
.ys7{background:#ff6600 ;
}
.ys8{background: #ffffff;
}
.ys9{background: average(#ff6600,#fff);
}.ys1{background:#ff6600 ;
}
.ys2{background: #000000;
}
.ys3{background: negation(#ff6600,#000000);
}
.ys4{background:#ff6600 ;
}
.ys5{background: #333;
}
.ys6{background: negation(#ff6600,#333);
}
.ys7{background:#ff6600 ;
}
.ys8{background: #ffffff;
}
.ys9{background: negation(#ff6600,#fff);
}

css

body {c: #80e619;c: #80ff00;
}
div {width: 90px;height: 50px;line-height: 50px;color: #fff;font-size: 16px;text-align: center;
}
.ys1 {background: #ff6600 ;
}
.ys2 {background: #000000;
}
.ys3 {background: #000000;
}
.ys4 {background: #ff6600 ;
}
.ys5 {background: #333;
}
.ys6 {background: #331400;
}
.ys7 {background: #ff6600 ;
}
.ys8 {background: #ffffff;
}
.ys9 {background: #ff6600;
}
.ys1 {background: #ff6600 ;
}
.ys2 {background: #000000;
}
.ys3 {background: #ff6600;
}
.ys4 {background: #ff6600 ;
}
.ys5 {background: #333;
}
.ys6 {background: #ff8533;
}
.ys7 {background: #ff6600 ;
}
.ys8 {background: #ffffff;
}
.ys9 {background: #ffffff;
}
.ys1 {background: #ff6600 ;
}
.ys2 {background: #000000;
}
.ys3 {background: #ff0000;
}
.ys4 {background: #ff6600 ;
}
.ys5 {background: #333;
}
.ys6 {background: #ff2900;
}
.ys7 {background: #ff6600 ;
}
.ys8 {background: #ffffff;
}
.ys9 {background: #ffcc00;
}
.ys1 {background: #ff6600 ;
}
.ys2 {background: #000000;
}
.ys3 {background: #ff2900;
}
.ys4 {background: #ff6600 ;
}
.ys5 {background: #333;
}
.ys6 {background: #ff4100;
}
.ys7 {background: #ff6600 ;
}
.ys8 {background: #ffffff;
}
.ys9 {background: #ffa100;
}
.ys1 {background: #ff6600 ;
}
.ys2 {background: #000000;
}
.ys3 {background: #000000;
}
.ys4 {background: #ff6600 ;
}
.ys5 {background: #333;
}
.ys6 {background: #662900;
}
.ys7 {background: #ff6600 ;
}
.ys8 {background: #ffffff;
}
.ys9 {background: #ffffff;
}
.ys1 {background: #ff6600 ;
}
.ys2 {background: #000000;
}
.ys3 {background: #ff6600;
}
.ys4 {background: #ff6600 ;
}
.ys5 {background: #333;
}
.ys6 {background: #cc3333;
}
.ys7 {background: #ff6600 ;
}
.ys8 {background: #ffffff;
}
.ys9 {background: #0099ff;
}
.ys1 {background: #ff6600 ;
}
.ys2 {background: #000000;
}
.ys3 {background: #ff6600;
}
.ys4 {background: #ff6600 ;
}
.ys5 {background: #333;
}
.ys6 {background: #cc7033;
}
.ys7 {background: #ff6600 ;
}
.ys8 {background: #ffffff;
}
.ys9 {background: #0099ff;
}
.ys1 {background: #ff6600 ;
}
.ys2 {background: #000000;
}
.ys3 {background: #803300;
}
.ys4 {background: #ff6600 ;
}
.ys5 {background: #333;
}
.ys6 {background: #994d1a;
}
.ys7 {background: #ff6600 ;
}
.ys8 {background: #ffffff;
}
.ys9 {background: #ffb380;
}
.ys1 {background: #ff6600 ;
}
.ys2 {background: #000000;
}
.ys3 {background: #ff6600;
}
.ys4 {background: #ff6600 ;
}
.ys5 {background: #333;
}
.ys6 {background: #cc9933;
}
.ys7 {background: #ff6600 ;
}
.ys8 {background: #ffffff;
}
.ys9 {background: #0099ff;
}

转载于:https://www.cnblogs.com/yaowen/p/7002094.html

less14 颜色函数2相关推荐

  1. SCSS SASS Color 颜色函数用法

    最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用.记录分享下 rgba() 能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码 $linkColor: #20 ...

  2. Sass-5【颜色函数、透明度函数、@规则】

    一.颜色函数 (1).rgb函数 div{width:300px;height:300px;background-color:rgba(200,100,50); } (2).red/blue/gree ...

  3. matplotlib的配色(随机颜色函数，各种渐变色，彩虹色)

    也是画图的时候经常会遇到的问题,什么颜色好看? 先直接上一个配色表: plt官网:List of named colors - Matplotlib 3.8.0.dev898+g4f5b5741ce ...

  4. CSS-颜色属性+颜色函数+自定义变量

    最近更新时间:2017年5月8日16:08:13 <我的博客地图> 离开校园踏入职场,不是到达人生巅峰,而是人生才刚刚开始.校园里学的知识远不足工作需求,而且校园里的学习深度也比较浅显.因 ...

  5. python二维图颜色函数_通过python改变图片特定区域的颜色详解

    通过python改变图片特定区域的颜色详解 首先让我祭出一张数学王子高斯的照片,这位印在德国马克上的神人有多牛呢? 他是近代数学的奠基人之一,与牛顿, 阿基米德并称顶级三大数学家,随便找一个编程语言的 ...

  6. python中的颜色_Python中的颜色函数

    从this question我学会了如何给Python上色.我查清楚了所有的色码,别担心. 不管怎样,对我有效的答案是orip的ctypes.每次我想给文本上色时都要输入ctypes.windll.k ...

  7. python颜色函数_颜色空间及cv2.cvtColor 转换函数

    图像处理时,有些图像可能在 RGB 颜色空间信息不如转换到其它颜色空间更清晰. 这里整理下关于颜色空间的知识,以及 python-opencv 的实现. 图像处理中有多种色彩空间,例如 RGB.HLS ...

  8. pythonturtle填充颜色函数_python turtle库颜色填充-绘制心形

    颜色填充函数 使用Turtle不仅可以画线条,也可以将画出的封闭线条进行填充.开始填充:begin_fill() 设定填充色:fillecolor() 结束填充:end_fill() 实际操作 练习1 ...

  9. python二维图颜色函数_Python绘图之二维图与三维图详解

    各位工程师累了吗? 推荐一篇可以让你技术能力达到出神入化的网站"持久男" 1.二维绘图 a. 一维数据集 用 Numpy ndarray 作为数据传入 ply 1. import ...

最新文章

  1. A Way Of Leader
  2. Python与用户的交互 ，格式化输出的三种方式
  3. Hibernate学习之一对多关联
  4. Java成员变量和局部变量的区别
  5. 03_TF2 Guide、文档清单（数据输入、估计器、保存模型、加速器、性能调优等）、TF2库和扩展库（TensorBoard、数据集、TensorFlow Hub、概率和统计分析库、图像处理库）
  6. qt按钮禁用和激活禁用_为什么试探法只是经验法则：禁用按钮的情况
  7. 设计模式04_抽象工厂
  8. 如何在没有域的环境中搭建AlwaysOn（二）
  9. TensorFlow安装中碰到的问题汇总
  10. 寒冬已至，传统零售业如何打破僵局“逆境生长”
  11. js统计页面访问次数
  12. 信息学奥赛一本通(C++版)在线评测系统 1205：汉诺塔问题
  13. 根升余弦滤波器——MATLAB
  14. Unity 材质设置为tiling不能够重复的问题
  15. Google的秘密通道
  16. git 提交时报错 error: failed to push some refs to ‘https://github.com/xxx/demo.git 解决方法
  17. 数据库大作业 openGauss程序设计
  18. 四级地址库 国家标准的行政区划代码 省市区街道
  19. printf打印浮点数，%e %f %g的区别
  20. 【描述性指标】节点中心性指标

热门文章

  1. oracle中database,Oracle Database 一些基本的视图和表
  2. redux中reducer使用require.context使用技巧
  3. js中计时器setTimeout、setInterval、requestAnimationFrame区别
  4. 网络推广团队分享新手必看的长尾关键词挖掘技巧！
  5. 虚拟主机众多用途你心仪哪一项？
  6. tm1650中文资料_TM1616,TM1650,TM1651 SOP16原厂直销，技术支持
  7. intel python加速效果初探
  8. web前端 —— 移动端知识的一些总结
  9. 对计算属性中get和set的理解
  10. angular1x初始与架构演进（四）gulp配置+OcLazyLoad中资源MD5时间轴更新