RGB和HSL(也叫HSB/HSV)是两种色彩空间,即:红,绿,蓝(Red,Green,Blue)和色调,饱和度,亮度(Hue,Saturation,Lightness或Brightness或Value),前者适用于机器采样,目前的显示器颜色即由这三种基色构成,而后者更符合人类的直观感觉,比如人一般表达一个颜色会这样说:有点浓的暗红色。而不会说红色占多少,绿色占多少,蓝色占多少。
在Windows的标准颜色对话框中均包含这两种表示方法。RGB的取值范围在0~255之间,HSL的取值在0~1之间,但Windows系统处理成了0~240取值范围,各种不同环境下的取值参照附表。另外还有CMY/CMYK颜色空间,常用于印刷行业,以后再将RGB-CMY-CMYK的转换算法贴出。
/**
*
* @param {Number} H 色相 [0,360)
* @param {Number} S 饱和度 [0,1]
* @param {Number} L 亮度 [0,1]
* @param {Boolean} stringMode 是否返回字符串模式
*/
function HSL2RGB(H = 0, S = 0, L = 0, stringMode = false) {
const C = (1 - Math.abs(2 * L - 1)) * S
const X = C * (1 - Math.abs(((H / 60) % 2) - 1))
const m = L - C / 2
const vRGB = []
if (H >= 0 && H < 60) {
vRGB.push(C, X, 0)
} else if (H >= 60 && H < 120) {
vRGB.push(X, C, 0)
} else if (H >= 120 && H < 180) {
vRGB.push(0, C, X)
} else if (H >= 180 && H < 240) {
vRGB.push(0, X, C)
} else if (H >= 240 && H < 300) {
vRGB.push(X, 0, C)
} else if (H >= 300 && H < 360) {
vRGB.push(C, 0, X)
}
const [vR, vG, vB] = vRGB
const R = 255 * (vR + m)
const G = 255 * (vG + m)
const B = 255 * (vB + m)
if (stringMode) {
return `rgb(${R},${G},${B})`
}
return { R, G, B }
}
/**
* @description rgb转化为hsl
* @param {Number} R [0,255]
* @param {Number} G [0,255]
* @param {Number} B [0,255]
* @param {Boolean} stringMode 是否返回字符串模式
*/
function RGB2HSL(R = 0, G = 0, B = 0, stringMode = false) {
const _R = R / 255;
const _G = G / 255;
const _B = B / 255;
const Cmax = Math.max(_R, _G, _B);
const Cmin = Math.min(_R, _G, _B);
const V = Cmax - Cmin;
let H = 0;
if (V === 0) {
H = 0;
} else if (Cmax === _R) {
H = 60 * (((_G - _B) / V) % 6);
} else if (Cmax === _G) {
H = 60 * ((_B - _R) / V + 2);
} else if (Cmax === _B) {
H = 60 * ((_R - _G) / V + 4);
}
H = Math.floor(backCycle(H, 360));
const L = numberFixed((Cmax + Cmin) / 2);
const S = V === 0 ? 0 : numberFixed(V / (1 - Math.abs(2 * L - 1)));
if (stringMode) {
return `hsl(${H},${numberFixed(100 * S)}%,${numberFixed(100 * L)}%)`;
}
return { H, S, L };
}
// utils
function backCycle(num, cycle) {
let index = num % cycle;
if (index < 0) {
index += cycle;
}
return index;
}
function numberFixed(num = 0, count = 3) {
const power = Math.pow(10, count);
return Math.floor(num * power) / power;
}
所有的颜色都可以由红、绿、蓝三原色调配而成。 CSS中用8位表示一个颜色,那么可以有28即256种颜色,所以总共可以表示256*256*256种颜色。CSS纵有多种颜色表示: 十六进制表示法、rgb表示法、hsl色相表示法、hsla色相表示法
在CSS3中可以使用RGBA和HSLA两种色彩模式,这两个都可以用来设置颜色以及指定透明度。RGBA无法直观看出是什么颜色。并且如果想要对颜色进行调整也无法简单做到
我们大多数人没有意识到它是如何工作的,只有少数人可能会注意到。虽然颜色的影响可能被高估了,但是我们可以在某些情况下明显地感觉到它(想象你自己在一个暗红色的房间里或者在天空颜色的房间里)。
细找问题,找出来了,我在 ::after 内写的是 border-bottom ,也就是说,在纵向压缩的时候,压缩的是 border。换成用 background-color ,也就是用 after 的主体。
某些网站和服务允许您通过上传图片,更改背景颜色或设计的其他方面来自定义您的个人资料。作为客户,此个性化将Web应用程序转换为您存储数据的小窝。
网页使用到的色彩标示方法中,从古早时期大家都在用的16进位码(#000000)、RGB色值标示、HSL色彩标示,其中网页设计师最常使用的16进位色码标示法,而16进位码又是如何计算色彩的呢?
近来,各大平台的操作系统纷纷引入 Dark Mode 深色模式,包括 Windows、MacOS 以及 Android 甚至 iOS 13 也将引入该模式。深色模式引入的同时,同时允许我们基于用户的偏好设计特定的样式
以下是DIVCSS5整理常用的HTML颜色表,参考,直接找到自己需要的html颜色值拷贝颜色值代码即可使用(除了以下颜色表外,你还可以使用PS软件获取颜色值:http://www.divcss5.com/html/h635.shtml)。
不知道大家觉得如何,舒适的颜色,很多人都会喜欢,但主要还是看实用性。今天给大家分享中国传统颜色有那些?中国传统的颜色之美,美如其名:蔚蓝、竹青、绯红、月白、石青、紫檀、霜色、黛绿、胭脂、藕荷、豆绿、宝蓝、秋香、玄色、牙色、黄栌、靛蓝、明黄、朱砂、石绿
假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了,就可以直接给定颜色的名称。CSS称这些有名称的颜色为命名颜色。命名颜色的关键字有限,css定义了17个标准色:浅绿色,黑色,蓝色
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!