• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Colors</title>
7
    <style>
8
        body {
9
            background-image: url("/examples/images/img_check_pattern.png");
10
            color: white;
11
        }
12
        #header_01 {background-color: hsl(0, 0%, 50%);}
13
        #header_02 {background-color: hsl(0, 20%, 50%);}
14
        #header_03 {background-color: hsl(0, 40%, 50%);}
15
        #header_04 {background-color: hsl(0, 60%, 50%);}
16
        #header_05 {background-color: hsl(0, 80%, 50%);}
17
        #header_06 {background-color: hsl(0, 100%, 50%);}
18
    </style>
19
</head>
20
​
21
<body>
22
​
23
    <h1 id="header_01">HSL 색상값에서 채도 값을 변경 : 채도 0%</h1>
24
    <h1 id="header_02">HSL 색상값에서 채도 값을 변경 : 채도 20%</h1>
25
    <h1 id="header_03">HSL 색상값에서 채도 값을 변경 : 채도 40%</h1>
26
    <h1 id="header_04">HSL 색상값에서 채도 값을 변경 : 채도 60%</h1>
27
    <h1 id="header_05">HSL 색상값에서 채도 값을 변경 : 채도 80%</h1>
28
    <h1 id="header_06">HSL 색상값에서 채도 값을 변경 : 채도 100%</h1>
29
​
30
</body>
31
​
32
</html>