为什么做？

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

这个工具有哪些功能？

一句话讲 “是给非 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 写的软文，我自己看着都觉得假，也不敢往外发。写作文的水平还需要大量提升；

最后

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