效果实例:
代码:
注意: hsvToRgb 和 rgbToHsv 函数是关于颜色转换的。了解更多:HSB(HSV) 转 RGB 颜色 (js转换公式))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js色卡</title>
<style>
.box { border: 1px solid rgba(0,0,0,0.2); width: 550px; margin-top: 20px; margin-left: 20px;}
.list {width: 550px;display: flex;}
.item {height: 50px;flex: 1;}
input {width: 80px;}
</style>
</head>
<body>
<h1>js色卡</h1>
<p>要求:色卡左上角为白色,左下角为黑色,右上角为输入的颜色,右下角亮度为0输入颜色。</p>
<div class="form">
RGB---->
R:<input type="number" id="R">
G:<input type="number" id="G">
B:<input type="number" id="B">
<input type="button" value="GO