# <img src="demo/logo.png" alt="Logo" width="50"> Chinese Color

> [中文文档](README.zh.md)

[Chinese Color Cheatsheet](https://works.yangerxiao.com/chinese-colors/)

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

## Features

- Build with react.js
- PWA supported

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

- Responsive (Mobile First)
  
<img src="demo/m.png" alt="Mobile UI" width="300">

- Highlight the selected color
- Classify the colors
- Copy HEX
- Add to favorites
- Wallpaper (not stable, welcome [feedback](https://github.com/zerosoul/chinese-colors/issues)).   
<img src="demo/screenshot.png" alt="screen shot" width="300">

## Technology Stack & Thanks

- [create-react-app](https://github.com/facebook/create-react-app)
- [react.js](https://reactjs.org)
- [styled-components](https://styled-components.com): CSS-IN-JS Best Practice
- eslint + prettier: for better code
- husky + commitlint: for better git commit format
- [html2canvas](http://html2canvas.hertzen.com/)
- [pinyin](https://github.com/hotoo/pinyin): convert Han to pinyin
- [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard): enable copy
- [iconfont.cn](https://iconfont.cn): icons
- [https://www.transparenttextures.com/](https://www.transparenttextures.com/): awesome pattern images
- Thanks the great Open Source

## Local Development

`git clone https://github.com/zerosoul/chinese-colors.git`

`cd chinese-colors && npm install`

`npm run start`

enjoy: `http://localhost:8099/`

## Changelog

[Changelog](CHANGELOG.md)

## Reference

- Color data source：[中国传统颜色](http://blog.sina.com.cn/s/blog_5c3b139d0101deia.html)
- UI：[nipponcolors.com](http://nipponcolors.com/)