GHS Color 是一款现代化的高颜值色彩管理工具，用于保存您和您的团队喜欢的颜色，即时迸发灵感。
- 颜色库管理 - 对颜色实施分类管理
- 内置实用工具 - 多种颜色格式实时转化、颜色配置生成器
- 优雅界面 - 中英文双语支持，明暗主题适配，响应式设计，现代化页脚
- 部署方便 - 仅需动动手指5分钟即可轻松部署
- GitHub集成 - 支持提交新颜色到GitHub仓库
- Node.js 18.0 或更高版本
- npm 9.0 或更高版本（推荐使用 pnpm）
-
克隆项目
git clone https://github.com/Mystic-Stars/GHS-Color.git cd GHS-Color -
安装依赖
npm install # 或使用 pnpm（推荐） pnpm install -
配置颜色数据
# 颜色数据现在存储在根目录的 config.js 文件中 # 您可以直接编辑该文件来添加或修改颜色
-
启动开发服务器
npm run dev # 或 pnpm dev -
打开浏览器 访问 http://localhost:3000 查看应用
npm run dev # 启动开发服务器
npm run build # 构建生产版本
npm run start # 启动生产服务器
npm run lint # 代码检查
npm run type-check # TypeScript 类型检查
npm run test # 运行测试Docker部署是简单可靠的部署方式，支持一键部署到任何支持Docker的环境。
下文为简略教程，详细教程请参见Docker 部署指南
无需下载源码，直接运行一条命令：
# 方式一：使用一键部署脚本（最简单）
curl -fsSL https://raw.githubusercontent.com/Mystic-Stars/GHS-Color/main/scripts/one-click-deploy.sh | bash
# 方式二：直接运行Docker容器（环境变量难以配置）
docker run -d -p 3000:3000 --name ghs-color mysticstars/ghs-color:latest
# 方式三：使用Docker Compose（适用于生产环境）
curl -fsSL https://raw.githubusercontent.com/Mystic-Stars/GHS-Color/main/docker-compose.yml -o docker-compose.yml && docker-compose up -dWindows用户：
REM 下载并运行一键部署脚本
curl -fsSL https://raw.githubusercontent.com/Mystic-Stars/GHS-Color/main/scripts/one-click-deploy.bat -o deploy.bat && deploy.bat
REM 或直接运行Docker容器
docker run -d -p 3000:3000 --name ghs-color mysticstars/ghs-color:latest部署完成后，访问 http://localhost:3000 即可使用应用。
Docker部署支持通过环境变量自定义颜色数据，优先级：环境变量 > config.js文件
# 自定义颜色数据
export NEXT_PUBLIC_COLORS='[{"id":"my-red","name":"My Red","nameZh":"我的红色","hex":"#ff0000","description":"Custom red","descriptionZh":"自定义红色","category":"brand","tags":["red"]}]'
# 自定义分类数据
export NEXT_PUBLIC_CATEGORIES='[{"id":"brand","name":"Brand","nameZh":"品牌","description":"Brand colors","icon":"🎨","color":"#6366F1","order":1}]'
# 然后运行部署命令
curl -fsSL https://raw.githubusercontent.com/Mystic-Stars/GHS-Color/main/scripts/one-click-deploy.sh | bash详细配置说明请参考：颜色配置指南
如果您是开发者需要自定义构建，可以克隆项目进行本地构建：
# 克隆项目
git clone https://github.com/Mystic-Stars/GHS-Color.git
cd GHS-Color
# 本地构建镜像
docker build -t ghs-color-local .
# 运行本地构建的镜像
docker run -d -p 3000:3000 --name ghs-color-local ghs-color-local# 一键部署
make deploy # 拉取最新镜像并部署
# 查看服务状态
make status
# 查看日志
make logs
# 停止服务
make stop
# 重启服务
make restart
# 清理资源
make clean
# 使用Docker Compose
make compose # 使用Docker Compose部署
make compose-stop # 停止Docker Compose服务- 点击上方部署按钮
- 连接GitHub账户并授权Vercel访问
- Fork项目到您的GitHub账户
- 配置环境变量：
- 在Vercel部署页面的"Environment Variables"部分
- 添加您的
.env.local文件中的应用配置环境变量 - 颜色数据现在存储在
config.js文件中，无需在部署平台配置
- 点击Deploy开始部署
- 等待部署完成，通常需要1-3分钟
项目也支持部署到其他平台：
- Netlify
- Railway
- Cloudflare Pages
- 自建服务器（推荐使用Docker）
- 环境变量：确保在部署平台配置应用基本信息的环境变量（如应用名称、GitHub URL等）
- 颜色数据：颜色和分类数据存储在
config.js文件中，通过Git提交即可更新（Docker部署方式除外） - 构建命令：
npm run build - 启动命令：
npm run start
项目使用 .env.local 文件进行应用基本信息配置：
# 应用基本信息
NEXT_PUBLIC_APP_NAME=GHS Color Next
NEXT_PUBLIC_APP_VERSION=2.0.0
NEXT_PUBLIC_APP_DESCRIPTION=现代化色彩管理工具
NEXT_PUBLIC_APP_DESCRIPTION_EN=Modern Color Management Tool
NEXT_PUBLIC_GITHUB_URL=https://github.com/Mystic-Stars/GHS-Color
# 页面配置 - 中文
NEXT_PUBLIC_SITE_TITLE=GHS Color Next - 现代化色彩管理工具
NEXT_PUBLIC_SITE_DESCRIPTION=一款优雅的现代化色彩管理工具
# 页面配置 - 英文
NEXT_PUBLIC_SITE_TITLE_EN=GHS Color Next - Modern Color Management Tool
NEXT_PUBLIC_SITE_DESCRIPTION_EN=A modern color management tool
# 关键字
NEXT_PUBLIC_SITE_KEYWORDS=GHS Color,color management,color tool,design tool,color picker,palette,颜色管理,色彩工具该说明并不适用于Docker部署方式用户，Docker颜色数据配置方式请见颜色配置指南
颜色和分类数据存储在根目录的 config.js 文件中，无需在环境变量中配置。
// config.js
module.exports = {
colors: [
// 颜色数组
],
categories: [
// 分类数组
]
};interface Color {
id: string; // 唯一标识符
name: string; // 英文名称
nameZh: string; // 中文名称
hex: string; // HEX颜色值
description: string; // 英文描述
descriptionZh: string; // 中文描述
category: string; // 分类ID
tags: string[]; // 标签数组
}interface Category {
id: string; // 分类ID
name: string; // 英文名称
nameZh: string; // 中文名称
description: string; // 描述
icon: string; // 图标（emoji）
color: string; // 分类代表色
order: number; // 排序权重
}{
id: "box-yellow",
name: "Box Yellow",
nameZh: "盒子黄",
hex: "#f6dc50",
description: "The exclusive yellow color of BoxWorld, the logo color of GHS.",
descriptionZh: "盒王的专属黄色，GHS的标志颜色。",
category: "brand",
tags: ["yellow", "logo", "ghs"]
}- 打开颜色配置生成器 - 在应用的实用工具页面中找到"颜色配置生成器"
- 填写颜色信息 - 按照表单要求填写完整的颜色信息
- 复制生成的配置 - 点击"复制 JSON"按钮复制配置
- 编辑 config.js 文件 - 将复制的配置粘贴到
colors数组中 - 提交到Git并推送 - 部署平台会自动更新
- 编辑根目录的
config.js文件 - 在
colors数组中添加新的颜色对象 - 确保JavaScript对象格式正确
- 提交到Git并推送，部署平台会自动更新
// 在 config.js 的 colors 数组中添加
{
id: "your-color-id", // 唯一ID，使用小写和连字符
name: "Your Color Name", // 英文名称
nameZh: "您的颜色名称", // 中文名称
hex: "#ff6b6b", // HEX颜色值
description: "English description",
descriptionZh: "中文描述",
category: "brand", // 分类：brand/ui/team
tags: ["red", "vibrant"] // 标签数组
}- 颜色ID必须唯一，建议使用描述性的名称
- HEX值必须以#开头，使用6位十六进制格式
- 分类必须在categories数组中存在
- JavaScript对象格式必须正确，注意逗号的使用
- 点击应用中的"提交颜色"按钮
- 按照指南在GitHub上创建Issue
- 提供颜色的详细信息和用途说明
- 等待维护者审核和合并
- Fork本项目到您的GitHub账户
- 使用应用内的颜色配置生成器生成标准格式的颜色配置
- 编辑根目录的
config.js文件，将生成的配置添加到colors数组中 - 提交PR并描述颜色的用途和来源
- 等待审核和合并
💡 提示：推荐使用颜色配置生成器来确保配置格式的正确性和完整性
- Fork 项目 - 点击右上角的 Fork 按钮
- 创建分支 -
git checkout -b feature/your-feature-name - 提交更改 -
git commit -m 'feat: add some feature' - 推送分支 -
git push origin feature/your-feature-name - 创建 Pull Request - 在 GitHub 上创建 PR
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。
- 感谢所有开源库的作者和贡献者
如果这个项目对您有帮助，请考虑给它一个 ⭐️
Powered by Garbage Human Studio