forked from 逆流鱼 / chinese-colors

Create your Gitee Account

Explore and code with more than 6 million developers，Free private repositories ！：）

Clone or download

README.zh.md 2.45 KB

# <img src="demo/logo.png" alt="Logo" width="50"> 中国传统颜色在线手册

[English Version](README.md)

[访问地址](https://colors.ichuantong.cn)

<img src="demo/pc.png" alt="PC UI" width="600">

## 特性

- 使用 React 构建
- 支持 PWA

<img src="demo/pwa.jpg" alt="PWA Logo" width="300">

- 适配移动端展现 (Mobile First)

<img src="demo/m.png" alt="Mobile UI" width="300">

- 颜色选中高亮
- 颜色分类
- 可复制 HEX
- 可收藏喜欢的颜色
- 搭配显示诗词
- 可生成壁纸/图片卡片，屏幕多大，截图就有多大 (暂不稳定，欢迎[反馈](https://github.com/zerosoul/chinese-colors/issues))。

<img src="demo/wallpaper.png" alt="screen shot" width="300">

<img src="demo/card.png" alt="card image" width="200">
## 技术栈

- [create-react-app](https://github.com/facebook/create-react-app): 大家都在用的 react 项目构建架子
- [react](https://reactjs.org): 最流行的前端 UI 构建语言
- [styled-components](https://styled-components.com): react 中 css 解决方案，CSS-IN-JS 最佳实践
- eslint + prettier: 为了更好地编码
- husky + commitlint: 为了更好地 GIT 提交
- [html2canvas](http://html2canvas.hertzen.com/)
- [pinyin](https://github.com/hotoo/pinyin): 汉字转拼音
- [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard): 开启复制功能
- [iconfont.cn](https://iconfont.cn): 阿里系的图标库，很丰富，很方便
- [https://www.transparenttextures.com/](https://www.transparenttextures.com/): 非常好看的纹理背景图
- [今日诗词](https://www.jinrishici.com)
- 感谢伟大的互联网，感谢各种开源作品

## 本地开发

克隆到本地：`git clone https://github.com/zerosoul/chinese-colors.git`

初始化：`cd chinese-colors && npm install`

运行：`npm run start`

访问: `http://localhost:8099/`

## 支持

<a href="https://www.producthunt.com/posts/chinese-color?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-chinese-color" target="_blank">
  <img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=167119&theme=dark" alt="Chinese Traditional Color - Chinese Color Cheatsheet Online! " />
</a>

## 更新日志

[更新日志](CHANGELOG.md)

## 赞赏

<img src="demo/reward.jpg" alt="打赏二维码" width="200">

## 参考

- 颜色数据来源：[中国传统颜色](http://blog.sina.com.cn/s/blog_5c3b139d0101deia.html)
- UI 参考：[一个日本传统颜色网站](http://nipponcolors.com/)

Copy Edit Web IDE Raw Blame History

authored 2019-10-07 11:41 . Update README.zh.md

中国传统颜色在线手册

English Version

PC UI

特性

使用 React 构建
支持 PWA

适配移动端展现 (Mobile First)

Mobile UI

颜色选中高亮
颜色分类
可复制 HEX
可收藏喜欢的颜色
搭配显示诗词
可生成壁纸/图片卡片，屏幕多大，截图就有多大 (暂不稳定，欢迎反馈)。

screen shot

card image

## 技术栈

create-react-app: 大家都在用的 react 项目构建架子
react: 最流行的前端 UI 构建语言
styled-components: react 中 css 解决方案，CSS-IN-JS 最佳实践
eslint + prettier: 为了更好地编码
husky + commitlint: 为了更好地 GIT 提交
html2canvas
pinyin: 汉字转拼音
react-copy-to-clipboard: 开启复制功能
iconfont.cn: 阿里系的图标库，很丰富，很方便
https://www.transparenttextures.com/: 非常好看的纹理背景图
今日诗词
感谢伟大的互联网，感谢各种开源作品

本地开发

克隆到本地：git clone https://github.com/zerosoul/chinese-colors.git

初始化：cd chinese-colors && npm install

运行：npm run start

访问: http://localhost:8099/

支持

Chinese Traditional Color - Chinese Color Cheatsheet Online!

更新日志

赞赏

打赏二维码

参考

颜色数据来源：中国传统颜色
UI 参考：一个日本传统颜色网站

Comment ( 0 )

Sign in for post a comment

JavaScript

1

https://gitee.com/cui_junyang/chinese-colors.git

git@gitee.com:cui_junyang/chinese-colors.git

cui_junyang

chinese-colors

chinese-colors

master