自定义颜色取色器
? 寫了三個版本自己看吧
<!DOCTYPE html> <html><head><title>Color Plus</title> </head> <style type="text/css"> * {box-sizing: border-box; }.color-picker {width: 330px;height: 442px;padding: 15px;border-radius: 5px;box-shadow: 0 10px 40px rgba(10, 20, 70, 0.25);background-color: #ffffff; }.sat-lightness-picker {position: relative;height: 300px;width: 300px;-webkit-user-drag: none;user-select: none; }.white-overlay, .black-overlay, .color-underlay {top: 0;left: 0;position: absolute;width: 100%;height: 100%; }.white-overlay {background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);z-index: 1; }.black-overlay {background: linear-gradient(to bottom, transparent 0%, #000 100%);z-index: 2; }.color-underlay {background: cyan;z-index: 0; }.sl-handle {position: absolute;width: 12px;height: 12px;margin-left: -6px;margin-top: -6px;background-color: transparent;z-index: 4;border-radius: 50%;transform: translate3d(300px, 0, 0);box-shadow: 0 0 0 3px white, 0 1px 3px 3px rgba(5, 10, 70, 0.33); }.sl-handle:hover {cursor: pointer; }.sl-handle:active {transform: scale(1.15); }.hue-picker {height: 15px;width: 100%;margin-top: 15px;background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);box-shadow: inset 0 0 0 3px white, 0 1px 4px rgba(5, 10, 70, 0.25); }.transparency {width: 99%;margin-left: 2px;background: transparent;/*background: url(king.jpg);*/box-shadow: inset 0 0 0 2px white, 0px 0px 9px rgba(5, 10, 70, 0.26);height: 13px;border-radius: 20px; }.hue-picker input[type="range"] {-webkit-appearance: none;width: 100%;margin: 0;background: transparent; }.transparency input[type="range"] {position: relative;width: 295px;height: 9px;border-radius: 20px;top: -6px; }.hue-picker input[type="range"]:focus {outline: none; }.hue-picker input[type="range"]::-webkit-slider-runnable-track {background: transparent;border: none; }.hue-picker input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;width: 12px;height: 12px;margin-bottom: 3px;background-color: transparent;border-radius: 50%;box-shadow: 0 0 0 3px white, 0 1px 3px 3px rgba(5, 10, 70, 0.33); }.transparency input[type="range"]::-webkit-slider-thumb {margin-bottom: 1px; }.color-output {display: flex;margin-top: 15px;background-image: url(king.jpg);background-position: 3px 4px; }.color-output input {box-shadow: inset 0 0 0 3px white, 0 1px 4px rgba(5, 10, 70, 0.1);border: none;width: 190px;font-size: 16px;font-family: "Menlo", monospace;padding: 0 15px;outline: none;background-color: rgb(255, 255, 255); }.selected-color {width: 100%;height: 44px;box-shadow: inset 0 0 0 3px #f9f9f9, 0 1px 4px rgba(5, 10, 70, 0.1);background-color: cyan; } </style><body id="colorSample"><div class="color-picker" id="colorPicker"><div class="sat-lightness-picker" id="slPicker" draggable="false"><div class="sl-handle" id="slInput" draggable="false"></div><div class="white-overlay"></div><div class="black-overlay"></div><div id="hueUnderlay" class="color-underlay"></div></div><div class="hue-picker"><input id="hueRotation" min="0" max="360" value="180" type="range"></div><div class="hue-picker transparency"><input id="transparency" min="0" max="360" value="360" type="range"></div><div class="color-output"><div class="selected-color" id="selectedColor"></div><input type="text" id="hexInput" disabled="disabled"></div></div> </body> <script type="text/javascript"> const hueRotationInput = document.getElementById('hueRotation'); const hueUnderlay = document.getElementById('hueUnderlay'); const transparency = document.getElementById('transparency'); const slInput = document.getElementById('slInput'); const slPicker = document.getElementById('slPicker'); const selectedColor = document.getElementById('selectedColor'); const hexInput = document.getElementById('hexInput');const PICKER_HEIGHT = 300; const PICKER_WIDTH = 300; let currentHue = 0.5; let currentSaturation = 1; let currentValue = 0.5; let mouseDown = false; var r, g, b, h = 1; const rgbToHex = (r, g, b) => {return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); }function hexToR(h) {return parseInt((cutHex(h)).substring(0, 2), 16) }function hexToG(h) {return parseInt((cutHex(h)).substring(2, 4), 16) }function hexToB(h) {return parseInt((cutHex(h)).substring(4, 6), 16) }function cutHex(h) {return h.charAt(0) == "#" ? h.substring(1, 7) : h }const hsvToRgb = (h, s, v) => {var r, g, b;var i = Math.floor(h * 6);var f = h * 6 - i;var p = v * (1 - s);var q = v * (1 - f * s);var t = v * (1 - (1 - f) * s);switch (i % 6) {case 0:r = v, g = t, b = p;break;case 1:r = q, g = v, b = p;break;case 2:r = p, g = v, b = t;break;case 3:r = p, g = q, b = v;break;case 4:r = t, g = p, b = v;break;case 5:r = v, g = p, b = q;break;}return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)]; }function hexToRgba(hex, opacity) {return "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")"; }function rgbaToHex(rgba) {var bg = rgba.match(/^rgb\((\d+),\s*(\d+),\s*(\d+),\s*(\d?(\d|(\.[1-9]{1,2})))\)$/);function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}return ("#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3])).toUpperCase(); }const getCurrentColor = () => {return hsvToRgb(currentHue, currentSaturation, currentValue); }const updateColor = () => {h = (transparency.value / 360).toFixed(2);selectedColor.setAttribute('style', `background-color: rgba(${getCurrentColor()},${h})`);// hexInput.value = rgbToHex(...getCurrentColor()); /*Hex寫法*/// hexInput.value = "rgb("+(getCurrentColor())+","+h+")"; /*Rgb寫法*/transparency.value / 360 == 1 ? hexInput.value = rgbToHex(...getCurrentColor()) : hexInput.value = "rgba(" + (getCurrentColor()) + "," + h + ")";// hexInput.value = selectedColor.style.backgroundColor;transparency.setAttribute('style', `background:linear-gradient(to right, transparent 0%, rgb(${getCurrentColor()}) 100%`); }hueRotationInput.oninput = () => {currentHue = (hueRotationInput.value / 360);hueUnderlay.setAttribute('style', `background: rgb(${hsvToRgb(currentHue, 1, 1)})`); //布置取色板transparency.setAttribute('style', `background:linear-gradient(to right, transparent 0%, rgb(${hsvToRgb(currentHue, 1, 1)}) 100%`);updateColor(); } transparency.oninput = () => {updateColor();}const bindSlInputEvents = () => {const offsetX = slPicker.offsetLeft;const offsetY = slPicker.offsetTop;const setSlPosition = (xPos, yPos, setting) => {let x = xPos - offsetX;let y = yPos - offsetY;if (x <= 0) {x = 0;}if (x >= PICKER_WIDTH) {x = PICKER_WIDTH;}if (y <= 0) {y = 0}if (y >= PICKER_HEIGHT) {y = PICKER_HEIGHT;}currentSaturation = (x / PICKER_WIDTH);currentValue = (1 - (y / PICKER_HEIGHT));slInput.setAttribute('style', `transform: translate3d(${x}px, ${y}px, 1px)`);}const dragSlInput = e => {if (mouseDown) {setSlPosition(e.pageX, e.pageY);updateColor();}}document.onmousemove = dragSlInput;slPicker.onmouseup = () => {mouseDown = false;}document.onmouseup = () => {mouseDown = false;}//點擊取色面板slPicker.onmousedown = e => {mouseDown = true;setSlPosition(e.pageX, e.pageY);updateColor();}updateColor(); }window.onresize = bindSlInputEvents;bindSlInputEvents();function setBgColorById(id, sColor) {var elems;if (document.getElementById) {if (elems = document.getElementById(id)) {if (elems.style) elems.style.backgroundColor = sColor;}} } </script></html>?
<!DOCTYPE html> <html><head><title>Color Plus</title> </head> <style type="text/css"> * {box-sizing: border-box; }.color-picker {width: 330px;height: 442px;padding: 15px;border-radius: 5px;box-shadow: 0 10px 40px rgba(10, 20, 70, 0.25);background-color: #ffffff; }.sat-lightness-picker {position: relative;height: 300px;width: 300px;-webkit-user-drag: none;user-select: none; }.white-overlay, .black-overlay, .color-underlay {top: 0;left: 0;position: absolute;width: 100%;height: 100%; }.white-overlay {background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);z-index: 1; }.black-overlay {background: linear-gradient(to bottom, transparent 0%, #000 100%);z-index: 2; }.color-underlay {background: cyan;z-index: 0; }.sl-handle {position: absolute;width: 12px;height: 12px;margin-left: -6px;margin-top: -6px;background-color: transparent;z-index: 4;border-radius: 50%;transform: translate3d(300px, 0, 0);box-shadow: 0 0 0 3px white, 0 1px 3px 3px rgba(5, 10, 70, 0.33); }.sl-handle:hover {cursor: pointer; }.sl-handle:active {transform: scale(1.15); }.hue-picker {height: 15px;width: 100%;margin-top: 15px;background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);box-shadow: inset 0 0 0 3px white, 0 1px 4px rgba(5, 10, 70, 0.25); }.transparency {width: 99%;margin-left: 2px;background:transparent;/*background: url(king.jpg);*/box-shadow: inset 0 0 0 2px white, 0px 0px 9px rgba(5, 10, 70, 0.26);height: 13px;border-radius: 20px; }.hue-picker input[type="range"] {-webkit-appearance: none;width: 100%;margin: 0;background: transparent; }.transparency input[type="range"] {position: relative;width: 295px;height: 9px;border-radius: 20px;top:-6px; }.hue-picker input[type="range"]:focus {outline: none; }.hue-picker input[type="range"]::-webkit-slider-runnable-track {background: transparent;border: none; }.hue-picker input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;width: 12px;height: 12px;margin-bottom: 3px;background-color: transparent;border-radius: 50%;box-shadow: 0 0 0 3px white, 0 1px 3px 3px rgba(5, 10, 70, 0.33); } .transparency input[type="range"]::-webkit-slider-thumb {margin-bottom: 1px; } .color-output {display: flex;margin-top: 15px;background-image: url(king.jpg);background-position: 3px 4px; }.color-output input {box-shadow: inset 0 0 0 3px white, 0 1px 4px rgba(5, 10, 70, 0.1);border: none;width: 190px;font-size: 16px;font-family: "Menlo", monospace;padding: 0 15px;outline: none;background-color: rgb(255, 255, 255); }.selected-color {width: 100%;height: 44px;box-shadow: inset 0 0 0 3px #f9f9f9, 0 1px 4px rgba(5, 10, 70, 0.1);background-color: cyan; } </style><body id="colorSample"><div class="color-picker" id="colorPicker"><div class="sat-lightness-picker" id="slPicker" draggable="false"><div class="sl-handle" id="slInput" draggable="false"></div><div class="white-overlay"></div><div class="black-overlay"></div><div id="hueUnderlay" class="color-underlay"></div></div><div class="hue-picker"><input id="hueRotation" min="0" max="360" value="180" type="range"></div><div class="hue-picker transparency"><input id="transparency" min="0" max="360" value="360" type="range"></div><div class="color-output"><div class="selected-color" id="selectedColor"></div><input type="text" id="hexInput" disabled="disabled"></div></div> </body> <script type="text/javascript"> const hueRotationInput = document.getElementById('hueRotation'); const hueUnderlay = document.getElementById('hueUnderlay'); const transparency = document.getElementById('transparency'); const slInput = document.getElementById('slInput'); const slPicker = document.getElementById('slPicker'); const selectedColor = document.getElementById('selectedColor'); const hexInput = document.getElementById('hexInput');const PICKER_HEIGHT = 300; const PICKER_WIDTH = 300; let currentHue = 0.5; let currentSaturation = 1; let currentValue = 0.5; let mouseDown = false; var r,g,b,h=1; const rgbToHex = (r, g, b) => {return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); }function aToHex(num){return Math.round(num*255).toString(16); } const rgbaTohex =(r,g,b,a) =>{return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + Math.round(a*255).toString(16); } function hexToR(h) {return parseInt((cutHex(h)).substring(0, 2), 16) }function hexToG(h) {return parseInt((cutHex(h)).substring(2, 4), 16) }function hexToB(h) {return parseInt((cutHex(h)).substring(4, 6), 16) }function cutHex(h) {return h.charAt(0) == "#" ? h.substring(1, 7) : h }function hexToRgba(hex, opacity) { return "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + "," + opacity + ")"; }const hsvToRgb = (h, s, v) => {var r, g, b;var i = Math.floor(h * 6);var f = h * 6 - i;var p = v * (1 - s);var q = v * (1 - f * s);var t = v * (1 - (1 - f) * s);switch (i % 6) {case 0:r = v, g = t, b = p;break;case 1:r = q, g = v, b = p;break;case 2:r = p, g = v, b = t;break;case 3:r = p, g = q, b = v;break;case 4:r = t, g = p, b = v;break;case 5:r = v, g = p, b = q;break;}return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)]; }const getCurrentColor = () => {return hsvToRgb(currentHue, currentSaturation, currentValue); }const updateColor = () => {h=(transparency.value/360).toFixed(2);selectedColor.setAttribute('style', `background-color: rgba(${getCurrentColor()},${h})`);// hexInput.value = rgbToHex(...getCurrentColor()); /*Hex寫法*/// hexInput.value = "rgb("+(getCurrentColor())+","+h+")"; /*Rgb寫法*/// transparency.value/360==1?hexInput.value = rgbToHex(...getCurrentColor()) : hexInput.value = "rgba("+(getCurrentColor())+","+h+")";h=aToHex(h);if(h=="ff") h="";hexInput.value = rgbToHex(...getCurrentColor())+h;transparency.setAttribute('style', `background:linear-gradient(to right, transparent 0%, rgb(${getCurrentColor()}) 100%`); }hueRotationInput.oninput = () => {currentHue = (hueRotationInput.value / 360);hueUnderlay.setAttribute('style', `background: rgb(${hsvToRgb(currentHue, 1, 1)})`);//布置取色板transparency.setAttribute('style', `background:linear-gradient(to right, transparent 0%, rgb(${hsvToRgb(currentHue, 1, 1)}) 100%`);updateColor(); } transparency.oninput = () =>{updateColor();}const bindSlInputEvents = () => {const offsetX = slPicker.offsetLeft;const offsetY = slPicker.offsetTop;const setSlPosition = (xPos, yPos, setting) => {let x = xPos - offsetX;let y = yPos - offsetY;if (x <= 0) {x = 0;}if (x >= PICKER_WIDTH) {x = PICKER_WIDTH;}if (y <= 0) {y = 0}if (y >= PICKER_HEIGHT) {y = PICKER_HEIGHT;}currentSaturation = (x / PICKER_WIDTH);currentValue = (1 - (y / PICKER_HEIGHT));slInput.setAttribute('style', `transform: translate3d(${x}px, ${y}px, 1px)`);}const dragSlInput = e => {if (mouseDown) {setSlPosition(e.pageX, e.pageY);updateColor();}}document.onmousemove = dragSlInput;slPicker.onmouseup = () => {mouseDown = false;}document.onmouseup = () => {mouseDown = false;}//點擊取色面板slPicker.onmousedown = e => {mouseDown = true;setSlPosition(e.pageX, e.pageY);updateColor();}updateColor(); }window.onresize = bindSlInputEvents;bindSlInputEvents();</script></html>?
<!DOCTYPE html> <html><head><title>Color Plus</title> </head> <style type="text/css"> * {box-sizing: border-box; }.color-picker {width: 330px;height: 442px;padding: 15px;border-radius: 5px;box-shadow: 0 10px 40px rgba(10, 20, 70, 0.25);background-color: #ffffff; }.sat-lightness-picker {position: relative;height: 300px;width: 300px;-webkit-user-drag: none;user-select: none; }.white-overlay, .black-overlay, .color-underlay {top: 0;left: 0;position: absolute;width: 100%;height: 100%; }.white-overlay {background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);z-index: 1; }.black-overlay {background: linear-gradient(to bottom, transparent 0%, #000 100%);z-index: 2; }.color-underlay {background: cyan;z-index: 0; }.sl-handle {position: absolute;width: 12px;height: 12px;margin-left: -6px;margin-top: -6px;background-color: transparent;z-index: 4;border-radius: 50%;transform: translate3d(300px, 0, 0);box-shadow: 0 0 0 3px white, 0 1px 3px 3px rgba(5, 10, 70, 0.33); }.sl-handle:hover {cursor: pointer; }.sl-handle:active {transform: scale(1.15); }.hue-picker {height: 15px;width: 100%;margin-top: 15px;background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);box-shadow: inset 0 0 0 3px white, 0 1px 4px rgba(5, 10, 70, 0.25); }.transparency {width: 99%;background: url(king.jpg);box-shadow: inset 0 0 0 2px white, 0px 0px 9px rgba(5, 10, 70, 0.26);height: 13px;border-radius: 20px; }.hue-picker input[type="range"] {-webkit-appearance: none;width: 100%;margin: 0;background: transparent; }.transparency input[type="range"] {position: relative;width: 295px;height: 9px;border-radius: 20px;top:-6px; }.hue-picker input[type="range"]:focus {outline: none; }.hue-picker input[type="range"]::-webkit-slider-runnable-track {background: transparent;border: none; }.hue-picker input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;width: 12px;height: 12px;margin-bottom: 3px;background-color: transparent;border-radius: 50%;box-shadow: 0 0 0 3px white, 0 1px 3px 3px rgba(5, 10, 70, 0.33); } .transparency input[type="range"]::-webkit-slider-thumb {margin-bottom: 1px; } .color-output {display: flex;margin-top: 15px;background-image: url(king.jpg); }.color-output input {box-shadow: inset 0 0 0 3px white, 0 1px 4px rgba(5, 10, 70, 0.1);border: none;/*width: 100px;*/width: auto;font-size: 16px;font-family: "Menlo", monospace;padding: 0 15px;outline: none; }.selected-color {width: 100%;height: 44px;box-shadow: inset 0 0 0 3px white, 0 1px 4px rgba(5, 10, 70, 0.1);background-color: cyan; } </style><body id="colorSample"><div class="color-picker" id="colorPicker"><div class="sat-lightness-picker" id="slPicker" draggable="false"><div class="sl-handle" id="slInput" draggable="false"></div><div class="white-overlay"></div><div class="black-overlay"></div><div id="hueUnderlay" class="color-underlay"></div></div><div class="hue-picker"><input id="hueRotation" min="0" max="360" value="180" type="range"></div><div class="hue-picker transparency"><input id="transparency" min="0" max="360" value="360" type="range"></div><div class="color-output"><div class="selected-color" id="selectedColor"></div><input type="text" id="hexInput"></div></div> </body> <script type="text/javascript"> const hueRotationInput = document.getElementById('hueRotation'); const hueUnderlay = document.getElementById('hueUnderlay'); const transparency = document.getElementById('transparency'); const slInput = document.getElementById('slInput'); const slPicker = document.getElementById('slPicker'); const selectedColor = document.getElementById('selectedColor'); const hexInput = document.getElementById('hexInput');const PICKER_HEIGHT = 300; const PICKER_WIDTH = 300; let currentHue = 0.5; let currentSaturation = 1; let currentValue = 0.5; let mouseDown = false; var r,g,b,h=1; const rgbToHex = (r, g, b) => {return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); }function hexToR(h) {return parseInt((cutHex(h)).substring(0, 2), 16) }function hexToG(h) {return parseInt((cutHex(h)).substring(2, 4), 16) }function hexToB(h) {return parseInt((cutHex(h)).substring(4, 6), 16) }function cutHex(h) {return h.charAt(0) == "#" ? h.substring(1, 7) : h }const hsvToRgb = (h, s, v) => {var r, g, b;var i = Math.floor(h * 6);var f = h * 6 - i;var p = v * (1 - s);var q = v * (1 - f * s);var t = v * (1 - (1 - f) * s);switch (i % 6) {case 0:r = v, g = t, b = p;break;case 1:r = q, g = v, b = p;break;case 2:r = p, g = v, b = t;break;case 3:r = p, g = q, b = v;break;case 4:r = t, g = p, b = v;break;case 5:r = v, g = p, b = q;break;}return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)]; }const getCurrentColor = () => {return hsvToRgb(currentHue, currentSaturation, currentValue); }const updateColor = () => {h=(transparency.value/360).toFixed(2);selectedColor.setAttribute('style', `background-color: rgba(${getCurrentColor()},${h})`);// hexInput.value = rgbToHex(...getCurrentColor()); /*Hex寫法*/// hexInput.value = "rgb("+(getCurrentColor())+","+h+")"; /*Rgb寫法*/transparency.value/360==1?hexInput.value = rgbToHex(...getCurrentColor()):hexInput.value = "rgba("+(getCurrentColor())+","+h+")";transparency.setAttribute('style', `background:linear-gradient(to right, transparent 0%, rgb(${getCurrentColor()}) 100%`); }hueRotationInput.oninput = () => {currentHue = (hueRotationInput.value / 360);hueUnderlay.setAttribute('style', `background: rgb(${hsvToRgb(currentHue, 1, 1)})`);//布置取色板transparency.setAttribute('style', `background:linear-gradient(to right, transparent 0%, rgb(${hsvToRgb(currentHue, 1, 1)}) 100%`);updateColor(); } transparency.oninput = () =>{updateColor();}const bindSlInputEvents = () => {const offsetX = slPicker.offsetLeft;const offsetY = slPicker.offsetTop;const setSlPosition = (xPos, yPos, setting) => {let x = xPos - offsetX;let y = yPos - offsetY;if (x <= 0) {x = 0;}if (x >= PICKER_WIDTH) {x = PICKER_WIDTH;}if (y <= 0) {y = 0}if (y >= PICKER_HEIGHT) {y = PICKER_HEIGHT;}currentSaturation = (x / PICKER_WIDTH);currentValue = (1 - (y / PICKER_HEIGHT));slInput.setAttribute('style', `transform: translate3d(${x}px, ${y}px, 1px)`);}const dragSlInput = e => {if (mouseDown) {setSlPosition(e.pageX, e.pageY);updateColor();}}document.onmousemove = dragSlInput;slPicker.onmouseup = () => {mouseDown = false;}document.onmouseup = () => {mouseDown = false;}//點擊取色面板slPicker.onmousedown = e => {mouseDown = true;setSlPosition(e.pageX, e.pageY);updateColor();}updateColor(); }window.onresize = bindSlInputEvents;bindSlInputEvents();function setBgColorById(id, sColor) {var elems;if (document.getElementById) {if (elems = document.getElementById(id)) {if (elems.style) elems.style.backgroundColor = sColor;}} } //hex 轉 rgb function change(){setBgColorById('colorSample',hexInput.value);r=hexToR(hexInput.value);g=hexToG(hexInput.value);b=hexToB(hexInput.value);hexInput.value=("rgb("+r+","+g+","+b+","+h+")");hexInput.setAttribute('style', `width:175px`); } </script></html>拓展應用下載鏈接
?PS：這里少個名為king.jpg的灰白格圖片是用作透明度為0的背景！
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
總結
- 上一篇： Vue加载cesium指南针插件cesi
- 下一篇： （七）Ps取色工具