【前端分享】HTML5+CSS3+JS小实例：带复制功能的RGB调色器！

作为前端开发者我们在日常写代码时肯定少不了和颜色打交道。有时候为了找一个合适的背景色我们得在 Figma、PS 和浏览器插件之间反复横跳不仅繁琐还容易打断思路。既然这样不如自己动手写一个今天我们就抛开各种庞大的 UI 组件库仅用原生的HTML CSS JS来手搓一个带“一键复制”功能的 RGB 调色器。代码精简但交互体验绝对不输专业工具。一、效果展示整个界面采用了极简的卡片式设计。拖动滑块时上方的颜色预览区会丝滑过渡最贴心的是底部的色值展示区只要轻轻一点对应的 HEX 或 RGB 代码就会自动复制到剪贴板并弹出一个优雅的 Toast 提示。二、源码拆解1. HTML直观的交互结构HTML 结构非常清晰。我们把颜色预览、三个 RGB 滑块、色值展示区以及底部的 Toast 提示框做了明确的层级划分。滑块和色值展示区都是后续 JS 重点操作的对象。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title带复制功能的RGB调色器/title link relstylesheet href292.css /head body div classcolor-picker-card h2 RGB 调色器/h2 !-- 颜色预览 -- div classcolor-preview idcolor-preview/div !-- RGB 滑块 -- div classslider-group div classslider-header spanRed/span span classslider-value idr-value52/span /div input typerange idr-slider min0 max255 value52 / /div div classslider-group div classslider-header spanGreen/span span classslider-value idg-value152/span /div input typerange idg-slider min0 max255 value152 / /div div classslider-group div classslider-header spanBlue/span span classslider-value idb-value219/span /div input typerange idb-slider min0 max255 value219 / /div !-- 色值显示 -- div classcolor-values div classvalue-box idhex-box title点击复制HEX div classvalue-labelHEX/div div classvalue-text idhex-value#3498DB/div /div div classvalue-box idrgb-box title点击复制RGB div classvalue-labelRGB/div div classvalue-text idrgb-value52, 152, 219/div /div /div /div !-- 复制提示 -- div classcopy-toast idcopy-toast✅ 已复制到剪贴板/div /body /html script src292.js/script2. CSS滑块定制与微动画这个例子的视觉质感全靠 CSS 撑着。原生的input typerange样式通常很丑这里我们利用::-webkit-slider-thumb伪元素把滑块手柄重构成了圆形并分别赋予了红、绿、蓝三种颜色。底部的色值展示区.value-box也做了交互反馈平时是浅灰色背景鼠标悬停时会变成白色并加上蓝色的边框给用户明确的“可点击”暗示。另外底部的 Toast 提示框利用了transform: translateY(100px)配合transition实现了非常丝滑的弹出和收起动画。* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 20px; } .color-picker-card { background: #ffffff; padding: 35px; border-radius: 16px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); width: 100%; max-width: 400px; } h2 { margin-bottom: 25px; color: #333; font-weight: 600; text-align: center; } /* 颜色预览区域 */ .color-preview { width: 100%; height: 120px; border-radius: 12px; margin-bottom: 25px; background-color: #3498db; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); transition: background-color 0.2s ease; } /* 滑块区域 */ .slider-group { margin-bottom: 18px; } .slider-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; color: #666; } .slider-value { font-weight: 600; color: #333; } input[typerange] { width: 100%; height: 8px; -webkit-appearance: none; appearance: none; background: #eee; border-radius: 4px; outline: none; } input[typerange]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #3498db; cursor: pointer; transition: transform 0.2s; } input[typerange]::-webkit-slider-thumb:hover { transform: scale(1.2); } /* RGB 滑块颜色 */ #r-slider::-webkit-slider-thumb { background: #e74c3c; } #g-slider::-webkit-slider-thumb { background: #2ecc71; } #b-slider::-webkit-slider-thumb { background: #3498db; } /* 色值显示区域 */ .color-values { display: flex; gap: 10px; margin-top: 25px; } .value-box { flex: 1; background: #f8f9fa; padding: 12px; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.3s; border: 2px solid transparent; } .value-box:hover { border-color: #3498db; background: #fff; } .value-label { font-size: 11px; color: #888; margin-bottom: 4px; } .value-text { font-size: 16px; font-weight: 700; color: #333; font-family: Courier New, monospace; } /* 复制提示 */ .copy-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: rgba(0, 0, 0, 0.8); color: white; padding: 12px 24px; border-radius: 30px; font-size: 14px; transition: transform 0.3s ease; z-index: 1000; pointer-events: none; } .copy-toast.show { transform: translateX(-50%) translateY(0); }3. JavaScript进制转换与剪贴板 APIJS 部分是这个调色器的“大脑”这里有两个非常实用的实战技巧第一是RGB 到 HEX 的进制转换。浏览器原生只认 RGB但设计师通常更喜欢 HEX。我们通过toString(16)将十进制转为十六进制并巧妙地利用三元运算符处理了补零逻辑比如0变成00代码极其精简。第二是兼容现代的剪贴板操作。我们优先使用了较新的navigator.clipboard.writeTextAPI但为了防止在旧版浏览器或非 HTTPS 环境下报错我们在catch中做了一套降级方案动态创建一个隐藏的textarea利用古老的document.execCommand(copy)来完成复制。这种“新老兼顾”的写法才是真正能上线的工业级代码。// 获取DOM元素 const rSlider document.getElementById(r-slider); const gSlider document.getElementById(g-slider); const bSlider document.getElementById(b-slider); const rValue document.getElementById(r-value); const gValue document.getElementById(g-value); const bValue document.getElementById(b-value); const colorPreview document.getElementById(color-preview); const hexValue document.getElementById(hex-value); const rgbValue document.getElementById(rgb-value); const hexBox document.getElementById(hex-box); const rgbBox document.getElementById(rgb-box); const copyToast document.getElementById(copy-toast); // RGB 转 HEX function rgbToHex(r, g, b) { const toHex (n) { const hex n.toString(16); return hex.length 1 ? 0 hex : hex; }; return #${toHex(r)}${toHex(g)}${toHex(b)}.toUpperCase(); } // 更新UI function updateColor() { const r parseInt(rSlider.value); const g parseInt(gSlider.value); const b parseInt(bSlider.value); // 更新数值显示 rValue.textContent r; gValue.textContent g; bValue.textContent b; // 更新预览 colorPreview.style.backgroundColor rgb(${r}, ${g}, ${b}); // 更新色值 const hex rgbToHex(r, g, b); hexValue.textContent hex; rgbValue.textContent ${r}, ${g}, ${b}; } // 复制到剪贴板 function copyToClipboard(text) { navigator.clipboard.writeText(text).then(() { showToast(); }).catch(() { // 降级方案 const textarea document.createElement(textarea); textarea.value text; document.body.appendChild(textarea); textarea.select(); document.execCommand(copy); document.body.removeChild(textarea); showToast(); }); } function showToast() { copyToast.classList.add(show); setTimeout(() { copyToast.classList.remove(show); }, 2000); } // 事件绑定 - 滑块 [rSlider, gSlider, bSlider].forEach(slider { slider.addEventListener(input, updateColor); }); // 事件绑定 - 点击复制 hexBox.addEventListener(click, () { copyToClipboard(hexValue.textContent); }); rgbBox.addEventListener(click, () { copyToClipboard(rgb(${rgbValue.textContent})); }); // 初始化 updateColor();三、最后再啰嗦几句前端开发中很多看似复杂的工具拆解开来其实就是几个核心算法和 DOM 操作的组合。这个 RGB 调色器虽然小巧但它把颜色进制转换、CSS 伪元素定制以及剪贴板兼容处理完美地融合在了一起。