130 lines
2.4 KiB
Markdown
130 lines
2.4 KiB
Markdown
# 颜色数据快速参考
|
||
|
||
## 快速开始
|
||
|
||
### 运行提取工具
|
||
```bash
|
||
bun run extract-colors.ts
|
||
```
|
||
|
||
### 运行使用示例
|
||
```bash
|
||
bun run example-usage.ts
|
||
```
|
||
|
||
## 文件说明
|
||
|
||
| 文件 | 说明 |
|
||
|------|------|
|
||
| `extract-colors.ts` | 主要提取脚本 |
|
||
| `colors.json` | 提取的颜色数据（374KB） |
|
||
| `example-usage.ts` | 使用示例代码 |
|
||
| `README.md` | 完整文档 |
|
||
|
||
## 数据概览
|
||
|
||
- **颜色集合**: 31个
|
||
- **总颜色数**: 5888个
|
||
- **唯一颜色**: 2037个（去重后）
|
||
|
||
## 代码示例
|
||
|
||
### 基础用法
|
||
```typescript
|
||
import colors from './colors.json';
|
||
|
||
// 获取所有颜色集合
|
||
const allSets = Object.keys(colors);
|
||
|
||
// 获取特定品牌颜色
|
||
const cocoColors = colors['COCO - 色号预览（291色）'];
|
||
|
||
// 遍历颜色
|
||
cocoColors.forEach(color => {
|
||
console.log(`${color['color-name']}: ${color.color}`);
|
||
});
|
||
```
|
||
|
||
### 查找颜色
|
||
```typescript
|
||
import colors from './colors.json';
|
||
|
||
function findHex(hex: string) {
|
||
const results = [];
|
||
Object.entries(colors).forEach(([setName, colorList]) => {
|
||
const found = colorList.find(c => c.color.toLowerCase() === hex.toLowerCase());
|
||
if (found) results.push({ brand: setName, color: found });
|
||
});
|
||
return results;
|
||
}
|
||
|
||
const white = findHex('#FFFFFF');
|
||
console.log(white);
|
||
```
|
||
|
||
## 常见Hex颜色
|
||
|
||
| 颜色 | Hex | 出现次数 |
|
||
|------|-----|----------|
|
||
| 白色 | #FFFFFF | 32 |
|
||
| 黑色 | #000000 | 16 |
|
||
| 黄色 | #F7EC5C | 15 |
|
||
|
||
## 品牌列表
|
||
|
||
1. COCO系列（10个规格）
|
||
2. DMC十字绣实色
|
||
3. DODO
|
||
4. Mard系列（10个规格）
|
||
5. 优肯系列（2个规格）
|
||
6. 卡卡
|
||
7. 咪小窝
|
||
8. 小舞
|
||
9. 柿柿
|
||
10. 漫漫
|
||
11. 盼盼
|
||
12. 童趣
|
||
13. 黄豆豆
|
||
|
||
## 颜色分布
|
||
|
||
- 红色系: 2655个
|
||
- 蓝色系: 1245个
|
||
- 绿色系: 969个
|
||
- 白色系: 559个
|
||
- 灰色系: 365个
|
||
- 黑色系: 64个
|
||
- 其他: 31个
|
||
|
||
## 故障排除
|
||
|
||
**问题**: 找不到HTML文件
|
||
```bash
|
||
# 确认目录结构
|
||
ls pages-list/
|
||
```
|
||
|
||
**问题**: JSON格式错误
|
||
```bash
|
||
# 重新提取
|
||
bun run extract-colors.ts
|
||
```
|
||
|
||
**问题**: 无法导入JSON
|
||
```typescript
|
||
// 确保使用正确的方式
|
||
import colors from './colors.json'; // ✓ 正确
|
||
// 而不是
|
||
import { colors } from './colors.json'; // ✗ 错误
|
||
```
|
||
|
||
## 性能提示
|
||
|
||
- JSON文件已压缩，无需额外处理
|
||
- 数据按品牌分组，便于快速查找
|
||
- 使用Map或Set进行去重操作以提高性能
|
||
|
||
## 更多信息
|
||
|
||
查看完整文档：[README.md](./README.md)
|