Awesome

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

中文文档

Chinese Color Cheatsheet

<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 😍
Poetry aside 😘
Wallpaper/Image Card (not stable, welcome feedback) 🌸

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

Technology Stack & Thanks

create-react-app
react.js
styled-components: CSS-IN-JS Best Practice
eslint + prettier: for better code
html2canvas
pinyin: convert Han to pinyin
react-copy-to-clipboard: enable copy
iconfont.cn: icons
https://www.transparenttextures.com/: awesome pattern images
今日诗词
Thanks the great Open Source

Local Development

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

init: cd chinese-colors && npm install

run: npm run start

enjoy: http://localhost:8099/

Changelog

Reference

Color data source：中国传统颜色
UI：nipponcolors.com

Support

<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>