實現一個支持十六進制顏色輸入的表單，使用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 配置面板等，非常值得在項目中靈活運用。