css的hue-rotate是调整了色相吗？

什么是色相？

色相就是HSL模型下的H

就是颜色的倾向

什么是HSL？

HSL，是区别于RGB的另一种颜色模型。

H代表Hue，就是色相。S代表Saturation，就是饱和度。L代表Lightness，就是亮度

这三者共同组成可以表示一个颜色

下面是调整HSL时的颜色在颜色选择器上的变化

调整色相时，色环上的颜色发生了变化

调整亮度时，色彩向左上或者右下移动

调整饱和度时，色彩向右上或者左下移动

hue-rotate和hue

那为什么说hue-rotate并不是调整了色相呢？

下面来看一个对比

上面的方块是直接调整hsl中的hue的值

而下面的方块是调整hue-rotate的值

为什么两个方块的颜色呈现出不一样的效果呢？

原因

那是因为hue-rotate并不是直接调整hue的值，而是用了另一种算法来计算结果

在这种算法中，颜色在hue-rotata 之后，亮度并不会改变，

在上面的实验中，我们也可以看到，上面的方块的亮度感受是有高有低的

而下面的方块亮度是统一的

120.0度的旋转将准确地将红色映射为绿色，绿色映射为蓝色，蓝色映射为红色。但是，此转换有一个问题，输入颜色的亮度没有保留。

这大概就是css标准所考虑到的吧

css的hue-rotate是调整了色相吗？相关推荐

镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
layui中使用的一些弹出框_WEB前端开发 Layui是一款采用自身模块规范编写的情怀型前端UI框架,本文就来为大家介绍一下layui中使用的一些弹出框,希望对大家有一定的帮助. 要实现镜像翻转,有 ...
php图片镜像翻转,利用css动画属性rotate来实现镜像翻转
要实现镜像翻转,有两种实现方法: 方法一:利用css动画属性rotate旋转来实现具体代码:.mirrorRotateLevel { transform: rotateY(180deg); /* 水 ...
rotate函数css,CSS3函数rotate()怎么使用
我们都知道,在css3里rotate()函数是能够旋转元素的,他主要是在二维空间内进行旋转操作,那么今天我们就给大家带来实例,看一下这个rotate()函数怎么使用. 如果对元素本身或者元素设置了pe ...
css如何改变视频大小,调整视频的大小取决于屏幕尺寸少用CSS
我想在我的主页的背景添加视频. 基本上我想避免当浏览器分辨率与我的视频分辨率不同时在边上有黑色条纹.调整视频的大小取决于屏幕尺寸少用CSS 要优化加载时间,我想用更少的CSS,所以我想在更短的像这样来 ...
python调整图片色相，对应ps的色相值
ps的色相值调整是相对原图的基础左右调整的,这里最后的效果是对应ps色相调整的效果,ps的ctrl+u弹出调节色相窗口 def change_color():image: PngImageFile = ...
css怎么调间距,css中字间距怎么调整
css中调整字间距的方法是,使用letter-spacing属性调整,如[letter-spacing:6px].letter-spacing属性可以增加或减少字符间的空白. 本文操作环境:windo ...
css 列宽控制,CSS 控制table 滑动及调整列宽等问题总结
本文介绍了通过css+js来控制table的x,y方向上的滚动.然后详细分析了使用table时,可能出现的width宽度与预期设定不一致的情况,最后给出了解决方案效果图三. 表格宽度上面两段代码 ...
CSS 中的 rotate
在 CSS 坐标系中,从左到右为 X 轴正方向,从上到下为 Y 轴正方向,从屏幕里到屏幕外为 Z 轴正方向. 当观察者视线方向顺着 X 轴正方向,rotateX 为正表示元素逆时针旋转,为负表示元素顺 ...
css根据手机屏幕宽度调整样式
nav{font-size:16px;}@media screen and (min-width:320px){/*当屏幕宽度大于等于320像素,nav的字体改为14,这种方法不用刷新的,自动判断的, ...

css的hue-rotate是调整了色相吗？

什么是色相？

什么是HSL？

hue-rotate和hue

原因

css的hue-rotate是调整了色相吗？相关推荐

最新文章

热门文章