CSS – 实战 Color

前言

这篇想整理一下在网页开发中, 颜色是如果被处理的.

网页都有什么颜色?

网页篇幅最大的颜色, 通常是来自图片, 不管是背景图, 还是内容图片. 这些都是比较 colorful 的.

其次是黑白灰, 因为除了图片, 大部分内容都是文字. 而文字比较舒服的阅读色就是白纸黑字 (dark mode 就另外说).

其余的地方, 比如 button, 卡片, 背景色等等, 这些就是主色, 邻近色, 补色的发挥场地了.

选主色, 邻近色, 补色

参考: 

为什么要这样分类? 

因为在用色的时候, 其实我们并不关心具体使用什么颜色, 我们关心的是表达主次.

比如有几张卡片, 白色很单调, 我可以放主色, 如果我想更丰富一些, 那每张卡就用不同色, 各自放邻近色.

卡内有个 call to action, 想它亮起来就用个补色. 把具体颜色抽象出来, 只表达颜色的意图, 这样就可以换 theme (color) 但不换意图.

怎么选?

我不是设计师, 所以没办法通过品牌, 形象, 从色彩心理学选出适合网页的颜色.

通常我会从原有的资料入手, 比如 logo 用色, 宣传单用色, 甚至其它同行的用色, 从中选出一个主色.

有了主色就可以通过色轮选出邻近色和补色了.

选好颜色后, CSS 可以这样声明

$color-primary: hsl(206, 94%, 28%);
$color-analogous-b1: hsl(207, 100%, 17%);
$color-analogous-s1: hsl(195, 100%, 43%);
$color-analogous-s2: hsl(169, 66%, 56%);
$color-complementary: hsl(49, 100%, 62%);

主色, 邻近色, 补色. 邻近色通常会选好几个, 可以通过 s1 small, b1 big 来做区分.

黑白灰色调

白色就是纯白 rgb(255, 255, 255)

黑却不是纯黑, 可能是纯黑太过黑暗了...通常会用 primary - 亮度让它变成接近黑色, 或者用灰色调成低调黑.

灰色则会分出很多色调, 在黑白之间, 想表达出层次, 主次, 就需要多个色调,

想象一下, 大设计师通常是不上色作画的, 他们会先搞黑白灰, 但通过色调已经看出层次. 最后才上色

色调一般分为: 白，粉，明，鲜, 高级灰，深，黑

CSS 可以这样声明

$color-gray-100: hsl(0, 0%, 98%);
$color-gray-200: hsl(0, 0%, 95%);
$color-gray-300: hsl(0, 0%, 93%);
$color-gray-400: hsl(0, 0%, 75%);
$color-gray-500: hsl(0, 0%, 60%);
$color-gray-700: hsl(0, 0%, 13%);
$color-black: $color-gray-700;

选了最深的灰色作为黑色.

代表色

除了主色, 邻近色, 补色, 黑白灰, 网站还会有一些代表色,

比如红色代表 alert, 橙色代表 warning, 蓝色代表 info 等等. 

至于红色要用什么色调就看喜好了, 因为区别不是很大.

CSS 可以这样声明

$color-red: hsl(2, 77%, 45%);

背景色和字体颜色

字体颜色通常是黑或白, 蓝色代表 link, 很少会用其它颜色.

而使用黑还是白, 取决于它的背景色. 为了让字体能被看清 (contrast), 建议在设置背景色时同时设置字体色.

&:hover {
  background-color: $color-primary;
  color: auto-font-color($color-primary);
}

通常它两是有对比关系的, 深色背景就要配白色字, 相反浅色的背景就配黑色的字. 

这个 auto color 可以用 Sass 来实现

@function auto-font-color($background-color) {
  @return if(color.lightness($background-color) > 50%, $color-black, white);
}
(新)CSS(新)平面设计

相关

标签