Werkzeuge Dokumente Daoark EN Startseite Startseite / Bildwerkzeuge/g,'>'); } function pad(n) { return n < 10 ? '0' + Math.round(n) : '' + Math.round(n); } function parseInput(input) { var s = String(input).trim(); s = s.replace(/^#/, ''); if (/^[0-9a-fA-F]{3}$/.test(s)) { s = s[0]+s[0]+s[1]+s[1]+s[2]+s[2]; } if (/^[0-9a-fA-F]{6}$/.test(s)) { var r = parseInt(s.substr(0,2),16); var g = parseInt(s.substr(2,2),16); var b = parseInt(s.substr(4,2),16); return {r:r, g:g, b:b}; } var rgbMatch = s.match(/^rgb\s*$\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$$/i); if (rgbMatch) { return {r:parseInt(rgbMatch[1],10), g:parseInt(rgbMatch[2],10), b:parseInt(rgbMatch[3],10)}; } var named = NAMED_COLORS[s.toLowerCase()]; if (named) { var hex = named.replace('#',''); return {r:parseInt(hex.substr(0,2),16), g:parseInt(hex.substr(2,2),16), b:parseInt(hex.substr(4,2),16)}; } var hslMatch = s.match(/^hsl\s*$\s*(\d+)\s*,\s*(\d+)\s*%\s*,\s*(\d+)\s*%\s*$$/i); if (hslMatch) { var rgb = hslToRgb(parseInt(hslMatch[1],10), parseInt(hslMatch[2],10), parseInt(hslMatch[3],10)); return rgb; } throw new Error('无法解析颜色: ' + input); } function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; var mx = Math.max(r,g,b), mn = Math.min(r,g,b); var l = (mx + mn) / 2; var h, s, d = mx - mn; if (d === 0) { h = 0; s = 0; } else { s = l > 0.5 ? d / (2 - mx - mn) : d / (mx + mn); switch (mx) { case r: h = ((g - b) / d) + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return {h: Math.round(h*360), s: Math.round(s*100), l: Math.round(l*100)}; } 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)}; } function rgbToCmyk(r, g, b) { var rn = r/255, gn = g/255, bn = b/255; var k = 1 - Math.max(rn, gn, bn); if (k === 1) return {c:0, m:0, y:0, k:100}; var c = (1 - rn - k) / (1 - k); var m = (1 - gn - k) / (1 - k); var y = (1 - bn - k) / (1 - k); return {c: Math.round(c*100), m: Math.round(m*100), y: Math.round(y*100), k: Math.round(k*100)}; } function isLight(r, g, b) { var l = (0.299*r + 0.587*g + 0.114*b) / 255; return l > 0.6; } function rgbToHex(r, g, b) { return '#' + pad(r.toString(16).toUpperCase()) + pad(g.toString(16).toUpperCase()) + pad(b.toString(16).toUpperCase()); } function schemes(h, s, l) { var hsl = rgbToHsl((h||0), (s||0), (l||0)); var H = hsl.h, S = hsl.s, L = hsl.l; return { mono: [0.1, 0.25, 0, -0.25, -0.5].map(function(dl){ var newL = Math.max(0, Math.min(100, L + dl * 100)); return hslToRgb(H, S, newL); }), analog: [0, -30, 30, -60, 60].map(function(dh){ return hslToRgb((H + dh + 360) % 360, S, L); }), complement: [0, 180, 180, 180, 180].map(function(dh, i){ if (i === 0) return {r:h, g:s, b:l}; var v = hslToRgb((H + dh) % 360, S, L); return v; }), triadic: [0, 120, 240, 60, 180].map(function(dh){ if (dh === 0) return {r:h, g:s, b:l}; return hslToRgb((H + dh) % 360, S, L); }), split: [0, 150, 210, 180, 180].map(function(dh){ if (dh === 0) return {r:h, g:s, b:l}; return hslToRgb((H + dh) % 360, S, L); }) }; } function paletteHtml(arr, title) { var html = '

' + title + '

'; html += '

'; arr.forEach(function(rgb){ var hex = rgbToHex(rgb.r, rgb.g, rgb.b); var light = isLight(rgb.r, rgb.g, rgb.b); html += '

' + hex + '

'; }); html += '

'; return html; } document.getElementById('f').addEventListener('submit', function(e) { e.preventDefault(); errorMsg.textContent = ''; try { var input = document.getElementById('color').value.trim(); if (!input) { errorMsg.textContent = '请输入颜色值'; return; } var rgb = parseInput(input); if (rgb.r > 255 || rgb.g > 255 || rgb.b > 255 || rgb.r < 0 || rgb.g < 0 || rgb.b < 0) { throw new Error('RGB 值越界'); } var hex = rgbToHex(rgb.r, rgb.g, rgb.b); var hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); var cmyk = rgbToCmyk(rgb.r, rgb.g, rgb.b); var sch = schemes(rgb.r, rgb.g, rgb.b); var html = ''; html += '

'; html += '

'; html += '' + hex + '

'; html += '

输入: ' + escape(input) + '

'; html += '

'; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += '

色块	' + hex + '
HEX	`' + hex + '`
RGB	`rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')`
HSL	`hsl(' + hsl.h + ', ' + hsl.s + '%, ' + hsl.l + '%)`
CMYK	`cmyk(' + cmyk.c + '%, ' + cmyk.m + '%, ' + cmyk.y + '%, ' + cmyk.k + '%)`
明暗	' + (isLight(rgb.r, rgb.g, rgb.b) ? '亮色 (适合深色文字)' : '暗色 (适合浅色文字)') + '

'; html += paletteHtml(sch.mono, '单色 (Monochromatic)'); html += paletteHtml(sch.analog, '类似 (Analogous)'); html += paletteHtml(sch.complement, '互补 (Complementary)'); html += paletteHtml(sch.triadic, '三角 (Triadic)'); html += paletteHtml(sch.split, '分色 (Split-Complementary)'); html += '

30+ 标准色参考表

'; html += '

'; STANDARD_COLORS.forEach(function(c){ html += '

'; html += '

' + c.n + '
' + c.h + '

'; html += '

'; }); html += '

'; resultMeta.textContent = '输入: ' + input + ' → ' + hex; resultContent.innerHTML = html; resultArea.classList.add('show'); var items = resultContent.querySelectorAll('.color-item'); items.forEach(function(it){ it.addEventListener('click', function(){ var h = it.getAttribute('data-hex'); document.getElementById('color').value = h; document.getElementById('f').dispatchEvent(new Event('submit')); }); }); } catch (err) { errorMsg.textContent = '错误: ' + err.message; resultArea.classList.remove('show'); } }); })();