HSL颜色表

最新推荐文章于 2024-05-09 09:04:22 发布
最新推荐文章于 2024-05-09 09:04:22 发布
阅读量8.2k 收藏 25
点赞数 7
各种工具的一个网站： http://www.tool.la/ColorHSL/

---------------------------------------------------------------------------------------------------------
这是脖主归纳的，好记多了吧：
 红（0/360）
 橙/红-黄（30）
 黄（60） 
 黄-绿（90） 
 绿（120） 
绿-青（150）
 青（180）
青-蓝（210）
 蓝（240）
蓝-紫（270）
 紫（300）
紫-红（330）
------------------------------------------------------------------------------------------------------------

下面的每一个表代表一种色调。每个色调以30度间隔从色环取得。
表中的 X轴代表饱和度(100%, 75%, 50%, 25%, 0%)。
Y轴代表亮度。50% 属于 '正常'。

0度   红

100%

75%

50%

25%

0%

100

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

88

#FFBFBF

#F7C7C7

#EFCFCF

#E7D7D7

#DFDFDF

75

#FF8080

#EF8F8F

#DF9F9F

#CFAFAF

#BFBFBF

63

#FF4040

#E75858

#CF7070

#B78787

#9F9F9F

50

#FF0000

#DF2020

#BF4040

#9F6060

#808080

38

#BF0000

#A71818

#8F3030

#784848

#606060

25

#800000

#701010

#602020

#503030

#404040

13

#400000

#380808

#301010

#281818

#202020

0

#000000

#000000

#000000

#000000

#000000

 

 

 

30度   红-黄 (=橙)

饱和度   

100%

75%

50%

25%

0%

100

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

88

#FFDFBF

#F7DFC7

#EFDFCF

#E7DFD7

#DFDFDF

75

#FFBF80

#EFBF8F

#DFBF9F

#CFBFAF

#BFBFBF

63

#FF9F40

#E79F58

#CF9F70

#B79F87

#9F9F9F

50

#FF8000

#DF8020

#BF8040

#9F8060

#808080

38

#BF6000

#A76018

#8F6030

#786048

#606060

25

#804000

#704010

#604020

#504030

#404040

13

#402000

#382008

#302010

#282018

#202020

0

#000000

#000000

#000000

#000000

#000000

 

 

 

60度   黄

饱和度   

100%

75%

50%

25%

0%

100

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

88

#FFFFBF

#F7F7C7

#EFEFCF

#E7E7D7

#DFDFDF

75

#FFFF80

#EFEF8F

#DFDF9F

#CFCFAF

#BFBFBF

63

#FFFF40

#E7E758

#CFCF70

#B7B787

#9F9F9F

50

#FFFF00

#DFDF20

#BFBF40

#9F9F60

#808080

38

#BFBF00

#A7A718

#8F8F30

#787848

#606060

25

#808000

#707010

#606020

#505030

#404040

13

#404000

#383808

#303010

#282818

#202020

0

#000000

#000000

#000000

#000000

#000000

 

 

 

90度   黄-绿

饱和度   

100%

75%

50%

25%

0%

100

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

88

#DFFFBF

#DFF7C7

#DFEFCF

#DFE7D7

#DFDFDF

75

#BFFF80

#BFEF8F

#BFDF9F

#BFCFAF

#BFBFBF

63

#9FFF40

#9FE758

#9FCF70

#9FB787

#9F9F9F

50

#80FF00

#80DF20

#80BF40

#809F60

#808080

38

#60BF00

#60A718

#608F30

#607848

#606060

25

#408000

#407010

#406020

#405030

#404040

13

#204000

#203808

#203010

#202818

#202020

0

#000000

#000000

#000000

#000000

#000000

 

 

 

120度   绿

饱和度   

100%

75%

50%

25%

0%

100

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

88

#BFFFBF

#C7F7C7

#CFEFCF

#D7E7D7

#DFDFDF

75

#80FF80

#8FEF8F

#9FDF9F

#AFCFAF

#BFBFBF

63

#40FF40

#58E758

#70CF70

#87B787

#9F9F9F

50

#00FF00

#20DF20

#40BF40

#609F60

#808080

38

#00BF00

#18A718

#308F30

#487848

#606060

25

#008000

#107010

#206020

#305030

#404040

13

#004000

#083808

#103010

#182818

#202020

0

#000000

#000000

#000000

#000000

#000000

 

 

 

150度   绿-青

饱和度   

100%

75%

50%

25%

0%

100

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

88

#BFFFDF

#C7F7DF

#CFEFDF

#D7E7DF

#DFDFDF

75

#80FFBF

#8FEFBF

#9FDFBF

#AFCFBF

#BFBFBF

63

#40FF9F

#58E79F

#70CF9F

#87B79F

#9F9F9F

50

#00FF80

#20DF80

#40BF80

#609F80

#808080

38

#00BF60

#18A760

#308F60

#487860

#606060

25

#008040

#107040

#206040

#305040

#404040

13

#004020

#083820

#103020

#182820

#202020

0

#000000

#000000

#000000

#000000

#000000

 

 

 

180度   青

饱和度   

100%

75%

50%

25%

0%

100

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

88

#BFFFFF

#C7F7F7

#CFEFEF

#D7E7E7

#DFDFDF

75

#80FFFF

#8FEFEF

#9FDFDF

#AFCFCF

#BFBFBF

63

#40FFFF

#58E7E7

#70CFCF

#87B7B7

#9F9F9F

50

#00FFFF

#20DFDF

#40BFBF

#609F9F

#808080

38

#00BFBF

#18A7A7

#308F8F

#487878

#606060

25

#008080

#107070

#206060

#305050

#404040

13

#004040

#083838

#103030

#182828

#202020

0

#000000

#000000

#000000

#000000

#000000

 

 

 

210度   青-蓝

饱和度   

100%

75%

50%

25%

0%

100

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

88

#BFDFFF

#C7DFF7

#CFDFEF

#D7DFE7

#DFDFDF

75

#80BFFF

#8FBFEF

#9FBFDF

#AFBFCF

#BFBFBF

63

#409FFF

#589FE7

#709FCF

#879FB7

#9F9F9F

50

#0080FF

#2080DF

#4080BF

#60809F

#808080

38

#0060BF

#1860A7

#30608F

#486078

#606060

25

#004080

#104070

#204060

#304050

#404040

13

#002040

#082038

#102030

#182028

#202020

0

#000000

#000000

#000000

#000000

#000000

 

 

 

240度   蓝

饱和度   

100%

75%

50%

25%

0%

100

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

88

#BFBFFF

#C7C7F7

#CFCFEF

#D7D7E7

#DFDFDF

75

#8080FF

#8F8FEF

#9F9FDF

#AFAFCF

#BFBFBF

63

#4040FF

#5858E7

#7070CF

#8787B7

#9F9F9F

50

#0000FF

#2020DF

#4040BF

#60609F

#808080

38

#0000BF

#1818A7

#30308F

#484878

#606060

25

#000080

#101070

#202060

#303050

#404040

13

#000040

#080838

#101030

#181828

#202020

0

#000000

#000000

#000000

#000000

#000000

 

 

 

270度   蓝-紫

饱和度   

100%

75%

50%

25%

0%

100

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

88

#DFBFFF

#DFC7F7

#DFCFEF

#DFD7E7

#DFDFDF

75

#BF80FF

#BF8FEF

#BF9FDF

#BFAFCF

#BFBFBF

63

#9F40FF

#9F58E7

#9F70CF

#9F87B7

#9F9F9F

50

#8000FF

#8020DF

#8040BF

#80609F

#808080

38

#6000BF

#6018A7

#60308F

#604878

#606060

25

#400080

#401070

#402060

#403050

#404040

13

#200040

#200838

#201030

#201828

#202020

0

#000000

#000000

#000000

#000000

#000000

 

 

 

300度   紫

饱和度   

100%

75%

50%

25%

0%

100

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

88

#FFBFFF

#F7C7F7

#EFCFEF

#E7D7E7

#DFDFDF

75

#FF80FF

#EF8FEF

#DF9FDF

#CFAFCF

#BFBFBF

63

#FF40FF

#E758E7

#CF70CF

#B787B7

#9F9F9F

50

#FF00FF

#DF20DF

#BF40BF

#9F609F

#808080

38

#BF00BF

#A718A7

#8F308F

#784878

#606060

25

#800080

#701070

#602060

#503050

#404040

13

#400040

#380838

#301030

#281828

#202020

0

#000000

#000000

#000000

#000000

#000000

 

 

 

330度   紫-红

饱和度

100%

75%

50%

25%

0%

100

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

#FFFFFF

88

#FFBFDF

#F7C7DF

#EFCFDF

#E7D7DF

#DFDFDF

75

#FF80BF

#EF8FBF

#DF9FBF

#CFAFBF

#BFBFBF

63

#FF409F

#E7589F

#CF709F

#B7879F

#9F9F9F

50

#FF0080

#DF2080

#BF4080

#9F6080

#808080

38

#BF0060

#A71860

#8F3060

#784860

#606060

25

#800040

#701040

#602040

#503040

#404040

13

#400020

#380820

#301020

#281820

#202020

0

#000000

#000000

#000000

#000000

#000000

 


 


hey_bei
关注
  • 7
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HSL颜色记录
ypuzhiyuan的博客
04-27 526
HSL H色调S饱和度L亮度 H ：0/360/-360红色 60黄色 120绿色 180情色 240蓝色 300洋红色 S 0%-100% 0%表示没有使用该颜色 100%饱和度最高 L ；0%最暗-100%亮度最高 除了IE浏览器。其他浏览器都兼容的很好 样例 li{ display: block; width...
HSL制作配色表
di84186的博客
04-14 402
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HSL制作配色表</title> <style> .table-wrap { width: ...
HSL和RGB 互转的 原理 分析
最新发布
PHP代码的博客
05-09 538
比如颜色想从黄色过度到红色，只需要调整色相即可，饱和度和亮度保持不变，而RGB调节相对就比较复杂且不直观。如果用圆锥表示则为双圆锥：这种表示放法相比较圆柱更加直观，最低端的只用一个点表示黑色，如果用圆柱，用了一面表示黑色，无太大意义。色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。如图所示，圆柱从低向上，表示亮度，由中轴向外表示饱和度，水平截面的圆周角表示色相。饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。明度（V），亮度（L），取0-100%。
颜色HSL（色调，饱和度，亮度）
07-28 4960
资料来源：W3C下面的每一个表代表一种色调。每个色调以30度间隔从色环取得。表中的X轴代表饱和度(100%, 75%, 50%, 25%, 0%)。Y轴代表亮度。50% 属于 '正常'。   0度   红       100% 75% 50% 25% 0% 100 #FFFFFF #FFFFFF #FFFFFF #FFFFF
各类颜色空间
lixinghuazsu的专栏
10-30 4872
来源：http://bbs.matwav.com/post/view?bid=6&id=502638&sty=3&tpg=4&age=0RGB颜色空间 RGB(red,green,blue)颜色空间最常用的用途就是显示器系统，彩色阴极射线管,彩色光栅图形的显示器 都使用R、G、B数值来驱动R、G、B 电子枪发射电子，并分别激发荧光屏上的R、G、B三种颜色的荧光粉 发出不同亮度的光线，并通过相加
【CSS3】填色表格演示hsl()
无题
02-16 1298
众所周知，hsl()是CSS颜色的一种表示方式，这里用一个填色表格演示hsl()，还挺好看的。
颜色表_53155
07-16
"颜色表_53155"是一个专为前端设计师准备的实用工具，它包含136种不同的颜色样式，帮助设计师准确地选择和匹配颜色。 这个资源主要围绕CSS（Cascading Style Sheets）的颜色属性展开，CSS是用于控制网页元素外观和...
HTML颜色代码表
05-30
此外，CSS（层叠样式表）进一步扩展了HTML的颜色控制，允许使用RGB、RGBA（带有透明度的RGB）、HSL（色调、饱和度、亮度）和HSLA（带有透明度的HSL）等更复杂的方式来指定颜色。这些颜色模式提供了更多的颜色控制和...
颜色码对照表
08-18
在HTML和CSS中，颜色可以以多种方式表示，如英文颜色名称（如"red"）、RGB（红绿蓝）值（如"rgb(255, 0, 0)"）、RGBA（增加了透明度）值、HSL（色相、饱和度、亮度）值以及十六进制颜色代码（如"#FF0000"）。...
颜色模型互转 rgb hsl lab hsv
04-30
RGB、HSL、Lab和HSV是四种常见的颜色模型，它们各有特点，适用于不同的应用场景。本项目提供了C++实现的颜色模型转换代码，方便在这些模型之间进行转换。 1. RGB（Red, Green, Blue）模型： RGB是最常见的一种颜色...
hlsq:一个小的CLI，用于为您的HLS清单添加一些颜色以及一些基本的过滤
05-22
高教质量标准 一个小的CLI，用于为您的HLS清单添加颜色并进行一些基本过滤。 此CLI的解析并不严格，因此它仍适用于grep之前的清单。 为了纪念伟大的古老 CLI而命名。 筛选 此CLI中有一些基本的过滤操作，以单个{attribute name} {op} {value} ，将来会进行扩展以接受更复杂的查询。 当前支持的操作（按值类型） 数字： > ， >= ， < ， <= ， = ， != 字符串： = ， != ， ~ ， !~和rlike 安装说明 预建二进制 访问并提取预构建的二进制文件 自制酒 $ brew install soldiermoth/tap/hlsq 从来源 假设已安装Go的最新安装： : //golang.org/doc/install $ go get github.com/soldiermoth/hlsq 脱色的特殊颜色 为了向Demu
RGB HSL颜色模式转换
01-04
rgb hsl 六个滑块，直观了解各值对颜色的影响，拖动任意滑块即时观察颜色转换效果
孟塞尔色卡对照表_munsell
02-16
孟塞尔色卡对照表_munsell
颜色对照查询表
10-22
此外，工具可能还提供了颜色的其他表示形式，如HEX（十六进制）、HSL（色相、饱和度、亮度）等，以满足不同需求。用户可以通过这个工具快速查找和比较颜色，方便他们在网页设计、UI开发或者任何需要颜色选择的场景中...
颜色对照表（四）(16进制、RGB、CMYK、HSV、中英文名)
逆境清醒的博客
06-18 5121
颜色对照表（四）(16进制、RGB、CMYK、HSV、中英文名)，非图片形式，可直接拷贝颜色代码值使用
CSS高级篇——HSL颜色
老梁的专栏
10-04 996
我们已经学习过——名称、RGB 以及 16 进制值。CSS3 又带来了另一种颜色定义方式——，三个字母分别表示色相（Hue）、饱和度（Saturation）和亮度（Lightness）。HSL 和 RGBa (“a” 表示 “alpha” 值) 适用于任何表示颜色的属性，例如color,,和box-shadow。
HSV 和 HLS颜色空间
weixin_34220963的博客
06-13 823
颜色空间 颜色空间是特定的颜色组织；它提供了将颜色分类，并以数字图像表示的方法。 RGB是红绿蓝颜色空间。你可以将其视为 3D 空间，在这种情况下是立方体，其中任何颜色都可以用 R、G 和 B 值的三维坐标表示。例如，白色具有坐标（255,255,255），其具有红色、绿色和蓝色的最大值。 RGB 颜色空间 ...
HSL颜色简易指南
cungui5726的博客
08-20 1431
The HSL color method is well-supported in modern browsers but somewhat neglected by coders, partly due to the fact that HSL is quite different from alternative CSS color models: HSL颜色方法在现代浏览器中得到了很好的...
hsl颜色阈值边缘检测
05-21
HSL是一种颜色模型，其中H代表色相（Hue），S代表饱和度（Saturation），L代表亮度（Lightness）。在进行HSL颜色阈值边缘检测时，可以使用以下步骤： 1. 将图像转换为HSL模式。 2. 根据需要检测的颜色范围，选择合适的HSL阈值。 3. 将HSL图像转换为灰度图像。 4. 对灰度图像进行边缘检测，可以使用Canny、Sobel等算子。 5. 对检测到的边缘进行后处理，如闭运算、开运算等。 以下是Python实现HSL颜色阈值边缘检测的示例代码： ```python import cv2 import numpy as np # 加载图像 img = cv2.imread('image.jpg') # 转换为HSL模式 hsl = cv2.cvtColor(img, cv2.COLOR_BGR2HLS) # 设置HSL阈值 lower = np.array([0, 50, 0]) upper = np.array([20, 255, 255]) # 进行HSL颜色阈值处理 mask = cv2.inRange(hsl, lower, upper) # 转换为灰度图像 gray = cv2.cvtColor(mask, cv2.COLOR_GRAY2BGR) # 边缘检测 edges = cv2.Canny(gray, 100, 200) # 后处理 kernel = np.ones((3, 3), np.uint8) closed = cv2.morphologyEx(edges, cv2.MORPH_CLOSE, kernel) # 显示结果 cv2.imshow('Original', img) cv2.imshow('Edges', closed) cv2.waitKey(0) cv2.destroyAllWindows() ``` 注意：在设置HSL阈值时，可以使用工具如Photoshop获取所需的颜色范围。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值