首页 web前端 css教程 CSS中最好的颜色功能?

CSS中最好的颜色功能?

Apr 12, 2025 am 10:33 AM

CSS中最好的颜色功能?

我之前已经说过,HSL是我们拥有的最佳颜色格式。我们大多数人都不喜欢可以阅读十六进制代码的David Desandro。如果需要的话,HSL(a)是色相,饱和度,轻度和α。

 HSL(120,100%,40%)
登录后复制

色调不是直觉的,但这并不是那么奇怪。您从0到360的色轮上旅行。饱和度更为明显,而0%的颜色被吸收出来,例如灰度,而100%的色调则完全丰富。轻度为50%的“正常”,当您朝着100%和0%的情况下,添加白色或黑色。我敢肯定,这不是解释它的正确科学或技术方式,而是大脑逻辑。

使用HSL仍然存在问题,Brian Kardell深入解释了这一点。我远非彩色专家,但我想我看到了布莱恩(Brian)(和亚当)在这篇文章中所说的话。假设您有三种不同的颜色,它们在HSL中的轻度完全相同。这并不意味着它们实际上都是相同的轻度。这有点奇怪,尤其是当您将这种颜色形式作为颜色系统的一部分时

好消息是,已经将颜色功能指定为CSS 4级模块,可以帮助您使用:实验室和LCH。查看亚当的示例,在该示例中,实验室中的颜色具有值,可以更准确地反映其实际发光,以了解我们的感知方式。

HSL vs Lab ::轻巧?

我们棘手的颜色民意调查中的颜色相同,但是这次我在顶部展示了实验室的相同颜色的版本。请注意,实验室的轻度价值与我们的民意调查结果有多大接近!

?颜色空间并非所有人! https://t.co/aies0amdwy pic.twitter.com/xkeguq3kzg

- Adam Argyle(@argyleink)2019年12月3日

布莱恩:

有诸如实验室和LCH之类的颜色空间,它们涉及完整的光谱,并且具有感知统一等品质。因此,如果我们希望在实际设计系统中使用出色的颜色功能,那么每个人似乎都同意,在实验室/LCH颜色空间中获得数学的支持是理想的启示功能。

在Chrome的错误票中,Tab认为这些几乎是微不足道的。

请注意,Lab()/lCH()/灰色()都可以热切地转换为我们现有的颜色基础架构;他们没有引入任何根本的新概念,它们只是指定颜色的更好方法,与我们的眼睛实际运作更加紧密相关,而不是与RGB像素的功能紧密相关。

将其转换为RGB的转换功能是一点点代码,但它只是一些指数和一些矩阵乘法,并且在规格中有充分的文献记录。

我认为,这应该是一种很好的事情。

以上是CSS中最好的颜色功能?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

使您的第一个自定义苗条过渡 使您的第一个自定义苗条过渡 Mar 15, 2025 am 11:08 AM

Svelte Transition API提供了一种使组件输入或离开文档(包括自定义Svelte Transitions)时动画组件的方法。

使用GraphQL缓存 使用GraphQL缓存 Mar 19, 2025 am 09:36 AM

如果您最近开始使用GraphQL或审查了其优点和缺点,那么您毫无疑问听到了诸如“ GraphQl不支持缓存”或

展示,不要说 展示,不要说 Mar 16, 2025 am 11:49 AM

您花多少时间为网站设计内容演示文稿?当您撰写新的博客文章或创建新页面时,您是在考虑

使用Redwood.js和Fauna构建以太坊应用 使用Redwood.js和Fauna构建以太坊应用 Mar 28, 2025 am 09:18 AM

随着最近比特币价格超过20k美元的攀升,最近打破了3万美元,我认为值得深入研究创建以太坊

用高架创建自己的野蛮人 用高架创建自己的野蛮人 Mar 18, 2025 am 11:23 AM

无论您是开发人员的哪个阶段,我们完成的任务(无论大小)都会对我们的个人和专业成长产生巨大影响。

在CI/CD上有点 在CI/CD上有点 Apr 02, 2025 pm 06:21 PM

我说的“网站”比“移动应用程序”更合适,但我喜欢Max Lynch的框架:

VUE 3 VUE 3 Apr 02, 2025 pm 06:32 PM

它的出局!恭喜Vue团队完成了完成,我知道这是一项巨大的努力,而且很长时间。所有新文档也是如此。

NPM命令是什么? NPM命令是什么? Mar 15, 2025 am 11:36 AM

NPM命令为您运行各种任务,无论是一次性或连续运行的过程,例如启动服务器或编译代码。

See all articles