喜欢中国风的 V 友可以进来看看...

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 1927 天前的主题，其中的信息可能已经有所发展或是发生改变。

偶然间看到一个日本人在 2010 年的一个作品（ http://nipponcolors.com/），非常喜欢，用 react 重构了中国风界面，并做了许多改进：

1. 颜色做了分类，更方便查找
2. 可收藏喜欢的颜色
3. 可生成壁纸，用来当手机壁纸，效果还可以
4. 重写 UI，并改进了许多细节

访问地址： https://works.yangerxiao.com/chinese-colors/
代码开源： https://github.com/zerosoul/chinese-colors

还在迭代中，有问题欢迎反馈。

第 1 条附言 · 2019-09-15 22:20:19 +08:00

还有一个改进：支持 PWA

第 2 条附言 · 2019-09-15 22:53:47 +08:00

不太会发图，附上截图：

Mobile 界面：
https://imgur.com/mipmQGt
PC 界面：
https://imgur.com/hY9IPMw

第 3 条附言 · 2019-09-15 22:58:57 +08:00

没预览图，再发一遍:
Mobile 截图：

PC 截图：

第 4 条附言 · 2019-09-17 15:28:44 +08:00

搭车推荐我的另一个作品： https://www.v2ex.com/t/601535

第 5 条附言 · 2019-09-21 19:57:49 +08:00

最近的迭代：

使用 svg 重构了 cmyk 百分比圈
完善了 README 文档，中英文版本
新增诗词
新增了一些壁纸配图
微调各种样式

第 6 条附言 · 2019-09-24 22:41:54 +08:00

新起域名： https://colors.ichuantong.cn/ 原地址会做 301 跳转

壁纸

重写

颜色

开源

163 条回复 • 2019-10-14 12:13:07 +08:00

1 2

❮

❯

dodo2012

2019-09-15 21:45:52 +08:00

不错不错，关注下

benyur

2019-09-15 21:46:12 +08:00 via Android

真不错，顶

TristanYang

2019-09-15 21:53:38 +08:00

@benyur 谢谢，喜欢的话，欢迎 star，😆

TristanYang

2019-09-15 21:53:44 +08:00

@dodo2012 谢谢，喜欢的话，欢迎 star，😆

TristanYang

2019-09-15 21:56:11 +08:00

忘了加一条改进：优化了移动端显示，Mobile First

Ultraman

2019-09-15 21:58:09 +08:00 via Android

壁纸下载失败
Android + Firefox Preview 2.0.0-rc.2
下载时提示 Can't download this file type

Ettup

2019-09-15 21:58:29 +08:00 via iPhone

很不错，已收藏

TristanYang

2019-09-15 22:02:27 +08:00

@vcinex 嗯这个壁纸下载功能不太稳定，我再搞搞，兼容性搞好点。不要在应用内打开，使用手机自带浏览器，或者 android chrome 应该没问题。

icekingcy

2019-09-15 22:08:15 +08:00 via iPhone

mark fork 一份

winterbells

2019-09-15 22:08:43 +08:00 via Android

网站叫 nippon colers =。=

winterbells

2019-09-15 22:09:10 +08:00 via Android

@winterbells colors

Ultraman

2019-09-15 22:12:56 +08:00 via Android

@TristanYang 还有就是手机壁纸的话能否根据访问设备屏幕调整图片长宽比例？还要二次裁剪影响美观。

TristanYang

2019-09-15 22:19:47 +08:00

@vcinex 裁剪？是不是生成的顶部有白边？这在某些机型下是个 bug，我还在看。壁纸功能现在是简单做了下，还需要许多细节优化。

Pillowl

2019-09-15 22:21:07 +08:00 via Android

今晚和朋友聊了两个多小时的中国色，结果打开 v2 你这个就出来了，真不错！还有，推荐一个叫做“几枝”的 Chrome 标签页扩展，将中国色和古诗词结合在一起了。

artandlol

2019-09-15 22:26:47 +08:00 via Android

怎么感觉没有日本风格的色卡好看

TristanYang

2019-09-15 22:27:15 +08:00

@Pillowl 啊巧了下一步迭代计划，正想把古诗词融入进来。

TristanYang

2019-09-15 22:28:32 +08:00

@artandlol 毕竟那位日本朋友有设计背景，设计专业我是门外汉，只是单纯喜欢美的东西，😃。也可能是先入为主 🤣

keith1126

2019-09-15 22:31:13 +08:00

很精致，收藏了~

TangMonk

2019-09-15 22:32:31 +08:00

日本哪个鼠标放在哪里都可以向下滑动，你这个要鼠标放在 colors 里面才能滑

TristanYang

2019-09-15 22:32:58 +08:00

@keith1126 谢谢欢迎 star

gavindexu

2019-09-15 23:02:31 +08:00 via iPhone

0.0 选择色调（红黄绿…）时，
背景不会跟着变色儿的吗？
刷新以后才会有看到颜色、壁纸变更了。
在 Chrome、Duckduck GO 里都没有变。

加油～！

TristanYang

2019-09-15 23:06:25 +08:00

@TangMonk 这个交互见仁见智...

TristanYang

2019-09-15 23:09:03 +08:00

@gavindexu 额，这个是有意做成这样的，考虑到只是切换色系看看，并不想换具体哪个颜色，换色系时，左边的颜色集合也跟着变了，但上一个选中的还在，只有选中左侧具体哪个颜色，才会变。

muayang

2019-09-15 23:15:45 +08:00 via iPhone

已 star

artandlol

2019-09-15 23:22:21 +08:00 via Android

@TristanYang 网上有那种颜色搭配的摄影画画正常都需要先搭配下颜色的可以试下那些颜色

TristanYang

2019-09-15 23:23:25 +08:00

@muayang 谢谢已发送铜币感谢

FEDT

2019-09-15 23:58:48 +08:00 via iPhone

挺好看的

Danswerme

2019-09-16 01:10:55 +08:00 via Android

挺棒的，另外我记得上次有人在 v 站也发了个中国传统色，地址在这里。

http://zhongguose.com/

Ultraman

2019-09-16 06:49:54 +08:00 via Android

@TristanYang https://i.loli.net/2019/09/16/85kXgms2Q7fTA4n.jpg
就是这样，因为图片长宽比例和屏幕不一致，设置为壁纸时需要再次缩放裁剪，右下角的字这些就显示不完整了

yazoox

2019-09-16 08:24:52 +08:00 via Android

点进去看，好像都是红色

TristanYang

2019-09-16 08:49:45 +08:00 via iPhone

@yazoox 右下角是切换色系的有其他色系 😅

levon

2019-09-16 08:50:15 +08:00

原站居然被重置，我 d 是不是有点太敏感了

TristanYang

2019-09-16 08:55:14 +08:00 via iPhone

@levon 好像确实需要翻墙但是对程序员来说不算啥啦😅

talen666

2019-09-16 09:01:29 +08:00

日本网站打不开。。翻墙也打不开。。

mingyuexin

2019-09-16 09:01:47 +08:00

不错，挺好的。不过我觉得这个页面更好看些 http://zhongguose.com/

zohar727

2019-09-16 09:14:59 +08:00

感觉可选的颜色没有日本那个多唉

TristanYang

2019-09-16 09:21:55 +08:00 via iPhone

@zohar727 数据做了分类，总量差不多。

xh520630

2019-09-16 09:37:58 +08:00

真的好看各种颜色不过他是干嘛用的...就是查颜色吗

godgc

2019-09-16 09:39:55 +08:00

老哥复制功能是用什么做的？兼容性咋样？

TristanYang

2019-09-16 09:41:10 +08:00

@xh520630 哈哈对于设计师来说可能有点用可以复制颜色 hex。普通用户来讲，美即功能，好像还有点用的地方是可以生成壁纸。右上角的下载那个按钮。

star7th

2019-09-16 09:46:24 +08:00

棒。做 app 或者网页的时候可以参考配色了

TristanYang

2019-09-16 09:52:17 +08:00

@godgc https://www.npmjs.com/package/copy-to-clipboard

karnaugh

2019-09-16 09:52:31 +08:00

做的真不错，棒棒哒

richzhu

2019-09-16 10:00:28 +08:00

已 fork

santom

2019-09-16 10:07:47 +08:00

已 star

TristanYang

2019-09-16 10:15:06 +08:00 via iPhone

@richzhu 谢谢

TristanYang

2019-09-16 10:15:19 +08:00 via iPhone

@santom 谢谢

as94boy

2019-09-16 10:15:56 +08:00

可以，颜色蛮全的，可以使用。

TristanYang

2019-09-16 10:16:16 +08:00 via iPhone

@karnaugh 谢谢

TristanYang

2019-09-16 10:16:47 +08:00 via iPhone

@as94boy 谢谢我的目标就是对设计师有一定的实用性

TristanYang

2019-09-16 10:17:16 +08:00 via iPhone

@star7th 谢谢能帮到你我也很开心

XiaoWangZhanzz

2019-09-16 10:29:49 +08:00

支持下!!!!

TristanYang

2019-09-16 10:35:30 +08:00 via iPhone

@XiaoWangZhanzz 谢谢

jay3zhang

2019-09-16 10:38:29 +08:00

很漂亮，支持

TristanYang

2019-09-16 10:51:35 +08:00 via iPhone

@jay3zhang 谢谢欢迎 star 支持

Pillowl

2019-09-16 10:55:03 +08:00 via Android

@TristanYang 如果后续能直接做一个壁纸软件我想是极好的，能自动更换壁纸那种~。

marcong95

2019-09-16 11:04:22 +08:00

@TristanYang #22 但是我在 PC 端（ Chrome 76.0.3809.132 ）在颜色 list 外面滚动可以把整个页面滚动 20px 左右，这个应该是个 bug ？我审查元素点开看，好像没发现那个多出来地方有什么元素

https://i.loli.net/2019/09/16/FTfjyv6z47nKYIB.png

styang

2019-09-16 11:10:54 +08:00

挺好看的

yongyang599

2019-09-16 11:18:02 +08:00

中国色（ http://zhongguose.com/）很久之前发现的

TristanYang

2019-09-16 11:29:28 +08:00

@yongyang599 嗯这个也是从日本那个网站得到的灵感只是技术栈比较老旧了

TristanYang

2019-09-16 11:29:48 +08:00

@Danswerme 嗯这个也是从日本那个网站得到的灵感只是技术栈比较老旧了

RockShake

2019-09-16 11:50:03 +08:00

确实挺漂亮的，赞一个

E1n

2019-09-16 12:10:13 +08:00

赞！ star 一波

E1n

2019-09-16 12:25:19 +08:00

@TristanYang 老哥是服务器在国外，套了国内的 CDN 吗

jdhao

2019-09-16 12:29:09 +08:00 via Android

Seaball0022

2019-09-16 12:43:37 +08:00

很好看，加油！

LeeSeoung

2019-09-16 12:50:43 +08:00

很好看有心了

TristanYang

2019-09-16 13:12:12 +08:00

@E1n 阿里云的服务器

TristanYang

2019-09-16 13:12:39 +08:00

@LeeSeoung 谢谢这几天的辛苦没白费 😋

TristanYang

2019-09-16 13:12:50 +08:00

@Seaball0022 谢谢这几天的辛苦没白费 😋

TristanYang

2019-09-16 13:13:04 +08:00

@jdhao 谢谢这几天的辛苦没白费 😋

belin520

2019-09-16 13:13:17 +08:00

建议：切换主色系的时候，可以默认切换到改色系的第一个颜色中。
这样让用户得到对应的操作反馈

TristanYang

2019-09-16 13:20:41 +08:00

@belin520 谢谢，建议已采纳，修改部署了，已发铜币表示感谢。

meetocean

2019-09-16 13:26:16 +08:00

切换颜色的功能很有意思。

1una

2019-09-16 13:50:27 +08:00 via Android

还有一个 zhingguose.com 也可以考虑

1una

2019-09-16 13:50:48 +08:00 via Android

@1una zhongguose.com

zgw0

2019-09-16 13:51:17 +08:00

我也看到过那个项目, 很不错, 已 star

Peikon

2019-09-16 14:17:46 +08:00

挺好奇不同颜色对应的色号是在哪查的？

xuanli

2019-09-16 14:20:00 +08:00

之前就收藏过，star

Pho3nix

2019-09-16 14:21:50 +08:00

原站我也特别喜欢，新站总感觉比原站厚重了一些

TristanYang

2019-09-16 14:30:36 +08:00 via iPhone

@Peikon 右上角的感叹号弹窗有备注数据来源

TristanYang

2019-09-16 14:36:48 +08:00

@Pho3nix 是的，UI 重构了，也加入了一些自己的想法

zhangH258

2019-09-16 14:38:15 +08:00

这个设计的是真的棒

Exia

2019-09-16 14:41:39 +08:00

感觉不错啊，突然有种自己想修改一波的感觉，加上自定义语句什么的。

zhouyg

2019-09-16 14:44:46 +08:00

好看！

TristanYang

2019-09-16 14:45:03 +08:00

@Exia Pull Request，或者 fork 自己改，都可以哈~

TristanYang

2019-09-16 14:45:30 +08:00

@zhangH258 谢谢，UI 是站在了别人的肩膀上优化了下，😀

TristanYang

2019-09-16 14:45:42 +08:00

@zhouyg 谢谢！

Exia

2019-09-16 14:49:04 +08:00

@TristanYang 哈，谢谢，后来又看了一下楼主你的博客，有点启发，先收藏了。

yehuzi

2019-09-16 15:35:34 +08:00

很漂亮

TristanYang

2019-09-16 16:04:04 +08:00

@yehuzi 谢谢欢迎 star

nodeny

2019-09-16 16:16:12 +08:00

哇，为啥玄色在我这里显示成暗红色

Hermann

2019-09-16 16:16:21 +08:00

很好看，支持

xuanbg

2019-09-16 16:28:42 +08:00

金色不够深，银色不够亮

samaxu

2019-09-16 16:33:06 +08:00

求加个改文字的功能，不知道有没有这种文字库

TristanYang

2019-09-16 16:39:04 +08:00 via iPhone

@samaxu 改文字？是指改文字的字体吗？还是文字的内容？

lizz666

2019-09-16 16:42:22 +08:00

小米 pro。14 寸屏？反正下面有部分看不到，滚动条滚动距离不够

lizz666

2019-09-16 16:43:34 +08:00

刷新下，底部那些看不到的文字又没有了

Bairrfhoinn

2019-09-16 17:08:47 +08:00

没有五彩斑斓的黑，哈哈，玩笑，勿怪......

100

est

2019-09-16 17:10:28 +08:00

老哥厉害了。看上去不错

1 2

❮

❯