<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/65f071f0-738b-4a51-a424-6cd4f895577f.png" alt="Logo" width="50"> 中国色

中文文档

中国色速查表

<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/256b626b-f1be-436a-af00-0e47927926ae.png" alt="PC界面" width="600">

特点

• 使用react.js构建 👏
• 支持PWA ☕️

<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/d18e8d61-d5d7-4a5d-b7e5-1dbaf142fca0.jpg" alt="PWA标志" width="300">

• 响应式设计（移动优先）📱

<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/cdd4642e-735b-4dac-a6ad-2c05e5af6121.png" alt="移动端界面" width="300">

• 高亮选中的颜色 ✨
• 颜色分类 🚥
• 复制HEX值 🖨
• 添加到收藏夹 😍
• 诗词点缀 😘
• 壁纸/图片卡片（不稳定，欢迎反馈）🌸

<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/ba6826d5-37a1-45b9-8d63-b9d4fff2d7bb.png" alt="截图" width="300"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/36bf65c4-7492-488e-aaf5-6bfd1278dcb7.png" alt="卡片图片" width="200">

技术栈与鸣谢

• create-react-app
• react.js
• styled-components：CSS-IN-JS最佳实践
• eslint + prettier：更好的代码规范
• 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/

更新日志

更新日志

参考资料

• 颜色数据来源：中国传统颜色
• 界面设计参考：nipponcolors.com

支持

<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="中国传统色 - 在线中国色彩速查表！" /> </a>