# web-color-picker

**Repository Path**: hdbm/web-color-picker

## Basic Information

- **Project Name**: web-color-picker
- **Description**: 一个开源的web端的取色器项目
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-02-09
- **Last Updated**: 2025-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

 

### web-color-picker
这是一个纯净无广告的 Web 取色器工具，旨在帮助开发者和设计师快速获取颜色值，并提供便捷的颜色管理功能。

### 功能特点

取色功能：通过 EyeDropper API 实现精准取色，支持浏览器内置取色器。
颜色记录：自动记录取色历史，方便随时查看和管理。
喜欢的颜色组：支持将常用颜色添加到喜欢的颜色组中，支持分组管理。
颜色拖拽：支持颜色块的拖拽排序和管理。
导出配置：支持将喜欢的颜色组导出为文件，方便备份和分享。
文件导入：支持拖拽 .hdbmcl 文件导入颜色配置。
颜色预览：实时预览选中颜色，并可一键复制颜色值。
纯净无广告：无任何广告干扰，专注于取色和颜色管理。

### 技术栈

HTML/CSS/JavaScript：基于现代 Web 技术开发。
EyeDropper API：用于实现取色功能。
Local Storage：用于保存用户配置和颜色记录。
PostCSS：用于自动化处理 CSS 代码。

### 项目结构

```
project-root/
├── index.html            # 主页面文件
├── styles.css            # 样式文件
├── script.js             # 主逻辑文件
├── postcss.config.js     # PostCSS 配置文件
└── .gitignore            # Git 忽略文件配置
```

### 安装和运行

1.克隆项目

```
git clone https://gitee.com/your-username/web-color-picker.git
cd web-color-picker
```

2.安装依赖（由于项目使用了 PostCSS，你需要安装 Node.js 和 npm 环境。然后运行以下命令）


```
npm install
```

3.运行项目

开发环境：
使用简单的 HTTP 服务器运行项目，例如使用 live-server：

```
npx live-server
```

生产环境：
你可以直接将项目文件部署到任何静态服务器上。

### 使用方法

1.取色
点击 取色 按钮，打开浏览器内置的取色器，选择颜色后，页面背景和选中颜色会实时更新。
2.添加到喜欢的颜色组
点击 添加到当前喜欢的颜色组中 按钮，将当前选中的颜色添加到喜欢的颜色组中。
3.长按颜色块也可以将颜色添加到喜欢的颜色组中。
4.颜色分组管理
在喜欢的颜色区域，选择颜色组，添加新组，编辑组名，或删除组。
每个组的颜色会保存在浏览器的 Local Storage 中，下次访问时会自动加载。
5.查看取色记录
点击 取色记录 按钮，打开取色记录模态框，查看历史记录，并支持删除单个记录或清空所有记录。
6.导出配置
点击 导出配置 按钮，将当前喜欢的颜色组导出为 .txt 和 .hdbmcl 文件。
7.导入配置
拖拽 .hdbmcl 文件到页面中，即可导入颜色配置。