🎨 Website Color Palette Extractor | 网页配色提取器

🌈 Overview | 概述

English:
A Chrome extension for designers and developers that extracts color palettes from any website. It allows you to copy colors in different formats, save your favorite color palettes, and pick specific colors from web elements.

中文:
为设计师和开发人员设计的Chrome扩展程序，可从任何网站提取配色方案。它允许您以不同格式复制颜色，保存您喜爱的配色方案，并从网页元素中选择特定颜色。

✨ Features | 功能

English:

• 🔍 Color Extraction - Automatically analyze the current website and extract its most prominent colors
• 🖌️ Color Picker - Select specific colors from any element on the webpage
• 🔄 Format Switching - View and copy colors in HEX, RGB, or HSL formats
• 💾 Palette Collection - Save your favorite palettes for future reference
• 🔡 Multilingual Support - Available in English and Chinese (Simplified)

中文:

• 🔍 颜色提取 - 自动分析当前网站并提取其最突出的颜色
• 🖌️ 颜色选择器 - 从网页上的任何元素中选择特定颜色
• 🔄 格式切换 - 以HEX、RGB或HSL格式查看和复制颜色
• 💾 调色板收藏 - 保存您喜爱的调色板以供将来参考
• 🔡 多语言支持 - 支持英语和简体中文

📥 Installation | 安装

🛒 Chrome Web Store | Chrome应用商店

English:
Install from Chrome Web Store

中文:
从Chrome应用商店安装

👨‍💻 Developer Mode Installation | 开发者模式安装

English:

1. Download this repository or clone it to your local machine
2. Open Chrome and navigate to chrome://extensions
3. Enable "Developer mode" using the toggle in the top-right corner
4. Click "Load unpacked" and select the src directory from this project
5. The extension will be installed and ready to use

中文:

1. 下载此存储库或将其克隆到本地计算机
2. 打开Chrome并导航至chrome://extensions
3. 使用右上角的切换开关启用"开发者模式"
4. 点击"加载已解压的扩展程序"并选择此项目中的src目录
5. 扩展程序将安装完毕并可以使用

🚀 Usage | 使用方法

English:

1. Extracting Colors: Click the extension icon and press "Extract Colors" to analyze the current webpage
2. Picking Colors: Click "Pick Color" to activate the color picker, then click on any element
3. Changing Color Formats: Click on a color swatch to see format options (HEX, RGB, HSL)
4. Saving Palettes: Enter a name for the palette and click "Save Palette"
5. Exporting Palettes: Click the "Export" button to copy as CSS variables and JSON format
6. Changing Settings: Adjust language, default color format, and extraction settings

中文:

1. 提取颜色: 点击扩展图标并按"提取颜色"分析当前网页
2. 拾取颜色: 点击"拾取颜色"激活颜色选择器，然后点击任何元素
3. 更改颜色格式: 点击颜色样本查看格式选项(HEX、RGB、HSL)
4. 保存调色板: 输入调色板名称并点击"保存调色板"
5. 导出调色板: 点击"导出"按钮以CSS变量和JSON格式复制
6. 更改设置: 调整语言、默认颜色格式和提取设置

🛠️ Development | 开发

English:
The extension is structured as follows:

• popup.html/css/js: Handle the extension's popup UI and user interactions
• contentScript.js: Extracts colors from the active webpage
• background.js: Manages communication between popup and content scripts
• i18n.js: Handles internationalization
• colorUtils.js: Utility functions for color manipulation and conversion

中文:
扩展程序的结构如下:

• popup.html/css/js: 处理扩展程序的弹出UI和用户交互
• contentScript.js: 从活动网页中提取颜色
• background.js: 管理弹出窗口和内容脚本之间的通信
• i18n.js: 处理国际化
• colorUtils.js: 用于颜色操作和转换的实用功能

📄 License | 许可证

MIT License | MIT许可证