]*>([\s\S]*?)<\/style>/gi; var sm; while ((sm = styleRegex.exec(htmlText)) !== null) { cssParts.push(sm[1]); } return cssParts.join('\n'); } // 获取颜色亮度 function getLuminance(rgbStr) { var match = rgbStr.match(/[\d.]+/g); if (!match || match.length < 3) return 0.5; var r = parseInt(match[0]) / 255; var g = parseInt(match[1]) / 255; var b = parseInt(match[2]) / 255; var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b; return lum; } // 获取色相 function getHue(rgbStr) { var match = rgbStr.match(/[\d.]+/g); if (!match || match.length < 3) return 0; var r = parseInt(match[0]) / 255; var g = parseInt(match[1]) / 255; var b = parseInt(match[2]) / 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h = 0; if (max === min) return 0; var d = max - min; if (max === r) h = ((g - b) / d) % 6; else if (max === g) h = (b - r) / d + 2; else h = (r - g) / d + 4; h = Math.round(h * 60); if (h < 0) h += 360; return h; } // 渲染结果 function renderResults(variables) { allVars = variables; var colorVars = variables.filter(function(v) { return v.isColor && v.normalizedColor; }); var nonColorVars = variables.filter(function(v) { return !v.isColor || !v.normalizedColor; }); $('#cp-results').show(); $('#cp-initial-empty').hide(); // 统计 var rootCount = variables.filter(function(v) { return v.inRoot; }).length; var statsHtml = '共 ' + variables.length + ' 个CSS变量'; statsHtml += '颜色变量 ' + colorVars.length + ' 个'; if (rootCount > 0) { statsHtml += ':root中定义 ' + rootCount + ' 个'; } if (nonColorVars.length > 0) { statsHtml += '其他变量 ' + nonColorVars.length + ' 个'; } statsHtml += ''; statsHtml += ''; $('#cp-stats-bar').html(statsHtml); // 存储颜色变量用于排序 window._cpColorVars = colorVars; window._cpNonColorVars = nonColorVars; renderColorGrid(colorVars); renderNonColorList(nonColorVars); // 导出按钮事件 $('#cp-btn-export').off('click').on('click', function() { exportPalette(colorVars); }); $('#cp-btn-copy-all').off('click').on('click', function() { copyAllVars(variables); }); } function renderColorGrid(colorVars) { var $grid = $('#cp-color-grid'); var $empty = $('#cp-color-empty'); $grid.empty(); if (colorVars.length === 0) { $grid.hide(); $empty.show(); } else { $grid.show(); $empty.hide(); colorVars.forEach(function(v) { var bgColor = v.normalizedColor; var lum = getLuminance(bgColor); var textColor = lum > 0.5 ? '#1f2937' : '#ffffff'; var displayValue = v.resolvedFrom || v.rawValue; if (displayValue.length > 28) displayValue = displayValue.substring(0, 28) + '...'; var tagHtml = ''; if (v.inRoot) tagHtml = 'root'; var card = $('
' + '
' + '
' + (v.resolvedFrom ? '↳' : '') + '
' + '
' + '
' + '
' + v.name + tagHtml + '
' + '
' + displayValue + '
' + '
' + '
'); card.on('click', function() { copyToClipboard(v.rawValue, '已复制: ' + v.rawValue); }); $grid.append(card); }); } } function renderNonColorList(nonColorVars) { var $list = $('#cp-non-color-list'); var $title = $('#cp-non-color-title'); $list.empty(); if (nonColorVars.length === 0) { $list.hide(); $title.hide(); } else { $list.show(); $title.show(); nonColorVars.forEach(function(v) { var tagHtml = v.inRoot ? 'root' : ''; var item = $('
' + '' + v.name + tagHtml + '' + '' + v.rawValue + '' + '
'); item.on('click', function() { copyToClipboard(v.rawValue, '已复制: ' + v.rawValue); }); $list.append(item); }); } } function copyToClipboard(text, toastMsg) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(function() { showToast(toastMsg || '已复制到剪贴板'); }).catch(function() { fallbackCopy(text, toastMsg); }); } else { fallbackCopy(text, toastMsg); } } function fallbackCopy(text, toastMsg) { var ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.left = '-9999px'; ta.style.top = '-9999px'; document.body.appendChild(ta); ta.focus(); ta.select(); try { document.execCommand('copy'); showToast(toastMsg || '已复制到剪贴板'); } catch(e) { showToast('复制失败，请手动选择复制'); } document.body.removeChild(ta); } function showToast(msg) { var $toast = $('#cp-toast'); $toast.text(msg).addClass('show'); clearTimeout($toast.data('timeout')); $toast.data('timeout', setTimeout(function() { $toast.removeClass('show'); }, 2000)); } function exportPalette(colorVars) { if (colorVars.length === 0) { showToast('没有可导出的颜色变量'); return; } var lines = [':root {']; colorVars.forEach(function(v) { lines.push(' ' + v.name + ': ' + v.rawValue + ';'); }); lines.push('}'); var cssOutput = lines.join('\n'); copyToClipboard(cssOutput, '色板CSS已复制！共' + colorVars.length + '个颜色变量'); } function copyAllVars(variables) { if (variables.length === 0) { showToast('没有可复制的变量'); return; } var lines = [':root {']; variables.forEach(function(v) { lines.push(' ' + v.name + ': ' + v.rawValue + ';'); }); lines.push('}'); var cssOutput = lines.join('\n'); copyToClipboard(cssOutput, '全部CSS变量已复制！共' + variables.length + '个'); } function filterAndSort() { var searchTerm = $('#cp-search-filter').val().toLowerCase(); var sortBy = $('#cp-sort-select').val(); var colorOnly = $('#cp-color-only').is(':checked'); var colorVars = window._cpColorVars || []; var nonColorVars = window._cpNonColorVars || []; // 过滤颜色变量 var filteredColor = colorVars.filter(function(v) { if (searchTerm) { return v.name.toLowerCase().includes(searchTerm) || v.rawValue.toLowerCase().includes(searchTerm); } return true; }); // 排序 if (sortBy === 'hue') { filteredColor.sort(function(a, b) { return getHue(a.normalizedColor) - getHue(b.normalizedColor); }); } else if (sortBy === 'lightness') { filteredColor.sort(function(a, b) { return getLuminance(a.normalizedColor) - getLuminance(b.normalizedColor); }); } else { filteredColor.sort(function(a, b) { return a.name.localeCompare(b.name); }); } // 过滤非颜色变量 var filteredNonColor = nonColorVars.filter(function(v) { if (searchTerm) { return v.name.toLowerCase().includes(searchTerm) || v.rawValue.toLowerCase().includes(searchTerm); } return true; }); renderColorGrid(filteredColor); if (colorOnly) { $('#cp-non-color-list').hide(); $('#cp-non-color-title').hide(); } else { renderNonColorList(filteredNonColor); } } // 事件绑定 $('#cp-btn-extract').on('click', function() { var cssText = $('#cp-css-input').val().trim(); if (!cssText) { showToast('请先粘贴CSS代码'); return; } var variables = parseCSSVariables(cssText); if (variables.length === 0) { showToast('未检测到CSS变量（--开头的自定义属性）'); $('#cp-results').hide(); $('#cp-initial-empty').show(); return; } renderResults(variables); // 滚动到结果区域 $('html, body').animate({ scrollTop: $('#cp-results').offset().top - 80 }, 300); }); $('#cp-btn-html-extract').on('click', function() { var htmlText = $('#cp-html-input').val().trim(); if (!htmlText) { showToast('请先粘贴HTML代码'); return; } var cssText = extractCSSFromHTML(htmlText); if (!cssText.trim()) { showToast('未在HTML中找到<style>标签内容'); return; } var variables = parseCSSVariables(cssText); if (variables.length === 0) { showToast('未检测到CSS变量'); $('#cp-results').hide(); $('#cp-initial-empty').show(); return; } renderResults(variables); $('html, body').animate({ scrollTop: $('#cp-results').offset().top - 80 }, 300); }); $('#cp-btn-fetch').on('click', function() { var url = $('#cp-url-input').val().trim(); if (!url) { showToast('请输入URL'); return; } var proxyUrl = 'https://corsproxy.io/?' + encodeURIComponent(url); showToast('正在获取...'); $.ajax({ url: proxyUrl, method: 'GET', dataType: 'text', timeout: 15000, success: function(data) { var cssText = data; // 如果是HTML，提取CSS if (/
无需登录 数据私有 本地保存

网页配色提取器 - 分析任意网站CSS变量

参考 设计工具 CSS 提取 网站 配色
63
0
0
0

网页配色提取器

分析任意网站CSS变量，提取设计系统配色方案。支持粘贴CSS代码、输入URL或粘贴HTML自动解析。

通过CORS代理获取，可能受跨域限制

粘贴CSS代码或输入URL开始提取配色方案

支持CSS自定义属性（变量），自动识别颜色值

常见问题与知识点

什么是CSS自定义属性（CSS变量）？
CSS自定义属性（Custom Properties），通常称为CSS变量，是以--为前缀的CSS属性。它们允许开发者在样式表中定义可复用的值，通过var()函数引用。例如：--primary-color: #4f46e5; 定义了一个主色调变量，后续可通过 color: var(--primary-color); 来使用。CSS变量支持继承和级联，是构建现代设计系统和主题切换的核心技术。
如何查看任意网站的CSS变量？
有几种常用方法：① 浏览器开发者工具 - 按F12打开开发者工具，在Elements面板中选择<html>或<body>元素，在Styles面板中查看:root或inherited from ...部分，即可看到所有CSS变量。② 使用本工具 - 复制网站的CSS源代码粘贴到工具中自动提取。③ Console命令 - 在浏览器控制台执行getComputedStyle(document.documentElement).getPropertyValue('--变量名')来获取特定变量值。
CSS变量和SCSS/LESS变量有什么区别？
CSS变量是原生浏览器支持的动态属性，在运行时生效，支持JavaScript操作和实时更新。而SCSS/LESS变量是预处理器变量，在编译时就被替换为固定值。CSS变量可以响应媒体查询、支持主题切换无需重新编译、可以被后代元素继承和覆盖。SCSS变量则在大型项目中编译更快、无需考虑浏览器兼容性问题。现代前端开发中，两者常结合使用：SCSS处理编译时逻辑，CSS变量处理运行时动态主题。
浏览器对CSS变量的支持情况如何？
CSS自定义属性目前在所有主流浏览器中都得到良好支持，包括Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+，以及移动端iOS Safari 9.3+和Android Chrome。全球覆盖率超过97%。唯一不支持的是IE 11及更早版本（已停止维护）。如果你的项目需要兼容IE，建议使用CSS变量polyfill或回退方案。
如何利用CSS变量构建设计系统的配色方案？
推荐使用语义化命名的CSS变量来构建设计系统：在:root中定义基础色板（如--blue-500: #3b82f6），然后创建语义化别名（如--color-primary: var(--blue-500)）。这样可以在保持颜色一致性的同时，灵活切换主题。常见的配色变量包括：--color-primary主色、--color-secondary辅助色、--color-bg背景色、--color-text文字色、--color-border边框色、--color-success/warning/error状态色等。配合prefers-color-scheme媒体查询可轻松实现暗色模式。
提取出的CSS变量中有些不是颜色值怎么办？
CSS变量可以存储任何CSS值：颜色、尺寸、字体、间距、阴影等。本工具会自动识别颜色值（支持hex、rgb、rgba、hsl、hsla、命名颜色等格式），将颜色变量以可视化色块展示。非颜色变量（如--spacing: 16px、--font: 'Inter'）会在下方列表中显示。你可以使用"仅显示颜色变量"开关来过滤结果。如果某个颜色变量引用了其他变量（如--primary: var(--blue)），工具会尝试追踪引用链进行解析。
什么是CORS？为什么直接输入URL可能获取失败？
CORS（跨源资源共享）是浏览器的安全机制，限制网页从不同域名获取资源。当你从工具站直接请求其他网站的CSS文件时，浏览器会阻止跨域请求。本工具使用了CORS代理服务来尝试绕过此限制，但代理服务可能有请求频率限制或不稳定。推荐做法：直接复制目标网站的CSS代码粘贴到工具中分析，这是最可靠的方式。你也可以在浏览器开发者工具的Sources面板找到CSS文件并复制内容。
🔧 相关工具