如何使用HTML、CSS和JavaScript创建一个颜色选择器

我们可以在调色板上轻松创建一个简单的颜色选择器，使用的是JavaScript。颜色选择器的主要颜色为RGB，即红色、绿色和蓝色。通过混合这些颜色，我们可以形成任何我们想要的颜色。

在本文中，我们将学习如何从用户那里获取RGB值，并使用RGB颜色属性借助CSS来形成不同的颜色。RGB的颜色强度范围从0到255，其中0是最低强度，255是最高强度。

当3个颜色的强度均为255时，形成的是白色。当3个颜色的强度均为0时，形成的是黑色。

示例1

下面的示例中，我们使用基本的HTML、CSS和JavaScript创建一个颜色选择器。

# index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <link href="https://fonts.googleapis.com/css2?family=Itim&display=swap"rel="stylesheet">
</head>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <div class="neumorphism-3"></div>
   <div class="input">
      <input type="number" id="red">
      <input type="number" id="green">
      <input type="number" id="blue">
   </div>
   <script src="script.js"></script>
</body>
</html>

# styles.css

.neumorphism-3 {
   width: 320px;
   height: 300px;
   box-shadow: -3px -3px 7px #e9e9e9a9,
      3px 3px 7px #e9e9e9a9;
}
.neumorphism-3:hover {
   top: 30px;
   box-shadow: -3px -3px 7px #999999a9,
      -3px -3px 12px #e9e9e9a9,
      3px 3px 7px #999999a9,
      -3px -3px 12px #e9e9e9a9;
   animation: uplift 0.1s 1 linear;
}
.neumorphism-3:not( :hover) {
   animation: downlift 0.1s 1 linear;
   top: 40px;
}
div.input {
   top: 450px;
   left: 550px;
}
div.input input {
   height: 30px;
   width: 100px;
   font-size: 30px;
   color: seashell;
   text-align: center;
   opacity: 0.7;
   border: none;
   border-radius: 4px;
}
#red {
   margin-top: 40px;
   background-color: red;
}
#green {
   background-color: green;
}
#blue {
   background-color: blue;
}

# script.js

let red = document.getElementById('red');
let green = document.getElementById('green');
let blue = document.getElementById('blue');
let box = document.querySelector('div.neumorphism-3');
let r = 0, g = 0, b = 0;
red.addEventListener("keyup", function (event) {
   r = red.value;
   if (!r)
      r = 0;
   box.style.backgroundColor = `rgb( ${r},$ {g},  ${b})`; }); green.addEventListener("keyup", function (event) { g = green.value; if (!g) g = 0; box.style.backgroundColor = `rgb($ {r},  ${g},$ {b})`;
});
blue.addEventListener("keyup", function (event) {
   b = blue.value;
   if (!b)
      b = 0;
   box.style.backgroundColor = `rgb( ${r},$ {g}, ${b})`;
});