CSS颜色之hsl(270,100%,20%)

Created by @毛瑞

颜色选取与测试辅助工具。

1 hsl(270,100%,20%)前景色测试

1.1 白色背景

hsl(270,100%,20%) - h1 前景色测试。

hsl(270,100%,20%) - h2 前景色测试。

hsl(270,100%,20%) - h3 前景色测试。

hsl(270,100%,20%) - h4 前景色测试。

hsl(270,100%,20%) - h5 前景色测试。
hsl(270,100%,20%) - h6 前景色测试。

hsl(270,100%,20%) - p 前景色测试。

1.2 黑色背景

hsl(270,100%,20%) - h1 前景色测试。

hsl(270,100%,20%) - h2 前景色测试。

hsl(270,100%,20%) - h3 前景色测试。

hsl(270,100%,20%) - h4 前景色测试。

hsl(270,100%,20%) - h5 前景色测试。
hsl(270,100%,20%) - h6 前景色测试。

hsl(270,100%,20%) - p 前景色测试。

1.3 文本阴影效果测试

hsl(270,100%,20%) - h1 文本阴影效果测试。

hsl(270,100%,20%) - h1 文本阴影效果测试。

2 hsl(270,100%,20%)边框测试

2.1 白色背景边框测试

hsl(270,100%,20%) - 1px 白色背景边框测试。

hsl(270,100%,20%) - 3px 白色背景边框测试。

2.2 黑色背景边框测试

hsl(270,100%,20%) - 1px 黑色背景边框测试。

hsl(270,100%,20%) - 3px 黑色背景边框测试。

3 hsl(270,100%,20%)背景色测试

3.1 基本测试

hsl(270,100%,20%) - h1 背景色测试。

hsl(270,100%,20%) - h1 背景色测试。

3.2 线性渐变测试

hsl(270,100%,20%) - h1 线性渐变测试。

hsl(270,100%,20%) - h1 线性渐变测试。

3.3 雷达渐变测试

hsl(270,100%,20%) - h1 雷达渐变测试。

hsl(270,100%,20%) - h1 雷达渐变测试。

3.4 模式测试

hsl(270,100%,20%) - h1 模式测试。

hsl(270,100%,20%) - h1 模式测试。

4 hsl(270,100%,20%)亮度

4.1 亮度提升10%

4.2 亮度提升20%

4.3 亮度降低10%

4.4 亮度降低20%

5 hsl(270,100%,20%)饱和度

5.1 饱和度提升10%

5.2 饱和度提升20%

5.3 饱和度降低10%

5.4 饱和度降低20%

6 hsl(270,100%,20%)灰度

7 hsl(270,100%,20%)色相旋转

7.1 色相旋转90度

7.2 色相旋转-90度

7.3 色相旋转180度

8 hsl(270,100%,20%)近似色-analogous

9 hsl(270,100%,20%)单频色-monochromatic

10 hsl(270,100%,20%)补色-splitcomplement

11 hsl(270,100%,20%)三分色-triad

12 hsl(270,100%,20%)四分色-tetrad

13 hsl(270,100%,20%)反色-complement

14 hsl(270,100%,20%)字符串表示