现代 CSS 颜色的实用指南 - 第一部分

For most developers, the only time they touch colour values is when they copy them from a design file and paste them into their editor. We are developers and not designers, after all.

对于大多数开发者来说，他们唯一接触颜色值的时候，就是从设计文件里复制颜色，然后粘贴到编辑器里。毕竟我们是开发者，不是设计师。

However, there have been a lot changes to colours in CSS over the last few years — from updates to the syntax of familiar features to all new ways of working with colours — that even copy/pasters can take advantage of.

然而，过去几年 CSS 在颜色方面发生了许多变化——既有熟悉语法的更新，也有全新的颜色处理方式——连“复制粘贴党”也能受益。

If you’re creating your own colour schemes, or are looking to dive into ways you can apply what you know about colour theory directly inside of CSS, I’ll be exploring a lot more about that side of things in part two, but for this one I’m focusing on how the new colour features can help developers who don’t necessarily focus on design.

如果你正在创建自己的配色方案，或想深入了解如何把色彩理论直接应用到 CSS 中，我会在第二部分深入探讨，但本文主要聚焦这些新颜色特性如何帮助那些不一定专注设计的开发者。

Write colours the modern way

用现代方式书写颜色

The way we write CSS colours has evolved, and not just from web safe hex codes to hsl() functions, but even the rgb() and hsl() functions you know are a little different now than they used to be.

我们书写 CSS 颜色的方式已经进化了，不仅从网页安全十六进制色码发展到 hsl() 函数，甚至你熟悉的 rgb() 和 hsl() 函数也与过去略有不同。

For this section, we’re going to look at how those old features have evolved with a new syntax, because we’ll have to use that syntax with some of the features we’ll be exploring.

在这一节里，我们将看看这些旧特性是如何通过新语法演进的，因为接下来要探索的一些特性必须用到这种语法。

You don’t need to add the “a”

你不需要加那个 “a”

In the old days, we had rgb() for a regular rgb colour, and when we wanted to change the opacity of it, we had to use the rgba() function instead. This allowed us to add the fourth value needed to control the alpha channel for the colour.

过去，我们用 rgb() 表示普通 rgb 颜色；如果想改变透明度，就得改用 rgba() 函数，这样才能添加控制颜色 alpha 通道的第四个值。

.red { color: rgb(255, 0, 0); } .red-50 { color: rgba(255, 0, 0, 0.5); }

These days, you can add the fourth channel without b...