当前位置: 首页 > Web前端 > HTML

前端配色的秘诀:怎么搭配都好看

时间:2023-03-28 01:24:32 HTML

不知道大家在开发个人项目的时候有没有遇到过以下问题:我的项??目的主色调应该用什么颜色页?背景色是什么颜色?二次色呢?对于具有可定制主题的项目,如何根据用户选择的原色生成额外的二次色?...前三个问题可以参考专业的配色网站,但是第四个问题,在页面颜色不确定的情况下,如何根据用户设置的主色生成一套完整的配色方案?还要保证不同颜色之间的识别。……最后只能求助于配色的极致:黑、白、灰、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组件?》