企业官网建设流程全解析

无锡做网站seo的,网站安全注意哪些问题吗,西安百度网站快速排名,如何做网站对话框在上篇文章#xff0c;我们学会了现代 CSS 颜色的基础用法。 本篇我们进入更高级的领域#xff1a;如何像设计师一样操纵颜色。 CSS 现在能做的事情#xff0c;甚至比设计软件还要强大#xff01; 1. 操纵颜色 1.1. 基础回顾 先复习一下上篇文章的内容#xff1a; :…在上篇文章我们学会了现代 CSS 颜色的基础用法。本篇我们进入更高级的领域如何像设计师一样操纵颜色。CSS 现在能做的事情甚至比设计软件还要强大1. 操纵颜色1.1. 基础回顾先复习一下上篇文章的内容:root{--primary:#ff0000;}.primary-bg-50-opacity{/* h s l 不是字母是变量 */background:hsl(fromvar(--primary)h s l / 0.5);}注意h s l这三个字母其实是变量分别存储了色相hue、饱和度saturation、亮度lightness的值。我们可以替换这些变量比如给绿色#00ff00加点蓝/* 基础绿色没有蓝色成分 */.green-with-a-touch-of-blue{/* 在蓝色通道加 25 */color:rgb(from #00ff00 r gcalc(b 25));}这就像调色板在基础的绿色中添加点“蓝色颜料”。1.2. 实用技巧掌握了基础用法我们就可以讲些实际开发中会用到的场景了。创建互补色色轮对面的颜色:root{--color-primary:#2563eb;/* 蓝色 *//* 色相加 180 度跳到对面 */--color-secondary:hsl(fromvar(--color-primary)calc(h 180)s l);}创建三色组合:root{--color-primary:#2563eb;/* 色轮上均匀分布 120 度 */--color-secondary:hsl(fromvar(--color-primary)calc(h 120)s l);--color-tertiary:hsl(fromvar(--color-primary)calc(h - 120)s l);}就像时钟12 点是主色4 点和 8 点是配色完美对称使用效果如下相对调整:root{--color-primary-base:#2563eb;/* 比基础色亮 25% */--color-primary-lighter:hsl(fromvar(--color-primary-base)h scalc(l 25));/* 比基础色暗 25% */--color-primary-darker:hsl(fromvar(--color-primary-base)h scalc(l - 25));}使用这种方法不管基础色是多亮都会相对地变亮或变暗。这就像调空调“比现在低 5 度”比“设定到 20 度”更灵活。使用效果如下2. 暗黑模式的层次感现在我们能相对调整颜色了可是究竟有什么用呢让我给你举个具体的使用场景。在浅色主题中我们可以根据阴影来区分层次但在深色背景下阴影的效果并不明显。因此在深色主题中我们希望每个层次的颜色略微变浅。借助上篇讲过的light-dark()和相对颜色调整我们便可以实现:root{--surface-base-light:hsl(240 67% 97%);--surface-base-dark:hsl(252 21% 9%);}/* 第一层基础层 */.surface-1{background:light-dark(var(--surface-base-light),var(--surface-base-dark));}/* 第二层稍微亮一点 */.surface-2{background:light-dark(var(--surface-base-light),hsl(fromvar(--surface-base-dark)h scalc(l 4)));}/* 第三层再亮一点 */.surface-3{background:light-dark(var(--surface-base-light),hsl(fromvar(--surface-base-dark)h scalc(l 8)));}想象一下深海越接近水面光线越充足。暗色模式的层次就是这个原理。使用效果如下3. 完整配色方案设计师创建配色方案时不只是简单地调整亮度还会同时微调色相和饱和度比如变亮时饱和度增加色相向冷色调偏移变暗时饱和度降低这便可以通过 CSS 来实现:root{--primary-base:hsl(221 83% 50%);/* 400: 亮度60%色相-3度饱和度5% */--primary-400:hsl(fromvar(--primary-base)calc(h - 3)calc(s 5)60%);/* 300: 亮度70%色相-6度饱和度10% */--primary-300:hsl(fromvar(--primary-base)calc(h - 6)calc(s 10)70%);/* 以此类推... */}为什么要这么麻烦呢因为只调亮度会让浅色看起来“失去活力”。就像拍照自动模式能拍但手动调整曝光、对比度、色温会更漂亮。为了让你更直观地看到变化第一排是都调整的版本第二排是未调整色相和饱和度的版本。最明显的区别在于 100、200 和 300 这几个色块当仅调整亮度值时颜色看起来失去了一些鲜艳度。4. OKLCH 更科学的配色方式4.1. 问题HSLHSL 虽然很棒但在使用时你会发现一些问题让我们看个例子.green-bg{/* 饱和度 100%亮度 50% */background:hsl(100 100% 50%);color:white;}.blue-bg{/* 同样饱和度 100%亮度 50% */background:hsl(220 100% 50%);color:white;}你会发现色和蓝色的饱和度、亮度虽然完全一样但视觉效果完全不同明显蓝色背景上的文字清晰易读对比度超过 5而绿色背景上的文字却很难看清对比度仅略高于 1。之所以会这样是因为 HSL 的“亮度”不符合人眼感知。人眼对绿色比蓝色更敏感所以同样的“50%亮度”绿色看起来更亮。4.2. 解决OKLCH而这就是 oklch() 的优势。OKLCH 是基于感知亮度设计的.consistent-green{background:oklch(0.54 0.23 261);}.consistent-blue{background:oklch(0.54 0.23 146);}使用效果如下现在不管什么颜色亮度值相同人眼看起来的亮度就相同4.3. 讲解OKLCH 的三个参数在 LCH 颜色模型中第一个值是亮度Lightness取值范围为 0 到 1。它的计算方式与 HSL 略有不同因为它基于感知亮度但概念相同即 0 是黑色1 是白色。第二个值是色度Chroma类似于饱和度0 是灰色越大越鲜艳但最大值不固定取决于亮度和色相这是 OKLCH 最麻烦的地方第三个值是色相Hue和 HSL 一样是色轮0 到 360 度区别是 0 度是洋红色HSL 里 0 度是红色OKLCH 的尴尬之处就在于色度Chroma的最大值会变/* 某些色相亮度组合0.4 已经是极限 */.max-chroma-1{background:oklch(0.6 0.4 120);}/* 但另一些组合0.4 可能太高或太低 */.max-chroma-2{background:oklch(0.8 0.4 200);/* 可能超出范围 */}就像不同口味的饮料有的最浓是“3 勺糖”有的最浓是“5 勺糖”没有统一标准。4.4. 实用技巧结合相对颜色虽然直接写 OKLCH 值很麻烦但我们可以用 HSL 定义基础色然后用 OKLCH 保持一致性.toast{--base-color:hsl(225,87%,56%);/* 用熟悉的 HSL 定义 */}[data-toastinfo]{/* 只改变色相保持亮度和色度 */--toast-color:oklch(fromvar(--base-color)l c 275);}[data-toastwarning]{--toast-color:oklch(fromvar(--base-color)l c 80);}[data-toasterror]{--toast-color:oklch(fromvar(--base-color)l c 35);}使用效果如下这样做的好处在于不同颜色的提示框边框对比度、整体饱和度感觉都很一致。5. 混合颜色有的时候我们可能需要混合两种颜色.purple{/* 红色和蓝色各占 50% */color:color-mix(in srgb,red,blue);}就像调颜料红色颜料加蓝色颜料得到紫色。目前必须定义一个颜色空间所以必须写in srgb或in oklab等未来会默认用oklab。不同颜色空间混出来的结果不一样一般推荐先试oklab再试oklch不满意就换其他的5.1. 控制混合比例默认情况下使用该功能时color-mix()每种颜色将使用 50% 的强度。当然我们也可以控制特定颜色的具体强度。/* 90% 红色 10% 蓝色 */.red-with-a-touch-of-blue{background:color-mix(in oklab,red 90%,blue);}/* 或者反过来写 */.or-like-this{background:color-mix(in oklab,red,blue 10%);}5.2. 创建半透明色有两种方法可以获得透明的值方法一让总量小于 100%/* 60% 20% 80%所以透明度是 80% */.semi-opaque{background:color-mix(in oklab,red 60%,blue 20%);}方法二混入 transparent/* 30% 的不透明红色 */.thirty-percent-opacity-red{background:color-mix(in oklch,red 30%,transparent);}不过如果只是想降低透明度还是用相对颜色更直接.better-way{background:rgb(from red r g b / 0.3);}5.3. 小技巧分段渐变/* 不用手动算中间的每个颜色color-mix 帮你搞定 */.banded-gradient{background:linear-gradient(to right,red,color-mix(in oklch,red 75%,blue),color-mix(in oklch,red 50%,blue),color-mix(in oklch,red 25%,blue),blue);}使用效果如下6. 未来更简单重复写这些代码很烦CSS 自定义函数快来了/* 定义函数 */function--lower-opacity(--color,--opacity){result:oklch(fromvar(--color)l c h /var(--opacity));}/* 使用函数 */.lower-opacity-primary{background:--lower-opacity(var(--primary),0.5);}或者定义整套色阶函数function--shade-100(--color)returns color{result:hsl(fromvar(--color)calc(h - 12)calc(s 15)95%);}function--shade-200(--color)returns color{result:hsl(fromvar(--color)calc(h - 10)calc(s 12)85%);}/* 以此类推... */.call-to-action{background:--shade-200(var(--accent));}.hero{background:--shade-800(var(--primary));color:--shade-100(var(--primary));}一次定义到处使用完美7. 总结最后总结下本篇文章的重点用 calc() 操纵颜色- 数学生成配色方案OKLCH- 基于人眼感知的颜色系统不同色相亮度一致color-mix()- 像调颜料一样混合颜色在实际使用时简单需求相对颜色 HSL需要视觉一致性OKLCH需要混合颜色color-mix()暗黑模式层次light-dark() 相对颜色本篇整理自《A pragmatic guide to modern CSS colours - part two》希望能帮助到你。我是冴羽10 年笔耕不辍专注前端领域更新了 10 系列、300 篇原创技术文章翻译过 Svelte、Solid.js、TypeScript 文档著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。欢迎围观我的“网页版朋友圈”关注我的公众号冴羽或搜索 yayujs每天分享前端知识、AI 干货。