在网络上更好地管理颜色的7个技巧

在前端开发人员在网站创建过程中遇到的众多问题中,管理颜色肯定是在列表的最后。尽管如此,如果你想要一个干净和一致的网站布局,良好的色彩管理很重要。

这不仅会阻止您的网站看起来像彩虹,而且还意味着您不会出现多种颜色相同的颜色(这已经发生在我身上很多次)。本文将介绍我经常使用的一些顶级技巧和工具,用于管理基于Web的项目中的颜色。

01.将所有颜色放在样式指南中

Manage colour better on the web

创建一个调色板,让你保持正确

首先,在创建网站之前,您应该有一个基本的设计风格指南或包含您计划使用的所有颜色的调色板。这并不意味着您在开发过程中无法为网站添加颜色,但它可以帮助您跟踪已有的颜色,因此不会以略微不同的色调重复这些颜色。

不包括黑色,灰色和白色,最好在您的网站上不超过五种不同的颜色。当然,这是一般规则,可能有一些例外。需要更多指导?看看我们的文章如何为您的网站选择完美的调色板

02.使用一个文件只是为了颜色

使用CSS预处理器的好处之一,如萨斯能够将样式分成许多不同的文件,并将它们组合成一个文件输出CSS。考虑到这一点,我认为最好使用一个文件作为您网站的主要颜色,以及它们的任何变体。这不仅可以更容易地定位颜色变量,还可以定期提醒您使用的颜色和颜色。

03.命名颜色变量

Manage colour better on the web

给你的颜色变量名称是一个很好的提示

最好给出网站变量名称的主要颜色,这些颜色与实际颜色或它们的外观相对应(如果您倾向于自定义命名空间,也可以使用自定义命名空间)。

因此,麦当劳网站的黄色将具有变量名称$ MC-黄色HTML颜色名称喜欢艾莉斯蓝深粉红(以及其他140种颜色)不需要自定义变量名称,因为它们已经很容易记住。如果您使用库来处理已包含变量名称的颜色(例如给我上色Sass),你可以让你的自定义变量等于库变量,所以$ MC-黄色=$ YellowGold

04.使用Sass地图颜色

此提示是可选的,因为它取决于您编写CSS的方式。 Sass贴图可以更容易地将类名分配给不同的颜色及其相关的CSS属性 - 非常类似于大多数编程语言中的循环。

例如,如果您想要在您的网站上使用的所有颜色的背景颜色类,这是最好和最干净的方法:

$ theme-colors :(珊瑚:$ color-coral,橙色:$ color-orange,黄色:$ color-yellow,绿色:$ color-green,teal:$ color-teal,blue:$ color-blue,purple: $ color-purple,grey:$ color-grey,black:$ color-black); @each $ theme-color,$ color in $ theme-colors {.bg  - #{$ theme-color} {background-color:$ color; }。#{$ theme-color} {color:$ color; }}

这种方法对于那些写作的人特别有用原子CSS

05.使用Sass不透明,轻盈和黑暗

Manage colour better on the web

利用Sass内置的功能

对于主网站颜色的亮度,暗度或不透明度的微小变化,不要指定另一个HEX值字符串,最好使用Sass内置的函数以及自定义颜色变量。用于不透明度RGBA,对于亮度和黑暗使用它们各自的功能。

我充分意识到Sass还包含混合颜色以及调整色调和饱和度的功能,非常欢迎您使用这些功能,但我还没有在我的项目中找到它们的原因。当然,我建议你给你的颜色变化自定义变量,以便于记住它们。

$ cool_purple:mix($ red,$ blue,50%); body {background-color:$ cool_purple; } body {background-color:desaturate($ amberDull,14%); } body {background-color:saturate($ greenSea,39%); }

06.在开发人员工具中使用自定义调色板

Chrome DevTools配有一个很棒的吸管工具,用于挑选颜色。然而,为了在背景,边框,文本等方面尝试颜色,我发现将主题中的主要网站颜色放入DevTools自定义调色板非常有用,这使您可以通过单击更新颜色一个按钮。

07.尝试使用原子颜料

最后但并非最不重要的是这个非常棒的Atom包。颜料只是用它代表的实际颜色突出显示一个颜色字符串,十六进制或其他颜色。这听起来很基本,但是当它与Sass一起使用时,Pigments变得非常有用。

该插件还强调Sass颜色变量及其各自的颜色,无论它放在代码中,即使在不同的文件中也是如此。它还会根据不透明度或应用于其的任何Sass函数立即更改颜色。

Manage colour better on the web

Atom的颜料比您想象的更有用

我无法开始描述在代码中进行颜色变化的即时视觉反馈是多么有用。如果你忽略了我所有的其他颜色提示而且只是这样做,我会认为这篇文章是成功的。

相关文章:



翻译字数超限