PHP小码农

Appearance

color 颜色选择器 ​

<input type="color"> 是 HTML5 引入的颜色选择控件，允许用户通过浏览器内置的颜色选择器选择一个颜色。该控件返回标准的十六进制颜色值（#rrggbb），适用于主题设置、画板工具、产品定制等需要颜色选择的场景。

前置知识

阅读本节前，建议先了解：range 滑块输入

基础概念 ​

什么是 color 输入 ​

type="color" 输入框渲染为一个颜色方块，点击后弹出系统颜色选择器。主要特点：

  • 系统原生选择器：调用操作系统的颜色选择器，体验一致
  • 十六进制格式：提交值统一为 7 字符的十六进制颜色代码
  • 可视化选择：用户通过色板、HSL、RGB 等方式直观选择颜色
  • 移动端优化：在移动设备上提供适合触摸的颜色选择界面

浏览器支持 ​

浏览器支持情况控件外观
Chrome✅ 完整支持颜色方块 + 系统选择器
Firefox✅ 完整支持颜色方块 + 系统选择器
Safari✅ 支持（12.1+）颜色方块 + 系统选择器
Edge✅ 完整支持颜色方块 + 系统选择器
Opera✅ 完整支持颜色方块 + 系统选择器

提交值格式 ​

#rrggbb

其中 rr、gg、bb 分别为两位十六进制的红、绿、蓝分量值（00-FF）。

例如：#4a90d9 表示一种蓝色。

语法 ​

基本用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>color 颜色选择器示例</title>
</head>
<body>
    <h2>选择颜色</h2>
    <form>
        <label for="fav-color">喜欢的颜色：</label>
        <input type="color" id="fav-color" name="fav_color">
        <button type="submit">提交</button>
    </form>
</body>
</html>

设置默认颜色 ​

通过 value 属性设置默认选中的颜色，值必须为 7 位十六进制格式（含 # 号）：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>color 默认颜色示例</title>
</head>
<body>
    <h2>主题颜色设置</h2>
    <form>
        <label for="theme-color">主题颜色：</label>
        <!-- 设置默认为蓝色 -->
        <input type="color" id="theme-color" name="theme_color" value="#4a90d9">
        <button type="submit">保存</button>
    </form>
</body>
</html>

常用颜色预设 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>常用颜色预设</title>
</head>
<body>
    <h2>预设颜色</h2>
    <form>
        <label>红色：<input type="color" name="red" value="#e74c3c"></label>
        <label>绿色：<input type="color" name="green" value="#27ae60"></label>
        <label>蓝色：<input type="color" name="blue" value="#2980b9"></label>
        <label>黄色：<input type="color" name="yellow" value="#f1c40f"></label>
        <label>紫色：<input type="color" name="purple" value="#8e44ad"></label>
    </form>
</body>
</html>

详细说明 ​

实时预览颜色 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时颜色预览</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }
        .color-preview {
            width: 200px;
            height: 200px;
            border-radius: 12px;
            border: 3px solid #ddd;
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }
    </style>
</head>
<body>
    <h2>选择背景颜色</h2>
    <form>
        <label for="bg-color">背景颜色：</label>
        <input type="color" id="bg-color" name="bg_color" value="#3498db">
    </form>

    <div class="color-preview" id="preview" style="background-color: #3498db;">
        <span id="hex-text">#3498DB</span>
    </div>

    <script>
        const colorInput = document.getElementById('bg-color');
        const preview = document.getElementById('preview');
        const hexText = document.getElementById('hex-text');

        colorInput.addEventListener('input', function () {
            const color = this.value; // "#rrggbb"
            preview.style.backgroundColor = color;
            hexText.textContent = color.toUpperCase();
        });
    </script>
</body>
</html>

颜色值格式转换 ​

type="color" 只支持 #rrggbb 格式。如果需要在其他颜色格式之间转换：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>颜色格式转换</title>
</head>
<body>
    <h2>颜色格式转换工具</h2>
    <form>
        <label for="color-input">选择颜色：</label>
        <input type="color" id="color-input" name="color" value="#4a90d9">
    </form>

    <div id="formats" style="margin-top: 16px;">
        <p>HEX: <code id="hex-value">#4A90D9</code></p>
        <p>RGB: <code id="rgb-value">rgb(74, 144, 217)</code></p>
        <p>HSL: <code id="hsl-value">hsl(212, 64%, 57%)</code></p>
    </div>

    <script>
        const colorInput = document.getElementById('color-input');

        colorInput.addEventListener('input', function () {
            const hex = this.value;

            // 转换为 RGB
            const r = parseInt(hex.slice(1, 3), 16);
            const g = parseInt(hex.slice(3, 5), 16);
            const b = parseInt(hex.slice(5, 7), 16);

            // 转换为 HSL
            const rn = r / 255, gn = g / 255, bn = b / 255;
            const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);
            let h, s, l = (max + min) / 2;

            if (max === min) {
                h = s = 0;
            } else {
                const d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
                else if (max === gn) h = ((bn - rn) / d + 2) / 6;
                else h = ((rn - gn) / d + 4) / 6;
            }

            document.getElementById('hex-value').textContent = hex.toUpperCase();
            document.getElementById('rgb-value').textContent = `rgb(${r}, ${g}, ${b})`;
            document.getElementById('hsl-value').textContent =
                `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
        });
    </script>
</body>
</html>

CSS 自定义样式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>color 控件自定义样式</title>
    <style>
        /* 基础样式 */
        input[type="color"] {
            -webkit-appearance: none;
            appearance: none;
            width: 60px;
            height: 60px;
            border: 3px solid #ddd;
            border-radius: 8px;
            padding: 3px;
            cursor: pointer;
            background: none;
        }

        /* 隐藏内部颜色方块（WebKit） */
        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 5px;
        }

        /* 隐藏内部颜色方块（Firefox） */
        input[type="color"]::-moz-color-swatch {
            border: none;
            border-radius: 5px;
        }

        /* 大号颜色选择器 */
        .color-lg {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        .color-lg::-webkit-color-swatch {
            border-radius: calc(50% - 3px);
        }

        /* 圆形按钮风格 */
        .color-circle {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 3px solid #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
    <h2>自定义颜色选择器样式</h2>

    <h3>默认尺寸</h3>
    <input type="color" value="#e74c3c">

    <h3>大号圆形</h3>
    <input type="color" class="color-lg" value="#3498db">

    <h3>圆形按钮</h3>
    <div style="display: flex; gap: 12px;">
        <input type="color" class="color-circle" value="#e74c3c">
        <input type="color" class="color-circle" value="#f39c12">
        <input type="color" class="color-circle" value="#27ae60">
        <input type="color" class="color-circle" value="#2980b9">
        <input type="color" class="color-circle" value="#8e44ad">
    </div>
</body>
</html>

实战示例 ​

主题定制器 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>主题定制器</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }
        .theme-panel {
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 12px;
            background: #fff;
        }
        .control-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        .control-row label { width: 80px; font-weight: 600; }
        input[type="color"] {
            -webkit-appearance: none;
            appearance: none;
            width: 48px;
            height: 48px;
            border: 2px solid #ddd;
            border-radius: 8px;
            padding: 2px;
            cursor: pointer;
        }
        input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
        input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
        .card-demo {
            padding: 20px;
            border-radius: 12px;
            color: #fff;
            text-align: center;
            margin-top: 20px;
        }
        .card-demo h3 { margin: 0 0 8px; }
    </style>
</head>
<body>
    <h2>主题定制器</h2>
    <div class="theme-panel">
        <div class="control-row">
            <label>主色调：</label>
            <input type="color" id="primary" value="#4a90d9">
            <code id="primary-val">#4a90d9</code>
        </div>
        <div class="control-row">
            <label>文字颜色：</label>
            <input type="color" id="text-color" value="#ffffff">
            <code id="text-val">#ffffff</code>
        </div>
        <div class="control-row">
            <label>强调色：</label>
            <input type="color" id="accent" value="#f1c40f">
            <code id="accent-val">#f1c40f</code>
        </div>
    </div>

    <div class="card-demo" id="demo-card" style="background-color: #4a90d9; color: #fff;">
        <h3>卡片预览</h3>
        <p style="border: 2px solid #f1c40f; display: inline-block; padding: 8px 16px; border-radius: 20px;">
            按钮效果
        </p>
    </div>

    <script>
        const primary = document.getElementById('primary');
        const textColor = document.getElementById('text-color');
        const accent = document.getElementById('accent');
        const card = document.getElementById('demo-card');

        function updateTheme() {
            card.style.backgroundColor = primary.value;
            card.style.color = textColor.value;
            card.querySelector('p').style.borderColor = accent.value;

            document.getElementById('primary-val').textContent = primary.value;
            document.getElementById('text-val').textContent = textColor.value;
            document.getElementById('accent-val').textContent = accent.value;
        }

        primary.addEventListener('input', updateTheme);
        textColor.addEventListener('input', updateTheme);
        accent.addEventListener('input', updateTheme);
    </script>
</body>
</html>

注意事项 ​

值格式严格为 #rrggbb ​

type="color" 只接受 7 字符的十六进制格式：

html
<!-- 合法 -->
<input type="color" value="#ff0000">
<input type="color" value="#000000">
<input type="color" value="#4a90d9">

<!-- 不支持 -->
<!-- 不支持 #rgb 简写 -->
<!-- 不支持 rgb() 格式 -->
<!-- 不支持 hsl() 格式 -->
<!-- 不支持透明度（无 #rrggbbaa） -->

不支持透明度 ​

type="color" 不支持带透明度的颜色。如果需要选择透明颜色，应结合透明度滑块：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>颜色+透明度</title>
</head>
<body>
    <h2>颜色与透明度</h2>
    <form>
        <label>颜色：<input type="color" id="bg-color" value="#4a90d9"></label>
        <label>透明度：
            <input type="range" id="opacity" min="0" max="100" value="80">
            <span id="opacity-val">80%</span>
        </label>
    </form>
    <div id="preview" style="width: 200px; height: 200px; background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 20px 20px; margin-top: 16px;">
        <div id="overlay" style="width: 100%; height: 100%; background: rgba(74, 144, 217, 0.8);"></div>
    </div>

    <script>
        document.getElementById('bg-color').addEventListener('input', updateColor);
        document.getElementById('opacity').addEventListener('input', updateColor);

        function updateColor() {
            const hex = document.getElementById('bg-color').value;
            const opacity = document.getElementById('opacity').value / 100;
            const r = parseInt(hex.slice(1, 3), 16);
            const g = parseInt(hex.slice(3, 5), 16);
            const b = parseInt(hex.slice(5, 7), 16);
            document.getElementById('overlay').style.backgroundColor =
                `rgba(${r}, ${g}, ${b}, ${opacity})`;
            document.getElementById('opacity-val').textContent = `${opacity * 100}%`;
        }
    </script>
</body>
</html>

默认值如果不合法会怎样 ​

如果 value 设置了非法格式，浏览器会忽略该值，默认使用 #000000：

html
<!-- 非法值会被忽略，显示为黑色 -->
<input type="color" value="red">
<input type="color" value="#fff">       <!-- 3位简写不支持 -->
<input type="color" value="rgb(0,0,0)"> <!-- 不支持 -->

最佳实践 ​

  1. 始终设置 value：提供合理的默认颜色，避免首次打开是黑色
  2. 配合预览：在颜色选择器旁提供实时预览区域
  3. 自定义样式：通过 CSS 统一控件尺寸和圆角
  4. 配合透明度：需要透明色时，额外提供 range 滑块控制透明度
  5. 格式转换：服务端接收到的 #rrggbb 值可以直接用于 CSS 和 canvas
  6. 提供预设色板：对于常见场景，提供一组预设颜色简化选择

下一节

继续学习：file 文件上传

参考链接 ​