一款适用于各行各业的颜色搭配工具推荐

简介

是一款设计师效率工具，可帮助设计师搭配颜色，提供海量的色卡信息参考
体验地址： 颜典 : color-tool

功能

色卡

主要包含以下色卡：

• Flat UI
• Material
• Tailwind
• Fluent UI
• Open
• HTML
• Other

点击色块可复制对应颜色信息

点击左侧索引可快速定位对应栏目

点击上方导航可呈现对应的色卡内容，左右可滑动查看其它色卡导航

传统色

主要包含两种色卡

• 中国传统色·节气
  • 颜色取自《中国传统色·故宫里的色彩美学》一书，包含384种中国传统色，以二十四节气进行区分。颜色信息主要包含16进制HEX值、RGB值及书中给的CMYK印刷颜色值。
• 日本传统色
  • 颜色取自《日本の伝統色》一书，包含465种颜色。主要信息有对应颜色的16进制HEX值、RGB值、算法计算的CMYK值及对应日文名称。

点击左侧可筛选对应色系颜色

点击右侧可索引定位到对应栏目

点击上方可切换对应传统色

颜色

可在色盘里搭配选择颜色

底下三条分别控制调整颜色的饱和度、亮度及不透明度

往下栏目为当前控制颜色的各个颜色空间对应的值，输入框内可进行更细致的颜色值的改变调整

输入框右侧复制按钮点击可复制对应颜色值，上方加号按钮点击可新增另一个调整颜色(可保存最新6个)

最底下展示有当前调整颜色的中差色、相似色、对比色、类似色等

渐变色

包含两个渐变信息栏目，总共有近一千种渐变色提供

点击对应的渐变色，会弹出信息更丰富的Dialog，可对渐变色的渐变角度进行调整，复制对应的CSS代码及图片

左侧索引点击可筛选包含对应色系的渐变色卡

提取

点击右下角按钮可选取本地图片

选取完成后，会对所选取图片分析计算，给出对应图片的主调色及搭配色，共10个色块

特性

• 丰富的颜色信息：七大色卡 + 两大传统色 + 两类渐变色，可满足大部分设计师的颜色搭配需求
• 包含项目所用到的所有颜色整合的原始json数据，可复用于其它项目
• 提供各类颜色格式的置换算法及各颜色格式的验证算法
• 模仿Axios的设计理念，封装了fetch、uni.request接口，提供更加简便好用的请求体验
• 采用vue3 SFC、Typescript等前端前沿技术开发
• 实现了美观绚丽的自定义TabBar，主页图标可随时间变化而变幻，提供别致的体验
• 同时，PC端还实现了深色模式，可根据系统模式自动切换

预览

移动端

emmm自己体验吧

pc端

最后

• 体验地址提供功能体验，但不保证稳定性，也许哪天就废了，项目部署维护消耗全靠个人兴趣发电
• 如对源码感兴趣的可关注B站工房