我做了一个方便调色与配色的工具

wangg_mail — Mon, 02 Jun 2025 16:48:20 +0800

为什么做？

其实这是我做的第一个产品，为了给自己信心，所以尽可能的从简单开始做起。没有考虑它会不会成功，先上手干了再说了，一边学习技术，一边尝试着让自己从产品的角度来考虑问题。我借着今天这个机会，总结一个心路历程。不愿意看文字，直接想看产品的，请点击此处我的配色工具。

这个工具有哪些功能？

一句话讲 “是给非 UI 专业人员进行调色与配色的工具”。所以提供了以下的功能：

rgb、hex 颜色值的相互转换；
rgb、hex、hsl、hsv、lab、cmyk 等颜色模型值计算；
颜色透明度计算预览；
rgb、cmyk、hsv、hsl、lab 不同颜色模型下的色阶计算预览；
多种色彩搭配方案，包含互补色、分裂互补色、相似色、三角色、四色方格、四色矩形、N 色等；
内置了中国传统颜色、日本传统颜色、Copic 色系、乐高色系、W&N 色系、HTML 命名颜色共 600 多种颜色，内置了这 600 多种颜色的调色与配色方案，并支持在线微调；

版本迭代

版本一

5 月 19 号，我发布了第一个版本，技术栈非常简单，HTML + CSS + jQuery 就完成了所有的开发。从在 github 上建项目，到部署到 vercel 只花了一个下午的时间，产品就算是草草上线了。当时完成的功能只有 rgb 与 hex 的相互转换，样式也比较粗糙，尽管有 AI 帮忙，还是也没有很好的视觉效果。向 google 提交网站之后，google 给出了很多的优化建议，其中一条就是 CSS、JS、HTML 文件都没有压缩。所以我不得不进行改版本；

版本二

由于一边上班一边搞，所有只能晚上搞，在又经过一周之后，修改如下：

修改了 title、description 等，优化 SEO；
添加 opengraph 与 twitter 相关的元信息；
添加 Google Analysis 代码；
引入开源 chroma-js 库，简化代码；
写了几篇如何通过代码处理颜色转换的博客；通过以上修改，算是完成了第二个版本，问题在于样式还是比较难看，学习了其他类似网站，发现他们都做的比较好看而且实用；于是又进行第三次改版本。

版本三

最近一周完成了第三次改版本，也是当前一版；

使用 next.js 做为技术框架；
把相关组件都结合 AI 进行重写；
着重处理配色与色阶的功能；
内置公认好看的颜色，并对每个颜色进行配色方案的预置，也可以提供在线微调；经过三个版本的调整之后，我也 show 一下页面；

我的收获

这一个简单的小产品，对于我有很大的收获，如下：

SEO 入门，了解了对 SEO 影响的地方在哪儿，比如 title、description、h1、元信息标签、页面结构、移动端兼容性等等；
学到了一个大佬的一句话 “分门别类罗列”，也不知道我现在理解的对不对，先慢慢摸索吧；
next.js 技术栈算是会用了，精通算不上，用到什么学什么吧；
了解了要上线一个产品的全流程；

我的不足

挖掘需求的能力还非常弱鸡，基本上算是没有；
SEO 也是弱鸡中的弱鸡，还需要给着大佬们好好学习，也求带；
推广能力也是弱鸡，不会写文章，不做搞外链，平时 AI 写的软文，我自己看着都觉得假，也不敢往外发。写作文的水平还需要大量提升；

最后

最后，还是要向大家推荐一下我的小产品我的配色工具，希望大家能多提意见，让我改进它。

wangg_mail (gang)