不知道大家在开发个人项目的时候有没有遇到过以下问题：我的项??目的主色调应该用什么颜色页？背景色是什么颜色？二次色呢？对于具有可定制主题的项目，如何根据用户选择的原色生成额外的二次色？...前三个问题可以参考专业的配色网站，但是第四个问题，在页面颜色不确定的情况下，如何根据用户设置的主色生成一套完整的配色方案？还要保证不同颜色之间的识别。……最后只能求助于配色的极致：黑、白、灰、3色调。虽然黑、白、灰是通用的配色方案，但对于某些类型的项目来说，黑、白、灰似乎并不相配。比如我目前在做一个小程序，它的基本功能就是画图，然后在这个基础上增加更多的玩法。对于绘图项目，需要支持和操作各种颜色。如果主题色是黑、白、灰，显然是不匹配的。当然，如果有专业的UI设计，是完全没有问题的。本文仅针对没有UI设计的项目。作为前端开发者，如何将页面的颜色搭配好。配色原则要想配色，首先要了解颜色。可能你认为自己写了这么多年前端页面，早就知道颜色了。我不这么认为。例如：浏览器支持哪些颜色模型？不同的颜色模型是如何定义的？RGB是按等级定义三原色，那HSL呢？单纯疱疹病毒呢？不同颜色模型之间如何转换？对于没怎么用过HSL的同学，可能没有想过这些问题。因为在平时的开发中，根本用不到。颜色都是UI提供的十六进制或者RGB格式，直接复制使用即可。但是要想学好配色，就必须了解这些问题。当然，我也是一个非专业的UI。刚好在做项目的时候遇到了这些问题，然后站在一个前端开发者的角度，总结了一些个人的经验，仅供参考。为什么我们需要了解这些问题？因为配色一般不是基于RGB，而是基于HSV颜色模型。如果使用RGB模式，那么搭配出来的颜色基本都是乱七八糟的，很难人为控制。但是单纯疱疹病毒没有。它可以先确定一个色相，然后根据色相生成一系列颜色，从而可以手动控制颜色。这些问题的答案可以参考我之前的文章《如何封装一个颜色选择ColorPicker组件？》，里面专门介绍了颜色模型。了解了以上问题后，配色就不难了。比如我要搭配一个红色主题：首先，将色相H设置为0°；主题色：一般是辨识度高的颜色，看起来很鲜艳。主题是要脱颖而出，吸引人们注意。所以我们可以把饱和度S调高一些，在70%到90%之间看起来会比较舒服。太低则难以突出主体，太高则显得刺眼。亮度V一般可以设置为80%左右。辅助色：一般比主题色低一级，可用于变灰、禁用、背景、辅助描述等状态。然后，我们可以把饱和度S调低一些，大概10%到30%，根据不同的场景来定，亮度V基本在80%左右。如果你还需要配置反色系统，也很容易做到，只需将色相H旋转180°即可。文字描述薄弱，没有代入感。具体搭配效果可以参考我的小程序。小程序可以支持任意主题色的配置。总结起来就是：色系先由色相决定，再根据色相决定其他配色。这样一套颜色就不会太杂乱，也能很好地控制主次关系，保证不同颜色之间的关系是一致的。认出。看我封装的两个颜色生成函数（代码中使用了@moohng/dan和color-convert库）：/***生成随机背景色*@returns*/exportfunctiongeneralBgColor(s=80,v=dan.random(80,90)作为数字,a=1){consth=dan.random(0,360)作为数字;//随机色调const[r,g,b]=hsv.rgb([h,s,v]);//转RGBreturn`rgba(${r},${g},${b},${a})`;}/***根据指定颜色生成同色系Themecolor*@paramcolor*@returns*/exportfunctiongeneralThemeColor(color:string,s=80,v=dan.random(80,90)asnumber,a=1){constrgbValue=color.match(/\d+/g)复制代码与RGB一样不为人知；const[h]=rgb.hsv(rgbValue);//获取色调值const[r,g,b]=hsv.rgb([h,s,v]);return`rgba(${r},${g},${b},${a})`;}总结一下，这个方案是我自己开发的，从开发者的角度来说真的很好用.最后放一个我的小程序代码，自己体验一下。如果觉得不错，可以关注我的公众号【末日码农】，我会把开发中遇到的实际问题和一些不错的技术常识分享给大家。最后，感谢阅读。上一篇：《如何封装一个颜色选择ColorPicker组件？》
