视觉中国图片编码
Goooood evening everyone! Yesterday was a short little blog as we came to the end of the segment rather quickly and I wanted to start on a fresh note on a new day. We’ll be looking at colour theory today. So, I’ve got the ambient rain video on, which really helps me focus, I’ve got FreeCodeCamp loaded, and I’m good to go.
大家晚上好！ 昨天是一个简短的小博客，我们很快进入了细分市场的尾声，我想在新的一天重新开始。 今天我们将讨论色彩理论。 因此，我播放了关于周围雨水的视频，这确实有助于我集中精力，已经加载了FreeCodeCamp ，我很高兴。
Hey why is Bruce Willis so bad at coding? Cause he’s always stuck on the Fifth Element!
嘿，为什么Bruce Willis的编码如此糟糕？ 因为他总是卡在第五元素上！
*groan*
*呻吟*
—
-
Colour theory is a pretty complex subject but we’ll be keeping it relatively digestible tonight. Firstly, let’s look at Complementary Colours.
颜色理论是一个非常复杂的主题，但今晚我们将使其相对易消化。 首先，让我们看一下互补色。
Complementary colours are opposite colours on a colour wheel. When combined they “cancel” each other out and leave a grey colour. Can you think of two that would do this? However when placed side by side they create a strong contrast and are more vibrant. Imagine the likes of red and cyan, or green and magenta, or blue and yellow.
互补色是色轮上的相反颜色。 当结合在一起时，它们彼此“抵消”并留下灰色。 你能想到两个可以做到这一点吗？ 但是，当并排放置时，它们会形成强烈的对比，并且更具活力。 想象一下像红色和青色，或绿色和品红色，或蓝色和黄色。
If you were to look really closely at your screen you’d see a mish-mash of little red, green and blue lights, which looks like this:
如果您要非常仔细地观察屏幕，则会看到由红色，绿色和蓝色的灯光组成的混搭，看起来像这样：
This is known as the “RGB addictive colour model” in colour theory. These three colours as we know are called primary colours and when two of these are mixed, we get secondary colours = cyan from green and blue, magenta from red and blue, and yellow from red and green. As we just figured out in the Complementary colours section, these secondary colours are created from two primary colours and directly complement the third colour not used in their creation, which is also in the opposite side of the colour wheel to them.
这在色彩理论中被称为“ RGB成瘾色彩模型”。 我们知道这三种颜色称为原色，当将其中两种混合时，我们得到的第二种颜色是：绿色和蓝色为青色，红色和蓝色为品红色，红色和绿色为黄色。 正如我们在补色部分中所指出的那样，这些第二色是由两种原色创建的，并且直接补充了未在其创建中使用的第三种颜色，该第三种颜色也位于它们的色轮的相对侧。
Mixing a primary and secondary colour gives us a tertiary colour. This adds six more colours to the wheel giving us a total of twelve colours. Here’s a good breakdown of everything you need to know about colour theory from Teodora Botezatu.
将原色和第二色混合可以得到第三色。 这会在轮盘上增加六种颜色，从而使我们总共有十二种颜色。 这是您需要从Teodora Botezatu获得的有关颜色理论的所有知识的很好的分解。
What we can understand overall is this:
我们总体上可以理解的是：
Having too many strong contrasting colours can be quiet jarring to read on a browser and text written over complementary colours can be hard to read. Instead, use them tactically and have one dominant colour (for example in headers and footers) with it’s complement used to bring attention to certain elements (like buttons).
在浏览器中阅读时，具有太多强烈的对比色可能会很安静，并且很难读取以互补色书写的文本。 取而代之的是，在战术上使用它们，并具有一种主要颜色(例如，在页眉和页脚中)，并且使用补色来引起对某些元素(如按钮)的注意。
Colours can be minipulated by several features including hue, saturation, and lightness. CSS introduces a shorthand term for these three together called hsl(). Looks familiar to rgb() doesn't’t it? Where rgb() minipulates colours of elements, hsl() manipulates the characteristics of colours.
颜色可以通过多种功能(包括色相，饱和度和亮度)最小化。 CSS为这三个引入了一个简称，称为hsl() 。 看起来对rgb()很熟悉，不是吗？ rgb()可以使元素的颜色最小化，而hsl()可以控制颜色的特征。
Hue
色调
This is what we think of generally as colour. Imagine it as a spectrum moving from red on the left, green in the middle and blue on the right with all the little colour changes in-between. It is written in the hsl() as having a value ranging from 0–360, as it is imagined as a wheel of degrees.
这就是我们通常认为的颜色。 想象它是一个光谱，它从左边的红色，中间的绿色和右边的蓝色移动，并且所有颜色之间都有微小的变化。 它写在hsl()中，取值范围在0到360之间，就像想象中的度数轮一样。
Saturation
饱和
This is the percentage of grey in a colour. At 0% there is no colour so is grey and at 100% it’s fully saturated and has no grey in it.
这是颜色中灰色的百分比。 在0％时没有颜色，因此是灰色，在100％时它是完全饱和的并且没有灰色。
Lightness
亮度
This is the percentage of white or black in an image. 0% is black and white is, you guessed it, 100%. The middle range at 50% is what we perceive as normal colour.
这是图像中白色或黑色的百分比。 0％是黑色，白色是100％。 50％的中间范围是我们认为正常的颜色。
Here are some examples from FreeCodeCamp of different colours in hsl(). Note: Notice that the only variant is the hue spectrum, with the saturation of each colour set to full and the lightness is at it’s middle range:
以下是FreeCodeCamp中hsl()中不同颜色的一些示例。 注意：请注意，唯一的变化是色相光谱，每种颜色的饱和度设置为 饱满，亮度在中间范围：
- FreeCodeCamp -FreeCodeCampAdjusting the saturation and lightness scales of the hsl() can either tint or shade a colour. Element colours usually default a transparent colour so adding the same colour to a set of overlapping elements and then applying a tint (white with pure hue) or a shade (adding black) will create a set of interesting tones to the overall colour of the elements combined.
调整饱和度和HSL的亮度标度()可以着色或色调的颜色。 元素颜色通常默认为透明色，因此将相同的颜色添加到一组重叠的元素中，然后应用色调(纯色的白色)或阴影(添加黑色)将为元素的整体颜色创建一组有趣的色调结合。
For example, note the slight varations in the saturation and lightness values which make the colour cyan (hue set to 180) in the folowing lines of code between the two selectors “header” and “nav”:
例如，请注意饱和度和亮度值的细微变化会导致 两个选择器“ header”和“ nav”之间的以下代码行中的颜色为青色(色调设置为180)：
header {
标头{
background-color: hsl(180, 90%, 35%);
背景颜色：hsl(180，90％，35％);
color: #FFFFFF;
颜色：#FFFFFF；
}
}
nav {
导航{
background-color: hsl(180, 80%, 25%)
背景颜色：hsl(180，80％，25％)
}
}
This will produce this resulting variant of tone of the same colour of cyan to differentiate the two:
这将产生这种结果，并产生相同的青色颜色，以区别两者：
- FreeCodeCamp -FreeCodeCampWe’ve been looking at these colours as if they run on one solid spectrum of hue, but this doesn’t have to be the only way of applying colour in HTML. We can apply colour transitions, also known as gradients, on specific elements. This is written as a declaration in the background property as so:
我们一直在研究这些颜色，就像它们在一种纯色中运行一样，但这不一定是在HTML中应用颜色的唯一方法。 我们可以在特定元素上应用颜色过渡(也称为渐变)。 这样，它作为声明写在background属性中：
background: linear-gradient(gradient_direction, colour1, colour2, colour3…);
背景：线性渐变(gradient_direction，colour1，colour2，colour3…)；
I’ve been looking forward to this one. Aw boy. You know those background colours you get in the iTunes logo where they shift from one colour to another? Well that’s exactly what this declaration above does. It specifies which colours come in the gradient and the angle at which the colours transition, from a horizontal 0 degrees to a vertical 90 degrees (degrees is written as deg). Let’s take a look at one example of this in action. Here’s the code transitioning from a reddish colour to a blueish colour at an angle of 35 degrees:
我一直很期待这个。 真是的您知道在iTunes徽标中获得的那些背景颜色会从一种颜色转变为另一种颜色吗？ 嗯，这正是上面的声明所做的。 它指定了从渐变0水平到垂直90度(度数表示为deg )渐变中的颜色以及颜色过渡的角度。 让我们看一个实际的例子。 这是代码以35度角从红色变为蓝色的代码：
<style>
<样式>
div {
div {
border-radius: 20px;
border-radius：20px;
width: 70%;
宽度：70％;
height: 400px;
高度：400px；
margin: 50px auto;
边距：50px自动;
background:linear-gradient(35deg, #CCFFFF, #FFCCCC);
背景：线性渐变(35度，＃CCFFFF，＃FFCCCC)；
}
}
</style>
</ style>
<div></div>
<div> </ div>
Note: The border-radius curves the corners.
注意事项： 边界半径将拐角弯曲。
And here’s its result:
结果如下：
Ain’t it pretty?
漂亮吗？
—
-
Aaaaaaand let’s call it there. Aw man I LOVED that last one. I’ve been wanting to know now to make the smooth transition in background colours and now we can do it! Funny to think how simple it is to do as well.
Aaaaaaand让我们在那叫它哎呀，我喜欢最后一个。 我一直想知道现在可以使背景颜色平滑过渡，现在我们可以做到！ 认为这样做也很简单很有趣。
Thanks guys, catch ya’ll next time.
谢谢大家，下次再见。
翻译自: https://medium.com/@hughburgess/learning-to-code-day-14-applied-visual-design-part-4-7d35805aa78e
视觉中国图片编码
