彩机显影剂初始化_如何减少显影剂对颜色的吸收

彩机显影剂初始化

This article has been co-written with Esther Boulanger, who is a UI designer. Many thanks to her for helping me with the content and the drawings!

本文已与 UI设计师 Esther Boulanger 共同撰写 。 非常感谢她为我提供的内容和图纸帮助！

What comes first to your mind when you think about design? The first thing that pops into my head is colors. Colors are everywhere and essential for design.

当您想到设计时，首先想到的是什么？ 突然出现在我脑海中的是颜色。 颜色无处不在，对于设计至关重要。

Working with colors seems simple. At least, it does until you have to design a user interface and choose your color palette. At that moment, you have writer’s block but applied to design. You try to do stuff, but nothing ever looks good. After a while, you think, who cares, you’re not one of these design magicians, you just suck at design. I’ve been there.

使用颜色似乎很简单。 至少要这样做，直到必须设计用户界面并选择调色板。 那时，您有作家的障碍，但已应用于设计。 您尝试做某事，但是看起来没有一件好事。 过了一会儿，您认为，谁在乎，您不是这些设计魔术师之一，您只是在吸吮设计。 我去过那儿。

However, it’s useful to know at least the fundamentals of what makes a user interface great. And whether you like it or not, colors are an essential component of it. Without further ado, let’s take a look at how you can make use of colors in your UI and much more.

但是，至少了解使用户界面更出色的基本知识很有用。 不管您是否喜欢，颜色都是其中必不可少的组成部分。 事不宜迟，让我们看一下如何在UI中使用颜色等等。

色彩格式 (Color Formats)

There are a lot of formats for colors. The most popular ones are Hex, RGB, HSB, and HSL. Let me explain the differences between them and which one you should use.

颜色有很多格式。 最受欢迎的是十六进制，RGB，HSB和HSL。 让我解释一下它们之间的区别以及应该使用哪一个。

十六进制和RGB (Hex and RGB)

RGB and Hex are the most common formats for representing colors.

RGB和十六进制是表示颜色的最常见格式。

RGB gives us the intensity of red, green, and blue of one color. Intensity is a number that can go from 0 to 255. As an example, you could define a light purple color with 164 of red, 43 of green, and 217 of blue:

RGB给我们提供一种颜色的红色，绿色和蓝色的强度。 强度是一个从0到255的数字。例如，您可以定义浅紫色，其中红色为164，红色为绿色，43为蓝色。

.color {
  color: rgb(164, 43, 217);
}

Hex stands for hexadecimal. It’s similar to RGB; only the format changes: #RRGGBB.

十六进制代表十六进制。 与RGB类似； 仅格式更改： #RRGGBB 。

As with RGB, R is for the intensity of red, G for green, and B for blue. These values can go from 00 to FF (which means 0 to 255 if you convert it to decimal). For example, #FF0000 represents a pure red. Indeed, #FF means red is at its highest intensity (255) and the others are at their lowest.

与RGB一样，R代表红色的强度，G代表绿色，B代表蓝色。 这些值可以从00到FF(如果将其转换为十进制，则意味着从0到255)。 例如， #FF0000代表纯红色。 实际上，＃ #FF表示红色处于最高强度(255)，而其他处于最低强度。

I’ll say it upfront, those two formats aren’t the best when you have to pick colors. Indeed, let’s say you want your app to have a blue primary color. You won’t have only one blue, right? You’ll have to make a lighter blue or a darker blue. Well, good luck doing that with RGB and Hex.

我会预先说，当您必须选择颜色时，这两种格式并不是最好的。 实际上，假设您希望您的应用具有蓝色原色。 您将不会只有一种蓝色，对不对？ 您必须将其设为浅蓝色或深蓝色。 好吧，祝您使用RGB和Hex做到这一点。

Note: RGB and Hex are not suitable for picking colors, but you can still use them for representing colors.

注意：RGB和十六进制不适用于选择颜色，但是您仍然可以使用它们来表示颜色。

That being said, let me introduce you to HSB, HSL, and their differences. Let’s begin with HSB.

话虽如此，让我向您介绍HSB，HSL及其差异。 让我们从HSB开始。

汇丰银行 (HSB)

HSB means hue, saturation, and brightness.

HSB表示色相，饱和度和亮度。

• H stands for hue. It’s a number measured in degrees that is between 0 and 360. The following drawing speaks for itself:
  H代表色调。 它是一个以度为单位的数字，介于0到360之间。下图说明了这一点：

If you have a visual memory and you want to pick a color, this drawing will be your best friend.

如果您有视觉记忆并想要选择一种颜色，则此绘图将是您最好的朋友。

What about saturation and brightness? For that, let’s take a look at the following drawing:

饱和度和亮度呢？ 为此，让我们看一下下图：

These four circles all have the same hue (210°), but still, they look different. Well, that’s because of saturation and brightness.

这四个圆都具有相同的色相(210°)，但是看起来却有所不同。 好吧，那是因为饱和度和亮度。

• S stands for saturation. It’s a percentage representing how vibrant color is. Zero percent means you have no saturation, while 100% means you have the maximum. If you choose to add a blue to your UI with a hue of 210° and saturation of 0%, you’ll get a gray color. High saturation, vibrant color. Low saturation, dull color.
  S代表饱和。 这是代表鲜艳色彩的百分比。 零百分比表示您没有饱和度，而100％表示您具有最大饱和度。 如果您选择向用户界面添加210°色度和0％饱和度的蓝色，则将获得灰色。 高饱和度，鲜艳的色彩。 低饱和度，暗淡的色彩。

To better visualize the saturation for color, here is the blue we saw above, with different variations:

为了更好地可视化颜色的饱和度，以下是我们在上面看到的蓝色，具有不同的变化：

However, you can get two different results for brightness at 100% depending on the saturation:

但是，根据饱和度，您可以获得100％的亮度的两个不同结果：

1. If the saturation is at 0%, you’ll get pure white.
   如果饱和度为0％，您将获得纯白色。
2. If you have a saturation different than 0%, you’ll just get a highly bright color that is more or less vibrant.
   如果您的饱和度不同于0％，那么您将获得或多或少鲜艳的高度明亮的颜色。

The most perceptive of you will think, OK, HSB is great, but you can’t work with HSB in CSS. Instead, CSS supports HSL. Let’s see it right away.

你们中最具洞察力的人会认为，好的，HSB很好，但是您不能在CSS中使用HSB。 相反，CSS支持HSL。 让我们马上看。

高速钢 (HSL)

HSL means hue, saturation, and lightness. Thus, the only difference compared to HSB here is the lightness.

HSL表示色相，饱和度和亮度。 因此，与HSB相比，唯一的区别是亮度。

Lightness represents how close a color is to black or white. Zero percent lightness is equal to black (like the brightness). But 100% lightness is equivalent to white no matter the hue or the saturation. This is the big difference between brightness and lightness.

亮度表示颜色与黑色或白色的接近程度。 零百分比亮度等于黑色(如亮度)。 但是，无论色相或饱和度如何，100％的亮度都等于白色。 这是亮度和亮度之间的最大差异。

Let’s take a value example with HSB and HSL. We’ll take a hue of 250° (darker blue) and a saturation of 75% (very vibrant).

让我们以HSB和HSL为例。 我们将采用250°的色相(深蓝色)和75％的饱和度(非常鲜艳)。

For HSB, you’ll get:

对于HSB，您将获得：

• H=250, S=75%, B=0% → black
  H = 250，S = 75％，B = 0％→黑色
• H=250, S=75%, B=100% → very bright blue
  H = 250，S = 75％，B = 100％→非常亮的蓝色

For HSL, you’ll get:

对于HSL，您将获得：

• H=250, S=75%, L=0% → black
  H = 250，S = 75％，L = 0％→黑色
• H=250, S=75%, L=50% → very bright blue (the same as with HSB)
  H = 250，S = 75％，L = 50％→非常亮的蓝色(与HSB相同)
• H=250, S=75%, L=100% → white
  H = 250，S = 75％，L = 100％→白色

There’s something I find weird with HSL while designing. When I move the lightness up or down and convert it to HSB, the saturation isn’t the same. For that reason, I prefer to work with HSB, which seems easier to me.

在设计时，我发现HSL有点奇怪。 当我向上或向下移动亮度并将其转换为HSB时，饱和度是不一样的。 因此，我更喜欢使用HSB，这对我来说似乎更容易。

In the end, it doesn’t matter if HSB is not available in CSS. What you can do is pick your colors upfront with HSB and convert them to hexadecimal values.

最后，HSB是否在CSS中不重要。 您可以做的就是使用HSB预先选择颜色并将其转换为十六进制值。

You know about color formats. Great. Let’s deep dive into the exciting stuff.

您了解颜色格式。 大。 让我们深入研究令人兴奋的东西。

颜色变化 (Color Variation)

Don’t trust the tool that magically gives you a palette with four or five different colors; it won’t work. What you need to learn instead is how to make color variations. Trust me, with gray and a primary color, you can already make pretty good UIs. Look at the apps and websites around you; they usually have one primary color, and still they look good.

不要相信神奇地为您提供具有四种或五种不同颜色的调色板的工具； 它不会工作。 您需要学习的是如何进行颜色变化。 相信我，使用灰色和原色，您已经可以制作出不错的UI。 查看您周围的应用和网站； 它们通常只有一种原色，但看起来仍然不错。

To create color variations, you first have to play with the hue. Indeed, there are 360 different shades of color in the color wheel. You can get a lot of colors just with the hue. Let’s take an example of the color green with a saturation of 100% and a brightness of 70% (very vibrant and bright).

要创建颜色变化，您首先必须使用色相。 确实，色轮中有360种不同的色度。 仅通过色相就可以获得很多颜色。 让我们以饱和度为100％，亮度为70％(非常鲜艳和明亮)的绿色作为示例。

Here are the different values of these three circles:

这是这三个圆圈的不同值：

• First circle: H=120° → I get a green.
  第一圈：H = 120°→我得到绿色。
• Second circle: H=156° → I get a green that tends towards the blue.
  第二圈：H = 156°→我得到一个趋向于蓝色的绿色。
• Third circle: H=80° → I get a green that tends towards the yellow.
  第三圈：H = 80°→我得到的绿色趋向于黄色。

Play with different colors and see what works well or not. Indeed, in design, you have to try a lot of things to determine what you really want, what is best for you.

玩不同的颜色，看看什么效果很好。 确实，在设计中，您必须尝试很多事情来确定您真正想要的，最适合您的东西。

Ok. So hue allows us to modify the tone of the color. What about saturation and brightness?

好。 因此，色相允许我们修改颜色的色调。 饱和度和亮度呢？

创建具有饱和度和亮度的较浅或较深的颜色 (Create lighter or darker colors with saturation and brightness)

Most of the time, you’ll want to use saturation and brightness to create lighter or darker colors. Let’s start with a darker color.

大多数时候，您会希望使用饱和度和亮度来创建较浅或较深的颜色。 让我们从深色开始。

In your opinion, what would you have to do to have a darker color? You’d probably think we would just have to tune the brightness down, right?

在您看来，您要做什么才能获得较深的颜色？ 您可能会认为我们只需要调低亮度，对吗？

Well, let’s try that on an example:

好吧，让我们尝试一个例子：

This is what you can get by using this method. Take a look at the last two greens. They’re way too dark! Indeed, by only decreasing the brightness, your color also gets less colorful. We can fix it by increasing the saturation:

这是使用此方法可以获得的结果。 看一下最后两个果岭。 他们太黑了！ 实际上，仅通过降低亮度，您的色彩也就不会那么鲜艳。 我们可以通过增加饱和度来解决它：

Let’s try again:

让我们再试一次：

Look at these new shades of green: That’s way better!

查看这些新的绿色阴影：更好！

For a lighter color, you need to do the contrary: Increase the brightness and decrease the saturation.

对于较浅的颜色，您需要执行相反的操作：增加亮度并降低饱和度。

Let’s take an indigo color and create lighter variations:

让我们采用靛蓝色并创建更浅的变化：

By increasing the brightness and decreasing the saturation, you get lighter blues.

通过增加亮度和降低饱和度，您可以获得更浅的蓝色。

So remember:

因此请记住：

• Darker color = saturation up, brightness down
  较深的颜色=饱和度上升，亮度下降
• Lighter color = saturation down, brightness up
  颜色较浅=饱和度下降，亮度上升

Congratulations, you just unlocked the power of color variations!

恭喜，您刚刚释放了色彩变化的力量！

You can also move the hue up or down along saturation and brightness to get lighter or darker colors. There are no magical formulas for creating color variations. The key is to adjust your values until it looks good to you. I know, I know, easier said than done, but at least you know now how to easily make a color darker or lighter.

您还可以沿饱和度和亮度向上或向下移动色调，以获取较浅或较深的颜色。 没有创造色彩变化的神奇公式。 关键是调整您的值，直到看起来对您而言为止。 我知道，说起来容易做起来难，但是至少您现在知道如何轻松地使颜色更深或更浅。

选择颜色 (Choosing Colors)

Don’t get me wrong, as of today, I still struggle with colors. However, I learned some things along the way. You’ll find below a handful of color tips that I think will be useful to you.

不要误会我的意思，到今天为止，我仍然在色彩上挣扎。 但是，我在此过程中学到了一些东西。 您会在下面找到一些我认为对您有用的颜色提示。

灰色 (Gray)

When you design UIs, you need to understand that gray is essential. Before even choosing colors, you need to design your applications only with different shades of gray.

设计UI时，您需要了解灰色是必不可少的。 在选择颜色之前，您只需要设计具有不同灰度的应用程序即可。

Once done, you can think of colors. However, don’t paint your whole app. Only apply colors where that’s necessary: for the navigation bar, buttons, backgrounds, maybe on some words, but not everywhere! The more I look at stunning designs, the more I realize they’re really subtle.

完成后，您就可以想到颜色了。 但是，请勿绘制整个应用程序。 仅在必要的地方使用颜色：对于导航栏，按钮，背景，也许用某些词表示，但并非到处都是！ 我越看越令人惊叹的设计，就越能意识到它们的真正精妙之处。

采摘颜色 (Picking colors)

You probably ask yourself how to pick colors. You’re not going to like this answer, but it depends. Usually, you can consider that one or two colors are enough. Stick with them, and use them sparingly.

您可能会问自己如何挑选颜色。 您不会喜欢这个答案，但这要视情况而定。 通常，您可以考虑一种或两种颜色就足够了。 坚持使用，并谨慎使用它们。

If you already have a logo, you can pick its primary color since it’s your brand’s main color. For example, Facebook’s logo is a blue F. Let’s take a look at their UI:

如果您已经有徽标，则可以选择其原色，因为它是品牌的主色。 例如，Facebook的徽标是蓝色的F。让我们看一下它们的UI：

You’ll notice that the same blue is used everywhere but with different variations. One color and it looks good. Note also that the rest of the app is made of gray.

您会注意到，到处都使用相同的蓝色，但变化不同。 一种颜色，看起来不错。 另请注意，该应用程序的其余部分是灰色的。

Blue is a great starter color. Be careful, though — it tends to be overused. We saw above that Facebook uses blue, but it’s not the only one, far from it. Twitter also uses it, for example.

蓝色是很好的入门颜色。 但是要小心-它容易被滥用。 我们在上面看到Facebook使用蓝色，但它不是唯一的蓝色。 例如，Twitter也使用它。

Choose your colors according to your brand and your audience. As an example, if you’re designing a bank app, you’ll probably want to choose sober colors since they suggest professionalism. On the contrary, if you want to make your app playful, such as the famous Duolingo, choosing vibrant colors (saturation, remember?) will be a great choice:

根据您的品牌和受众选择颜色。 例如，如果您要设计银行应用程序，则可能要选择清醒的颜色，因为它们暗示了专业精神。 相反，如果您想让应用程序更有趣，例如著名的Duolingo，选择鲜艳的色彩(饱和度，还记得吗？)将是一个不错的选择：

Note: The content is in French, but never mind, we’re looking at the UI, right?

注意：内容为法语，但没关系，我们正在查看UI，对吗？

Don’t make the obvious choice. It’s not because you’re designing for ecology that you have to choose green colors. Sometimes, selecting original colors can make your app stand out.

不要做出明显的选择。 这不是因为您要为生态设计而必须选择绿色。 有时，选择原始颜色可以使您的应用脱颖而出。

渐变色 (Gradients)

If you’re not satisfied with a particular color, you can use gradients. They bring an additional touch of design. Here’s a gradient I used in my blog to allow readers to sign up for my newsletter.

如果您对特定的颜色不满意，可以使用渐变。 它们带来了额外的设计感。 这是我在博客中使用的渐变，允许读者注册我的时事通讯。

Here are additional examples of gradients:

以下是渐变的其他示例：

It’s not that hard to create one. Choose a color and make the second one lighter or darker. I also find gradients look better when the second color has a different hue. When creating gradients, it’s fine to tune everything: hue, saturation, and brightness.

创建一个并不难。 选择一种颜色，然后使第二种颜色更浅或更深。 我还发现，当第二种颜色具有不同的色相时，渐变看起来更好。 创建渐变时，可以调整所有内容：色相，饱和度和亮度。

Here’s an example of a design made by Walid Beno on Dribbble. He makes use of gradients on background and buttons. The result is stunning:

这是Walid Beno在Dribbble上所做的设计示例 。 他在背景和按钮上使用了渐变。 结果是惊人的：

次要颜色 (Secondary colors)

Most of the time, you’ll still want to have a secondary color in your application. Something that works great is to associate a cold color with a warm color: purple with orange, red with blue, yellow with blue, whatever. Here’s an example of a design made by Sight Setyo Nugroho for OWW on Dribbble:

大多数时候，您仍然希望在应用程序中使用辅助颜色。 最有效的方法是将冷色与暖色相关联：紫色与橙色，红色与蓝色，黄色与蓝色等。 这是Sight Setyo Nugroho为Dribbble上的OWW设计的示例：

黑暗的界面 (Dark interfaces)

You may want to go with a dark interface. Obviously, your app will be filled with black or dark gray. In this situation, choose colors that are highly contrasted with dark (so, high saturation). Usually, yellow, orange, or purple (but not too dark) looks great. Here’s an example by DStudio on Dribbble:

您可能需要使用深色界面。 显然，您的应用将填充黑色或深灰色。 在这种情况下，请选择与深色形成鲜明对比的颜色(即高饱和度)。 通常，黄色，橙色或紫色(但不要太深)看起来很棒。 这是DStudio在Dribbble上的示例 ：

Design isn’t easy. Picking colors isn’t easy. Even creating color variations isn’t easy. The more you design, the better you get. There are rules in design that you can leverage to build great UIs, as we saw with color variations. But it won’t magically make you a design master. At first, you will suck. But after producing dozens of designs and lots of color variations, you’ll start to get better at it.

设计并不容易。 选择颜色并不容易。 即使创建颜色变化也不容易。 您设计的越多，获得的效果就越好。 设计中存在一些规则，您可以利用这些规则来构建出色的UI，就像我们看到的颜色变化一样。 但这不会神奇地使您成为设计大师。 起初，你会很烂。 但是，在制作出数十种设计和许多颜色变化之后，您将开始变得更好。

翻译自: https://medium.com/better-programming/how-to-suck-less-at-colors-as-a-developer-69e35f3196dc

彩机显影剂初始化