IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    CSS好用的color-mix颜色函数也可以使用啦

    张 鑫旭发表于 2024-11-28 16:14:21
    love 0

    by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11449
    本文可全文转载,独立域名个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。

    封面占位图 麋鹿

    一、突然发现,浏览器全支持啦

    color-mix()颜色函数去年年初其实我就介绍过了,不过只是简单提了一嘴,见“是时候介绍这几个全新的CSS颜色函数了”一文。

    然后,最近发现,这个颜色函数所有现代浏览器都已经支持啦,看看看,绿油油一片大好。

    color-mix()兼容性截图

    是时候好好介绍这个我认为还挺实用的颜色函数。

    二、白加黑的颜色是?

    先通过一个简单的案例预热下对color-mix()颜色函数的认知。

    canvas {
      background-color: color-mix(in srgb, black, white)
    }

    按照我们的认知,白色和黑色混合应该是灰色,那最终的渲染结果是不是灰色呢?

    见如下截图所示:

    黑白颜色混合结果截图

    果然是灰色,哦,原来这就是颜色混合。

    比例设置

    如果希望白色多一点,黑色少一点,怎么办呢?

    也好办,white色值后面的百分值设得大一点就好了。

    例如:

    canvas {
      background-color: color-mix(in srgb, black, white 75%)
    }

    效果:

    白色百分比增加后的效果

    上面的混合颜色设置等同于color-mix(in srgb, black 25%, white),也就是只需要设置一个色值的百分比即可,另外一个色值自动会100%补全。

    比例范围

    混合颜色的比例范围是0%~100%,可以同时100%,但是不能同时0%,否则会认为异常,如下截图示意:

    都是0%认为异常

    如果百分值计算之和大于100%,则两个色值会按比例进行分配,例如:

    canvas {
      background-color: color-mix(in srgb, black 100%, white 100%)
    }

    等同于:

    canvas {
      background-color: color-mix(in srgb, black 50%, white 50%)
    }

    如果计算之和小于100%,最终混合的颜色还要和(100% – sum)的透明色进行混合,值越小,透明度越大,这个有别于palette-mix()混合函数。

    例如,black 25%, white 25%混合结果就是灰色再减去50%的透明度,例如:

    canvas {
      background-color: color-mix(in srgb, black 25%, white 25%)
    }

    50%透明度灰色效果示意

    三、我认为的实用特性

    目前的CSS已经支持各种各有的颜色表示方法,color-mix()这个看起来很酷,但是语法比较复杂的函数,其实难有用武之地,说穿了,说是CSS颜色表示这块的特性严重过盛。

    但除了这个应用场景,我觉得只能color-mix()可以实现。

    那就是CSS颜色关键字的透明度表示。

    CSS目前有147个颜色关键字,像我这种经常写demo做演示页面的就用得比较多,因为语义好,便于大家学习。

    其中,经常会烦恼,如何表示这些关键字值的半透明颜色。

    例如,50%透明度的deepskyblue色值是多少,该如何表示?

    再很长一段时间里,我都无能为力,除了作为背景的时候,我使用 cross-fade() 可以近似模拟下。

    现在有了color-mix()函数,可谓是有了终极解决方法,例如:

    canvas {
      border: 1px solid color-mix(in srgb, deepskyblue 75%, transparent);
      background-color: color-mix(in srgb, deepskyblue 25%, transparent);
    }

    效果如下所示:

    关键字颜色半透明示意

    应用到实际开发场景

    可以不需要那么多罗列的色值了:

    色值截图

    可以直接确定几个主色,其他颜色基于此色值以及color-mix()、color()等颜色函数进行衍生,更方便日后的管理与维护。

    例如:

    :root {
      --primary: #7350C7;
      --primary-weak: color-mix(in srgb, var(--primary), white 25%);
    }

    四、color-mix语法进一步深入

    上面几趴展示的是color-mix()颜色函数最常见的用法,实际上color-mix()的语法及其规则还是相当复杂的。

    对CSS深入学习没有什么兴趣的,可以直接跳过这一段和下一段。

    in xxx都是in的什么

    以下color-mix()函数用法都是合法的:

    /* 极化颜色空间 */
    color-mix(in hsl, hsl(200 50 80), coral 80%)
    /* 极化颜色空间和色调插值方法 */
    color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)
    
    /* 矩形颜色空间 */
    color-mix(in srgb, plum, #f00)
    /* 矩形颜色空间百分比值设置 */
    color-mix(in lab, plum 60%, #f00 50%)
    
    /* 自定义颜色空间 */
    color-mix(in --swop5c, red, blue)

    而所有这些用法的第一个参数都是 in xxx,这里的xxx指的是什么?具体都有哪些值。

    长话短说。

    in的都是颜色命名空间。

    换句话说就是不同的颜色表示方法。

    例如,下图是lab类型的颜色空间示意:

    lab颜色空间示意

    去年的这篇文章“是时候介绍这几个全新的CSS颜色函数了”就有相关的介绍,不过不全,就几个具有代表性的颜色空间。

    其中:

    • 极性颜色空间包括:hsl, hwb, lch 和 oklch。
    • 矩形颜色空间包括:srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, lab, oklab, xyz, xyz-d50 和 xyz-d65。
    • 自定义的颜色空间则使用 @color-profile 规则进行定义:
      @color-profile --swop5c {
        src: url("https://example.org/SWOP2006_Coated5v2.icc");
      }

    相关内容过于专业,不展开,我也展开不开,大家脑中有个印象即可。

    五、了解hue色调差值算法

    这个可以了解下,不算复杂,在颜色动画和颜色渐变中比较受用。

    就是我们在 in xxx 之后,还可以设置hue的应用算法,英文全称:hue interpolation method。

    支持下面4种语法:

    shorter hue
    longer hue
    increasing hue
    decreasing hue

    每种语法对应的含义还挺好理解的。

    Hue色调在Web中就是个0~360度不断旋转的环,如果你对HSL色值熟悉的话。

    所以:

    shorter hue
    色调变化路径走短路线。假设θ1是起始色调位置, θ2是结束色调位置。则shorter hue的变化范围是:

    short hue范围示意

    longer hue
    色调变化路径走距离长的路线,也就是绕大圈子,色调跨度范围要更丰富。示意图:

    longer hue示意图

    increasing hue
    表示顺时针色调变化。

    short hue范围示意

    decreasing hue
    色调递减,表现为逆时针色调范围。

    longer hue示意图

    我们不妨通过一个渐变效果来看看这几个值的区别,就使用上面示意图的θ1 = 45deg, θ2 = 135deg,相关代码为:

    <canvas class="shorter"></canvas>
    <canvas class="longer"></canvas>
    <canvas class="increasing"></canvas>
    <canvas class="decreasing"></canvas>
    canvas {
      width: 100%; height: 48px;
      --θ1: hsl(45deg, 100%, 50%);
      --θ2: hsl(135deg, 100%, 50%);
      background: linear-gradient(
        to right in hsl var(--hue, shorter hue),
        var(--θ1),
        var(--θ2)
      );
    }
    .shorter {
      --hue: shorter hue;
    }
    .longer {
      --hue: longer hue;
    }
    .increasing {
      --hue: increasing hue;
    }
    .decreasing {
      --hue: decreasing hue;
    }

    此时的渐变效果如下图所示:

    hue差值渐变效果示意

    符合上面的环形示意图的表现效果。

    六、CSS真的是愈发复杂了

    是不是觉得color-mix()参数和语法还挺复杂的,跟大家讲,还有更复杂的颜色函数,那就是color()函数,居然还有from的相对语法。

    有必要搞这么多新特性嘛。

    虽说有应用场景,但是怎么讲呢,我就使用干巴巴的具体色值,什么应用不能开发呢?

    看似繁荣了CSS,实际上花里胡哨的。

    JS干CSS的事情,CSS干JS事情,HTML干JS的事情,乱了,整个晋西北去乱了。

    你看我每周介绍一个新特性,但是能在生产环境使用的机会寥寥。

    连我都如此,那广大的前端如何有学习这些新特性的动力呢。

    唉,一点吐槽。

    该学还是要学的。

    虽然现在没什么锤子用,过几年呢?还是要目光长远。

    他强任他强

    本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
    本文地址:https://www.zhangxinxu.com/wordpress/?p=11449

    (本篇完)



沪ICP备19023445号-2号
友情链接