Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>color selecror</title>
    <link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="main.js" defer></script>
</head>
<body>
<div>
<canvas id="wrap" width="340px" height="300px"></canvas>
<canvas id="box" width="300px" height="300px"></canvas>
<canvas id="line" width="20px" height="300px"></canvas>
<ul>
    <li><span>R</span><input type="text" class="rgb" maxlength='3'
    ></li>
    <li><span>G</span><input type="text" class="rgb" maxlength='3'
    ></li>
    <li><span>B</span><input type="text" class="rgb" maxlength='3'
    ></li>
    </br>
    <li><span>H</span><input type="text" maxlength='4' class="hsl"
    ></li>
    <li><span>L</span><input type="text" maxlength='4' class="hsl"
    ></li>
    <li><span>S</span><input type="text" maxlength='4' class="hsl"
    ></li>
</ul>
    <li><span>CSS color</span><input type="text" maxlength='7' class="hex"
    ></li>
    <button>确认</button>
</div>
</body>
</html>