less14 颜色函数2

2021-07-16 20:38:24

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%));  //函数90
  z-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;
}

本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/7002094.html，如需转载请自行联系原作者

码农公寓

相关文章