Skip to content

Arcade › 调色工坊

调色工坊

  • utility
  • color-tool
  • crafting
  • ui
  • chinese
0
Remix it Discord

0 plays

How to play

Click the game above and it runs right here in your browser. No download, no installer, no account needed. It was built with Cinevva, so it works on a phone or a tablet too.

Discussion

Nobody has said anything about 调色工坊 yet. Play it, then tell the creator what you would add next.

Make your own game

调色工坊 was built with the Cinevva game creator: describe the game you want in chat, watch it get built, and play it in your browser minutes later.

Remix 调色工坊 opens the real game in the creator and forks its actual files, chat and design doc, so you start from the code rather than from a description.

Read the build brief for 调色工坊

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

重建一个名为“调色工坊”的中文单页互动调色工具,整体不是传统关卡游戏,而是可操作的配方计算器。画面为浅灰米色背景(约 #efeee9),居中一个最大宽度约1080px的应用容器,顶部标题“调色工坊”,副标题“根据目标色反推颜料配方 · 或从当前色调向目标色”,右上有白色圆角模式切换:绿色高亮“目标调色”,旁边为“过渡调色”。使用干净、现代、低对比度的中文 UI:白色圆角卡片、柔和阴影、深灰文字、灰色辅助文字、绿色强调色约 #3a7d6b,字体优先 Noto Sans SC。

桌面端主体为左右两栏白色面板,左栏略窄,右栏略宽;窄屏时上下堆叠。左卡片标题“设定颜色”。目标调色模式中显示目标色预览方块(默认红色 #C8332B,约64px圆角方块),旁边有“目标色”标签、可编辑十六进制输入框“#C8332B”、一个原生颜色选择器,以及三条 RGB 滑杆。三条滑杆分别标注 R、G、B,范围0到255,默认值 R=200、G=51、B=43,右侧显示当前数值;滑块为白色圆形、绿色边框,轨道浅灰。十六进制输入、颜色选择器和滑杆必须双向同步,修改任一项立即更新色块、HEX和RGB数字。输入非法HEX时不要破坏当前有效颜色。

目标色下方是“颜料库”,右侧显示启用数量,初始为“14/14 种”。用14个小圆形色样芯片横向换行排列,按顺序使用这些颜料及近似颜色:钛白 #F6F4EE、碳黑 #161616、镉黄 #FAC80C、土黄 #B07A2A、镉橙 #E5691A、镉红 #C12B26、永固玫瑰 #B22A52、紫罗兰 #482668、群青 #2B3A8C、酞菁蓝 #163FA0、湖蓝 #1E7A8E、酞菁绿 #0E7A50、熟褐 #5A381C、熟赭 #7C3A1E。启用芯片用绿色外圈表示;点击芯片切换启用/禁用并重新显示计数,但始终至少保留一个启用颜料。其下为“调色总量”数字输入,默认100,最小1,单位“克”,改变后用于配方克数计算。

右侧白色卡片标题初始为“推荐配方”。顶部显示计算出的混合色大色块、中文色名和HEX,例如初始目标下显示接近红色的“浅红/红 · #...”形式;下面显示“与目标色匹配 98% · ΔE 0.9”格式,其中匹配百分比绿色加粗,ΔE保留一位小数。下方是配方行列表,每行浅米色背景、圆角,包含颜料圆点、颜料名称、百分比和克数胶囊,例如“镉红 88.6% 88.6 g”“钛白 6.7% 6.7 g”“镉橙 4.7% 4.7 g”。按比例从高到低排列,只显示非零项。底部有并排按钮:“计算配方”(实心绿色)与“复制配方”(白底绿色描边),再下面显示说明文字,如“配方非常接近目标色,可直接使用。”

核心交互:点击“计算配方”后,根据当前目标色和启用颜料计算推荐配方;初始化时也自动计算一次。采用颜料的减色混合近似:先把sRGB转线性RGB,在log空间对启用颜料颜色做带约束权重求解,权重均非负且总和为1,再用每个通道的加权几何均值混合,转回sRGB。配方应倾向稀疏,实际只保留约3到5种颜料;每种配方行显示百分比(1位小数)和“权重×调色总量”的克数(1位小数)。用D65 Lab计算目标与结果的ΔE,匹配度为 max(0, round((100 - ΔE*2.2)*10)/10)。根据结果颜色用HSL给出简短中文色名(红、橙、黄、绿、青、蓝、紫、品红等,带深/浅/亮前缀),格式为“颜色名 · #RRGGBB”。

“过渡调色”模式是第二种真实工作模式。点击右上切换按钮后,按钮状态改变,左面板在目标色下方显示额外的“当前色”区块,包含当前色预览、HEX输入、颜色选择器和RGB三条滑杆;默认当前色为 RGB(107,88,54),即 #6B5836。右侧标题变为“调色方案”。计算时把当前色作为一个名为“当前色”的伪颜料放在颜料库第一项,再和启用的14种颜料一起求解到目标色;配方行中的当前色后追加灰色小字“(现有)”。根据当前色所占比例显示提示:至少70%时“当前色占 X%,只需添加少量颜料即可过渡到目标色。”;30%到70%时“当前色占 X%,需添加较多颜料调整。”;低于30%时“当前色与目标色差距较大(仅占 X%),建议改用「目标调色」重新调配。”。目标调色模式提示按匹配度分级:匹配>=98显示“配方非常接近目标色,可直接使用。”,>=90显示“配方接近目标色,肉眼差异很小。”,否则显示“受颜料库限制,混合色与目标色有可感知偏差。可尝试启用更多颜料或调整目标色。”

“复制配方”按钮在已有计算结果时,将中文纯文本写入剪贴板,内容包括调色模式、目标色→混合色、匹配和ΔE、总量,以及每个颜料的百分比和克数;成功后把底部提示改为“已复制到剪贴板。”,失败则显示“复制失败,请手动选择文本。”。未计算时复制按钮不做任何事情。保持按钮点击反馈、圆角、阴影和移动端触控友好。页面可滚动但整体视觉应尽量呈现为截图中的简洁双卡片工作台。

More free browser games

Browse the whole Arcade →