实现一个支持十六进制颜色输入的表单，使用 hexdec 转换

gitbox 2025-05-26

在 Web 开发中，颜色是前端设计的重要组成部分。很多设计工具和用户界面允许通过十六进制（Hex）格式来表示颜色，如 #FF5733。为了提高表单的用户友好性和功能性，我们可以通过 PHP 的 hexdec 函数，将用户输入的十六进制颜色值转换为 RGB 格式，方便进一步处理，比如存储、显示或与前端交互。

本文将通过一个简单的示例，介绍如何创建一个支持十六进制颜色输入的表单，并在提交后通过 PHP 实现颜色转换。

创建颜色输入表单

我们首先需要一个 HTML 表单来让用户输入十六进制颜色代码：

<form method="post" action="https://gitbox.net/convert_color.php">
    <label for="hexColor">请输入十六进制颜色（例如 #FF5733）:</label>
    <input type="text" id="hexColor" name="hexColor" pattern="^#?[A-Fa-f0-9]{6}$" required>
    <button type="submit">转换</button>
</form>

这个表单允许用户输入形如 #FF5733 或 FF5733 的颜色代码，并提交到处理脚本 convert_color.php。

使用 PHP 的 hexdec 函数转换颜色

提交表单后，我们在 convert_color.php 中使用 hexdec 函数将十六进制颜色代码转换为 RGB。以下是完整的处理逻辑：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $hex = $_POST['hexColor'] ?? '';
    $hex = ltrim($hex, '#'); // 移除可能的 #

    if (preg_match('/^[A-Fa-f0-9]{6}$/', $hex)) {
        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));

        echo "<p>原始十六进制颜色: #$hex</p>";
        echo "<p>转换后的 RGB 颜色: rgb($r, $g, $b)</p>";
        echo "<div style='width:100px;height:100px;background-color:rgb($r,$g,$b);'></div>";
    } else {
        echo "<p>请输入有效的 6 位十六进制颜色代码。</p>";
    }
}
?>

这段代码会：

获取并清洗用户输入的十六进制颜色；
使用 hexdec 将每两位十六进制数转换为十进制的 RGB 值；
输出转换结果并展示相应颜色块。

为什么选择 hexdec？

hexdec 是 PHP 提供的一个非常直接的函数，用于将十六进制字符串转换为十进制整数。它使用简单，不依赖任何扩展，并且在处理颜色值这种典型的六位十六进制字符串时非常高效。

相比之下，虽然我们也可以使用 base_convert 或手动实现转换逻辑，但 hexdec 的语义更清晰、效率更高，因此是颜色处理的首选工具。

小结

通过结合 HTML 表单和 PHP 的 hexdec 函数，我们可以轻松实现一个支持十六进制颜色输入并转换为 RGB 的功能模块。这不仅能提高用户交互体验，也为后续的颜色处理和前端展示提供了便利。

这种方案适用于多种场景，如颜色主题自定义、设计工具界面、CMS 配置面板等，非常值得在项目中灵活运用。