Перейти к основному содержимому
claw
am
tools
Инструменты
Документы
Daoark
EN
Главная
Главная
/
Инструменты для изображений
›
> 16) & 255, g: (num >> 8) & 255, b: num & 255 }; } // RGB → HEX function rgbToHex(r, g, b) { return '#' + [r, g, b].map(function(x) { return Math.max(0, Math.min(255, Math.round(x))).toString(16).padStart(2, '0'); }).join('').toUpperCase(); } // RGB → HSL function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break; case g: h = ((b - r) / d + 2) / 6; break; case b: h = ((r - g) / d + 4) / 6; break; } } return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }; } // HSL → RGB function hslToRgb(h, s, l) { h /= 360; s /= 100; l /= 100; var r, g, b; if (s === 0) { r = g = b = l; } else { var hue2rgb = function(p, q, t) { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1/6) return p + (q - p) * 6 * t; if (t < 1/2) return q; if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; }; var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }; } // RGB → HSV function rgbToHsv(r, g, b) { r /= 255; g /= 255; b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, v = max; var d = max - min; s = max === 0 ? 0 : d / max; if (max === min) { h = 0; } else { switch (max) { case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break; case g: h = ((b - r) / d + 2) / 6; break; case b: h = ((r - g) / d + 4) / 6; break; } } return { h: Math.round(h * 360), s: Math.round(s * 100), v: Math.round(v * 100) }; } // HSV → RGB function hsvToRgb(h, s, v) { h /= 360; s /= 100; v /= 100; 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 { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }; } function updateAllFromHex() { var hex = hexInput.value.trim(); if (!/^#?[0-9A-Fa-f]{6}$/.test(hex) && !/^[0-9A-Fa-f]{6}$/.test(hex)) { return false; } var rgb = hexToRgb(hex); var hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); var hsv = rgbToHsv(rgb.r, rgb.g, rgb.b); isUpdating = true; rgbR.value = rgb.r; rgbG.value = rgb.g; rgbB.value = rgb.b; hslH.value = hsl.h; hslS.value = hsl.s; hslL.value = hsl.l; hsvH.value = hsv.h; hsvS.value = hsv.s; hsvV.value = hsv.v; isUpdating = false; currentHex = hex.startsWith('#') ? hex.toUpperCase() : '#' + hex.toUpperCase(); return true; } function updateAllFromRgb() { var r = parseInt(rgbR.value) || 0; var g = parseInt(rgbG.value) || 0; var b = parseInt(rgbB.value) || 0; r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b)); var hex = rgbToHex(r, g, b); var hsl = rgbToHsl(r, g, b); var hsv = rgbToHsv(r, g, b); isUpdating = true; hexInput.value = hex; hslH.value = hsl.h; hslS.value = hsl.s; hslL.value = hsl.l; hsvH.value = hsv.h; hsvS.value = hsv.s; hsvV.value = hsv.v; isUpdating = false; currentHex = hex; } function updateAllFromHsl() { var h = parseInt(hslH.value) || 0; var s = parseInt(hslS.value) || 0; var l = parseInt(hslL.value) || 0; h = Math.max(0, Math.min(360, h)); s = Math.max(0, Math.min(100, s)); l = Math.max(0, Math.min(100, l)); var rgb = hslToRgb(h, s, l); var hex = rgbToHex(rgb.r, rgb.g, rgb.b); var hsv = rgbToHsv(rgb.r, rgb.g, rgb.b); isUpdating = true; hexInput.value = hex; rgbR.value = rgb.r; rgbG.value = rgb.g; rgbB.value = rgb.b; hsvH.value = hsv.h; hsvS.value = hsv.s; hsvV.value = hsv.v; isUpdating = false; currentHex = hex; } function updateAllFromHsv() { var h = parseInt(hsvH.value) || 0; var s = parseInt(hsvS.value) || 0; var v = parseInt(hsvV.value) || 0; h = Math.max(0, Math.min(360, h)); s = Math.max(0, Math.min(100, s)); v = Math.max(0, Math.min(100, v)); var rgb = hsvToRgb(h, s, v); var hex = rgbToHex(rgb.r, rgb.g, rgb.b); var hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); isUpdating = true; hexInput.value = hex; rgbR.value = rgb.r; rgbG.value = rgb.g; rgbB.value = rgb.b; hslH.value = hsl.h; hslS.value = hsl.s; hslL.value = hsl.l; isUpdating = false; currentHex = hex; } function updatePreview() { colorSwatch.style.backgroundColor = currentHex; colorPreviewText.textContent = currentHex; } function showError(msg) { errorMsg.textContent = msg; errorMsg.classList.add('show'); } function clearError() { errorMsg.classList.remove('show'); } hexInput.addEventListener('input', function() { clearError(); if (updateAllFromHex()) { updatePreview(); } }); rgbR.addEventListener('input', function() { clearError(); updateAllFromRgb(); updatePreview(); }); rgbG.addEventListener('input', function() { clearError(); updateAllFromRgb(); updatePreview(); }); rgbB.addEventListener('input', function() { clearError(); updateAllFromRgb(); updatePreview(); }); hslH.addEventListener('input', function() { clearError(); updateAllFromHsl(); updatePreview(); }); hslS.addEventListener('input', function() { clearError(); updateAllFromHsl(); updatePreview(); }); hslL.addEventListener('input', function() { clearError(); updateAllFromHsl(); updatePreview(); }); hsvH.addEventListener('input', function() { clearError(); updateAllFromHsv(); updatePreview(); }); hsvS.addEventListener('input', function() { clearError(); updateAllFromHsv(); updatePreview(); }); hsvV.addEventListener('input', function() { clearError(); updateAllFromHsv(); updatePreview(); }); btnCopy.addEventListener('click', function() { navigator.clipboard.writeText(currentHex).then(function() { btnCopy.textContent = '已复制!'; setTimeout(function() { btnCopy.textContent = '复制 HEX'; }, 1500); }).catch(function() { showError('复制失败，请手动复制'); }); }); btnClear.addEventListener('click', function() { hexInput.value = ''; rgbR.value = ''; rgbG.value = ''; rgbB.value = ''; hslH.value = ''; hslS.value = ''; hslL.value = ''; hsvH.value = ''; hsvS.value = ''; hsvV.value = ''; currentHex = '#3D5A3D'; updatePreview(); clearError(); resultArea.classList.remove('show'); }); // Init preview updatePreview(); })(); // === 颜色小工具 3 个新功能 (2026-06-03) === // 1. 二色混合 function ccHexToRgb(hex) { hex = (hex || '').trim().replace(/^#/, ''); if (hex.length === 3) hex = hex.split('').map(function(c) { return c + c; }).join(''); if (!/^[0-9a-fA-F]{6}$/.test(hex)) return null; return [parseInt(hex.slice(0,2), 16), parseInt(hex.slice(2,4), 16), parseInt(hex.slice(4,6), 16)]; } function ccRgbToHex(r, g, b) { return '#' + [r, g, b].map(function(x) { return Math.max(0, Math.min(255, Math.round(x))).toString(16).padStart(2, '0'); }).join('').toUpperCase(); } function ccShowColor(elId, hex, label) { var el = document.getElementById(elId); if (!el) return; el.style.display = 'block'; el.style.padding = '12px'; el.style.border = '1px solid #e5e7eb'; el.style.borderRadius = '6px'; el.style.background = '#fafafa'; el.innerHTML = '
' + label + '
' + hex + '
Copiar
'; } // 1. 二色混合 var btnMix = document.getElementById('btn-mix'); if (btnMix) { btnMix.addEventListener('click', function() { var c1 = ccHexToRgb(document.getElementById('mixC1').value); var c2 = ccHexToRgb(document.getElementById('mixC2').value); var a = parseFloat(document.getElementById('mixAlpha').value); if (!c1 || !c2) { alert('颜色格式错误, 请输入 #RRGGBB'); return; } if (isNaN(a) || a < 0 || a > 1) { alert('α 必须在 0-1 之间'); return; } var r = c1[0] * (1-a) + c2[0] * a; var g = c1[1] * (1-a) + c2[1] * a; var b = c1[2] * (1-a) + c2[2] * a; var hex = ccRgbToHex(r, g, b); ccShowColor('mixResult', hex, '混合结果 (α=' + a + ')'); }); } // 2. 中间色 var btnMid = document.getElementById('btn-mid'); if (btnMid) { btnMid.addEventListener('click', function() { var c1 = ccHexToRgb(document.getElementById('midC1').value); var c2 = ccHexToRgb(document.getElementById('midC2').value); if (!c1 || !c2) { alert('颜色格式错误, 请输入 #RRGGBB'); return; } var r = (c1[0] + c2[0]) / 2; var g = (c1[1] + c2[1]) / 2; var b = (c1[2] + c2[2]) / 2; var hex = ccRgbToHex(r, g, b); ccShowColor('midResult', hex, '中间色 (RGB 算术平均)'); }); } // 3. 相反色 var btnInv = document.getElementById('btn-inv'); if (btnInv) { btnInv.addEventListener('click', function() { var c = ccHexToRgb(document.getElementById('invHex').value); if (!c) { alert('颜色格式错误, 请输入 #RRGGBB'); return; } var hex = ccRgbToHex(255 - c[0], 255 - c[1], 255 - c[2]); ccShowColor('invResult', hex, '相反色 (255-x 各通道)'); }); } // 复制按钮 document.addEventListener('click', function(e) { var btn = e.target.closest('button[data-hex]'); if (btn) { navigator.clipboard.writeText(btn.dataset.hex).then(function() { var old = btn.textContent; btn.textContent = '已复制'; setTimeout(function() { btn.textContent = old; }, 1000); }); } });