用 HTML、CSS 和 JavaScript 创建颜色选择器

你是否想过仅用 HTML、CSS 和 JavaScript 来创建你自己的交互式工具？在这篇文章中，我们将创建一个简单的颜色选择器工具，让用户可以选择他们喜欢的颜色，并立即看到其十六进制和 RGB 值。

准备好你的代码编辑器，让我们开始吧！

第一步：设置你的项目

创建一个新文件夹：在你的电脑上创建一个名为 color-picker-tool 的新文件夹。
创建文件：在文件夹中创建三个文件：
- index.html
- styles.css
- script.js

第二步：构建 HTML 结构

在你的代码编辑器中打开 index.html 文件。

添加基本的 HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Picker Tool</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="color-picker">
        <input type="color" id="colorInput" value="#ff0000">
        <div class="color-info">
            <p>HEX: <span id="hexValue">#ff0000</span></p>
            <p>RGB: <span id="rgbValue">rgb(255, 0, 0)</span></p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

解释：

<!DOCTYPE html>：告知浏览器这是一个 HTML5 文档。
<html lang="en">：HTML 文档的根元素，语言设置为英文。
<head>：包含文档的元信息，例如字符集和标题。
<title>：设置网页的标题，显示在浏览器标签中。
<link rel="stylesheet" href="styles.css">：链接到 CSS 文件。
<body>：包含网页的内容。
<script src="script.js"></script>：链接到 JavaScript 文件。

第三步：使用 CSS 添加样式

在你的代码编辑器中打开 styles.css 文件。

添加 CSS 样式：

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.color-picker {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.color-info {
    margin-top: 20px;
}

p {
    margin: 5px 0;
    font-size: 16px;
}

解释：

body：设置页面的主体样式，居中内容并设置背景颜色。
.color-picker：为颜色选择器容器添加样式，使其看起来像卡片。
.color-info：为颜色信息设置边距。
p：为段落添加样式。

第四步：添加 JavaScript 功能

在你的代码编辑器中打开 script.js 文件。

添加 JavaScript 代码：

document.getElementById('colorInput').addEventListener('input', function() {
    const color = this.value;
    document.getElementById('hexValue').textContent = color;
    document.getElementById('rgbValue').textContent = hexToRgb(color);
});

function hexToRgb(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return `rgb(${r}, ${g}, ${b})`;
}