# JustColor

**Repository Path**: wanjinyin2016_admin/just-color

## Basic Information

- **Project Name**: JustColor
- **Description**: 配色网站JustColor
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: https://justcolor.top
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-21
- **Last Updated**: 2026-03-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JustColor - 配色方案预览工具

一个优雅的在线配色方案预览工具，帮助设计师和开发者快速预览和导出配色方案。

[English](#english) | 中文

## 功能特点

### 🎨 实时预览
- **四种视图模式**: 落地页 (Landing)、仪表盘 (Dashboard)、作品集 (Portfolio)、移动端 (Mobile)
- **30+ 预设配色方案**: 涵盖默认暖色、珊瑚日落、活力珊瑚、深海蓝调、赛博朋克、国潮故宫等
- **智能对比度**: 自动计算文字与背景的最佳对比色

### ✨ 交互功能
- **AI 生成配色**: 输入描述词（如"科技蓝"、"清新自然绿"）自动生成配色
- **颜色编辑**: 右侧面板支持自定义调整 5 个主颜色（背景、主色、强调、文字、辅助）
- **中英文切换**: 支持简体中文和 English 界面

### 📤 导出能力
- **CSS 变量导出**: 一键复制标准 CSS 变量格式
- **色阶生成**: 自动生成 50-900 的完整色阶

## 快速开始

### 直接使用
直接在浏览器中打开 `index.html` 文件即可使用。

### 开发运行
```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev
# 或
npx serve .
```

## 配色方案结构

每个配色方案包含 5 个主颜色：

| 颜色 | 说明 |
|------|------|
| Background | 背景色 |
| Primary | 主色调 |
| Accent | 强调色 |
| Text | 文字颜色 |
| Secondary | 辅助色 |

### 导出 CSS 格式

```css
/* Background */
--bg: #fffefb;
--bg-2: #fef6e8;

/* Primary */
--primary: #d4eaf7;
--primary-2: #a8d4f0;

/* Accent */
--accent: #71c4ef;
--accent-2: #4db8e8;

/* Text */
--text: #1d1c1c;
--text-2: #3d3c3c;

/* Secondary */
--secondary: #ffd4a3;
--secondary-2: #ffb978;
```

## 技术栈

- **React 18** (CDN)
- **原生 CSS** + CSS Variables
- **无构建依赖** - 单文件部署

## 浏览器支持

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

## License

MIT

---

## English

# JustColor - Color Scheme Preview Tool

A beautiful online color scheme preview tool that helps designers and developers quickly preview and export color schemes.

## Features

### 🎨 Real-time Preview
- **4 View Modes**: Landing Page, Dashboard, Portfolio, Mobile App
- **30+ Preset Color Schemes**: Including Warm, Coral Sunset, Ocean Blue, Cyberpunk, Chinese Palace, and more
- **Smart Contrast**: Automatically calculates optimal text/background contrast

### ✨ Interactive Features
- **AI Color Generation**: Input descriptions like "tech blue" or "fresh green" to auto-generate schemes
- **Color Editing**: Right panel supports customizing 5 main colors
- **Bilingual**: Supports Simplified Chinese and English

### 📤 Export
- **CSS Variables**: One-click copy of standard CSS variable format
- **Color Scale Generation**: Auto-generates 50-900 complete color scales

## Quick Start

```bash
# Open directly in browser
open index.html

# Or use a local server
npx serve .
```

## Color Structure

Each scheme includes 5 main colors: Background, Primary, Accent, Text, Secondary

## Tech Stack

- React 18 (CDN)
- Vanilla CSS + CSS Variables
- Zero build dependencies - Single file deployment