文章 2026/5/18

Toon Tone Color:一个免费浏览器色彩记忆小游戏,测测你对卡通角色的颜色有多熟

免费 5 轮 HSB 调色挑战,凭记忆匹配卡通角色颜色,打完生成可分享的成绩卡片。无需登录,打开即玩。

Toon Tone Color:一个免费浏览器色彩记忆小游戏,测测你对卡通角色的颜色有多熟

为什么做这个小游戏

前段时间刷短视频时,看到一个挑战:不看参考,凭记忆调出某个经典卡通角色的颜色。评论区里有人自信满满,有人调出来发现和原版差了十万八千里。

我觉得这个互动形式很有趣,但没有一个专门的地方让人快速玩一轮。于是做了 Toon Tone Color —— 一个纯浏览器端的色彩记忆小游戏。

怎么玩

打开网站,你会看到一个卡通角色的文字描述,比如"a cheerful yellow sponge-like hero"(一个 cheerful 的黄色海绵状英雄)。目标很明确:用 HSB(色相/饱和度/亮度)三个滑块,调出你认为正确的颜色。

每轮提交后,系统会对比你的答案和目标值,从色相偏差、饱和度偏差、亮度偏差三个维度算出 0-10 分的成绩。5 轮结束后取平均分,解锁一个段位称号:

  • Color Rookie(0-2.9)
  • Hue Scout(3.0-4.9)
  • Palette Fighter(5.0-6.4)
  • Tone Knight(6.5-7.4)
  • Color Master(7.5-8.4)
  • Palette Legend(8.5-9.2)
  • Tone Mythic(9.3-10)

几个设计上的考虑

免登录、无下载。 缩短从"想玩"到"在玩"的路径。打开网页,点一下就开始。

结果卡片本地生成。 打完可以复制一段文字分享,也可以直接复制一张成绩卡片图片。这个图片是用浏览器 Canvas 实时画的,不会上传到你的服务器,也不会存进数据库。

HSB 而不是 RGB。 对大多数人来说,"色相偏了"比"红色通道多了 30"更直观。这也是这个游戏的隐藏价值——玩几轮下来,你对 HSB 三个维度的感知会明显变敏锐。

Fan-made 定位。 所有提示都用文字描述,不出现官方图像、Logo 或角色名。我们在页脚和多处标注了免责声明,明确这是粉丝向的色彩记忆游戏,不与任何品牌官方关联。

技术栈

  • Next.js 15 + React 19 + TypeScript
  • Tailwind CSS 做样式
  • 纯客户端状态,localStorage 只存最近一次分数和段位
  • 部署在 Cloudflare Workers(OpenNext.js)

适合谁玩

  • 想测测自己"二次元浓度"的人
  • 做设计、插画的朋友,想练色彩直觉
  • 朋友之间互相挑战分数
  • 短视频创作者找互动素材

试试

👉 Toon Tone Color

目前一共 8 个角色题目,难度分 easy 和 medium。欢迎玩完来评论区晒你的段位 —— 我目前最高只到 Palette Fighter,想看看有没有 Tone Mythic 的大神。

文中提到的产品

暂无关联产品