🎨 颜色方案生成器

一个基于图片颜色提取的主题生成工具，支持多种格式导出

📖 脚本介绍

颜色方案生成器是一个智能的图片颜色提取工具，可以从任意图片中自动提取美丽的颜色方案，并导出为多种常用格式。该工具采用Web界面设计，操作简单直观，支持拖拽上传、实时预览和一键导出。

✨ 核心特性

• 智能颜色提取 - 支持三种专业算法：K-Means聚类、颜色量化、主导色提取
• 可视化操作 - 直观的Web界面，支持拖拽上传和实时预览
• 多格式导出 - 支持CSS Variables、SCSS、Tailwind CSS、JSON等格式
• 参数可调 - 可调节颜色数量、采样精度、亮度等参数
• 详细指导 - 每种导出格式都提供完整的配置说明和使用示例

🚀 快速开始

系统要求

• 操作系统: Windows 11 (推荐)
• Python版本: 3.11.0+
• 依赖库: 无需额外安装，使用Python标准库

启动步骤

1. 在kuai客户端中运行脚本

   • 脚本会自动启动HTTP服务器
   • 默认端口：18090

2. 打开浏览器

   • 自动打开：启用"自动打开浏览器"选项
   • 手动打开：访问 http://localhost:18090

3. 开始使用

   • 上传图片文件
   • 调整提取参数
   • 生成颜色方案
   • 导出所需格式

🎯 功能详解

图片上传与处理

支持的图片格式

• JPG/JPEG - 最常用的照片格式
• PNG - 支持透明背景的图片
• GIF - 动图只提取第一帧
• WebP - 现代Web图片格式

上传方式

1. 点击上传 - 点击上传区域选择文件
2. 拖拽上传 - 直接将图片拖入上传区域
3. 图片管理 - 支持重新上传和删除操作

颜色提取算法

1. K-Means 聚类 (推荐)

• 原理: 使用K-Means机器学习算法将相似颜色归类
• 优势: 提取的颜色最具代表性，适合创建主题
• 适用: 色彩丰富的照片、艺术作品

2. 颜色量化

• 原理: 将颜色空间分割成固定区块进行统计
• 优势: 速度快，保留更多原始色彩信息
• 适用: 插画、海报等色彩分明的图片

3. 主导色提取

• 原理: 统计图片中出现频率最高的颜色
• 优势: 提取真实的主要颜色
• 适用: 单色背景或主色调明显的图片

参数调节

颜色数量 (8-32个)

• 建议值: 16个颜色
• 少量 (8-12): 适合简约设计
• 中等 (16-20): 平衡实用性和丰富度
• 大量 (24-32): 用于复杂设计系统

采样精度

• 快速: 低精度，适合预览和测试
• 标准: 平衡速度和质量，日常使用推荐
• 精细: 高精度，用于专业设计项目

亮度调整 (-50 到 +50)

• 负值: 降低亮度，适合深色主题
• 0: 保持原始亮度
• 正值: 提升亮度，适合浅色主题

📤 导出格式详解

1. CSS Variables

使用场景

• 现代Web项目的主题系统
• 支持动态主题切换
• 浏览器原生支持

导出内容

:root {
  --color-1: #1a1a1a;
  --color-2: #2d2d2d;
  /* ... 更多颜色 */
  
  /* 语义化颜色 */
  --background: #1a1a1a;
  --foreground: #ffffff;
  --primary: #3b82f6;
  --secondary: #6b7280;
}

使用方法

.button {
  background: var(--primary);
  color: var(--foreground);
}

/* 主题切换 */
[data-theme="dark"] {
  --background: #1a1a1a;
  --foreground: #ffffff;
}

2. SCSS Variables

使用场景

• Sass/SCSS项目
• 需要颜色函数处理
• 复杂的主题系统

导出内容

// 基础变量
$color-1: #1a1a1a;
$color-2: #2d2d2d;

// 语义化变量
$background: #1a1a1a;
$primary: #3b82f6;

// 颜色映射
$colors: (
  1: #1a1a1a,
  2: #2d2d2d,
);

// 主题混入
@mixin theme-colors {
  .bg-color-1 { background-color: #1a1a1a; }
}

使用方法

.card {
  background: $background;
  border: 1px solid lighten($primary, 10%);
  
  &:hover {
    background: darken($background, 5%);
  }
}

3. Tailwind CSS

使用场景

• Tailwind CSS项目
• 实用类优先的设计
• 需要色阶生成

导出内容 (v4格式)

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #6b7280;
  --color-custom-1: #1a1a1a;
}

导出内容 (v3格式)

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#6b7280',
        custom: {
          '1': '#1a1a1a',
          '2': '#2d2d2d',
        }
      }
    }
  }
}

使用方法

<div class="bg-primary text-secondary">
  <button class="bg-custom-1 hover:bg-custom-2">
    按钮
  </button>
</div>

4. JSON 数据

使用场景

• 前端框架(React/Vue/Angular)
• 自定义主题系统
• API数据传输
• 设计工具导入

导出内容

{
  "name": "Generated Color Theme",
  "version": "1.0.0",
  "colors": ["#1a1a1a", "#2d2d2d"],
  "semantic": {
    "background": "#1a1a1a",
    "primary": "#3b82f6"
  },
  "css": {
    "variables": {
      "--color-1": "#1a1a1a"
    }
  },
  "usage": {
    "css": "var(--primary)",
    "scss": "$primary",
    "tailwind": "bg-primary"
  }
}

使用方法

// React示例
import colorTheme from './theme.json';

function App() {
  useEffect(() => {
    // 应用CSS变量
    Object.entries(colorTheme.css.variables).forEach(([key, value]) => {
      document.documentElement.style.setProperty(key, value);
    });
  }, []);
}

// Vue示例
export default {
  data() {
    return {
      theme: colorTheme
    }
  },
  computed: {
    primaryColor() {
      return this.theme.semantic.primary;
    }
  }
}

🛠️ 技术实现

颜色提取算法实现

K-Means聚类算法

1. 像素采样: 从图片中采样代表性像素点
2. 初始化中心点: 随机选择K个颜色作为聚类中心
3. 迭代优化: 通过15轮迭代优化聚类中心
4. 结果输出: 最终的K个聚类中心即为提取的颜色

性能优化

• 自适应采样: 根据图片大小调整采样密度
• 透明度处理: 自动过滤透明像素
• 内存管理: 使用Canvas进行图片处理，避免内存泄露

Web界面技术

前端技术栈

• HTML5: 现代Web标准
• CSS3: 渐变、动画、响应式设计
• 原生JavaScript: 无依赖的纯JavaScript实现
• Canvas API: 图片处理和颜色提取

响应式设计

• 桌面端: 双栏布局，最佳操作体验
• 平板端: 自适应网格布局
• 移动端: 单栏垂直布局，触屏优化

💡 使用技巧

选择合适的图片

1. 高对比度图片 - 提取的颜色更有层次
2. 色彩丰富的图片 - 能产生更好的调色板
3. 避免过度压缩的图片 - 保持颜色信息完整

参数调节建议

1. 照片类图片 - 使用K-Means算法，16-20个颜色
2. 插画海报 - 使用颜色量化，12-16个颜色
3. 品牌Logo - 使用主导色提取，8-12个颜色

主题设计建议

1. 确定主色调 - 选择最符合品牌的颜色作为主色
2. 建立层次 - 使用深浅不同的颜色建立视觉层次
3. 考虑可读性 - 确保文字颜色与背景有足够对比度

🔧 常见问题

Q: 为什么生成的颜色与图片不完全一致？

A: 这是正常现象。颜色提取算法会对相似颜色进行聚类和优化，目的是生成更适合主题设计的颜色方案，而不是完全复制原图颜色。

Q: 如何选择合适的颜色数量？

A: 建议根据用途选择：

• 简约设计：8-12个颜色
• 常规网站：16-20个颜色
• 复杂系统：24-32个颜色

Q: 生成的CSS变量如何在项目中使用？

A: 将生成的CSS代码添加到样式表的:root选择器中，然后在其他CSS规则中使用var(--变量名)引用。

Q: 支持哪些图片大小？

A: 支持任意大小的图片。大图片会自动缩放处理以提高性能，不影响颜色提取质量。

Q: 如何实现深色/浅色主题切换？

A: 使用CSS Variables格式，为不同主题定义相同的变量名：

:root { --background: #ffffff; }
[data-theme="dark"] { --background: #1a1a1a; }

Q: Tailwind CSS配置如何使用？

A: 将JavaScript配置代码复制到tailwind.config.js文件中，重新构建CSS即可使用自定义颜色类名。

📈 版本更新

v1.0.0 (当前版本)

• ✅ 完整的颜色提取功能
• ✅ 四种导出格式支持
• ✅ 响应式Web界面
• ✅ 详细的配置说明文档

计划更新

• 🔄 支持更多导出格式
• 🔄 批量图片处理
• 🔄 颜色方案预设模板
• 🔄 在线颜色方案分享

🤝 技术支持

如果您在使用过程中遇到问题，可以：

1. 检查浏览器兼容性 - 推荐使用Chrome、Firefox、Safari等现代浏览器
2. 确认图片格式 - 确保上传的是支持的图片格式
3. 调整参数设置 - 尝试不同的算法和参数组合
4. 查看浏览器控制台 - 检查是否有JavaScript错误信息

📄 许可证

本脚本基于开源协议发布，仅供学习和个人使用。生成的颜色方案可自由用于任何项目。

---

最后更新: 2025年1月