hsl色彩应用演示

马黑黑

马黑黑

hsl，h = hue，色相（0~360）；s = saturation，饱和度（0%~100%），l = lightness，亮度（0%~100%）。正常颜色的饱和度为 100%，亮度为 50%。下面代码展示色轮上6种代表性颜色与角度的关系：

1. <style>
   
2. .mama {
   
3.         margin: 15px auto;
   
4.         width: 400px;
   
5.         height: 400px;
   
6.         position: absolute;
   
7. }
   
8. .son {
   
9.         position: absolute;
   
10.         left: calc(50% - 30px);
    
11.         top: 40px;
    
12.         width: 60px;
    
13.         height: 160px;
    
14.         border-radius: 10% 90%;
    
15.         border: 1px solid gray;
    
16.         transform-origin: 50% 100%;
    
17.         writing-mode: vertical-rl;
    
18.         text-orientation: upright;
    
19.         color: black;
    
20.         display: grid;
    
21.         place-items: center;
    
22.         background: var(--bg);
    
23. }
    
24. .son:nth-of-type(1) { --bg: hsl(60,100%,50%); transform: rotate(60deg) translateY(-15px); }
    
25. .son:nth-of-type(2) { --bg: hsl(120,100%,50%); transform: rotate(120deg) translateY(-15px); }
    
26. .son:nth-of-type(3) { --bg: hsl(180,100%,50%); transform: rotate(180deg) translateY(-15px); }
    
27. .son:nth-of-type(4) { --bg: hsl(240,100%,50%); transform: rotate(240deg) translateY(-15px); color: silver; }
    
28. .son:nth-of-type(5) { --bg: hsl(300,100%,50%); transform: rotate(300deg) translateY(-15px); }
    
29. .son:nth-of-type(6) { --bg: hsl(360,100%,50%); transform: rotate(360deg) translateY(-15px); }
    
30. </style>
    
31. 
    
32. <div class="mama">
    
33.         <div class="son">黄 60</div>
    
34.         <div class="son">绿 120</div>
    
35.         <div class="son">青 180</div>
    
36.         <div class="son">蓝 240</div>
    
37.         <div class="son">品红 300</div>
    
38.         <div class="son">红 360</div>
    
39. </div>

复制代码

红影

这个有意思，选装的度数和色相变化是相同的呢

红影

一楼的更巧妙，直接利用60的倍数就生成图形颜色了，更简便。到底是js更强大啊

南无月

这个怪好看的。看到就是旋转的。。

马黑黑

南无月 发表于 2024-5-28 18:04
这个怪好看的。看到就是旋转的。。

做成帖子了

南无月

马黑黑 发表于 2024-5-28 18:07
做成帖子了

白老师好速度，我去看看。。

南无月

二楼代码里每个页片上都有角度和说明，看着更明白了。

马黑黑

南无月 发表于 2024-5-28 18:58
白老师好速度，我去看看。。

马黑黑

南无月 发表于 2024-5-28 18:59
二楼代码里每个页片上都有角度和说明，看着更明白了。

是的吧

南无月

马黑黑 发表于 2024-5-28 19:28
是的吧

必须的呀，蓝色叶片还另外用了银色，是怕看不清吧。。

南无月

马黑黑 发表于 2024-5-28 19:27

一个字：真是美呀。。

马黑黑

南无月 发表于 2024-5-28 19:42
一个字：真是美呀。。

一二三四五六七八九十

马黑黑

南无月 发表于 2024-5-28 19:41
必须的呀，蓝色叶片还另外用了银色，是怕看不清吧。。

前景色与背景色要基本配套

南无月

马黑黑 发表于 2024-5-28 20:22
一二三四五六七八九十

看着好多字，其实重要的就都一个字的

南无月

马黑黑 发表于 2024-5-28 20:23
前景色与背景色要基本配套

黑色百搭。。白色也百搭。。

马黑黑

南无月 发表于 2024-5-29 17:51
黑色百搭。。白色也百搭。。

反正不白搭

马黑黑

南无月 发表于 2024-5-29 17:51
看着好多字，其实重要的就都一个字的

差不多的吧

南无月

马黑黑 发表于 2024-5-29 18:03
反正不白搭

搭得这么好不能白搭。。
搭色大师就是你

南无月

马黑黑 发表于 2024-5-29 18:12
差不多的吧

对，十个跟一个差不多。