16位调色板和32位调色板_设计系统的调色板第一部分

16位调色板和32位调色板

重点(Top highlight)

第1部分(Part 1)

I’ve been creating custom design systems for over five years. I love the process and I always learn something new.

我创建定制设计系统已有五年多了。 我喜欢这个过程，而且我总是学习新的东西。

Every time I start a new project, I’m always reminded of the importance of building a color palette that is comprehensive, simple, and repeatable for everybody in the organization.

每当我开始一个新项目时，我总是会想起构建对组织中每个人来说全面，简单且可重复的调色板的重要性。

I wasn’t satisfied with any online palette making tools available and I wanted to automate the process, so I created ‘Palettizer’, a palette generation app designed for people who create design systems.

我对任何可用的在线调色板制作工具都不满意，我想自动化该过程，因此我创建了“ Palettizer”，这是一个为创建设计系统的人设计的调色板生成应用程序。

Unlike other palette generation apps, Palettizer leverages CIE L*a*b color rather than just RGB to generate swatches which creates a more consistent and usable set of tonal values.

与其他调色板生成应用程序不同，Palettizer利用CIE L * a * b颜色而不是RGB来生成色板，从而创建更一致和可用的一组色调值。

But don’t take my word for it. Go to codesandbox.io and give it a try with your own colors here...

但是不要相信我。 转到codesandbox.io，在这里尝试使用您自己的颜色...

有关颜色系统的更多信息 (More about the color system)

Over time, I’ve learned it’s best to use 5 shades and 6 tints for each base color. It’s just enough colors to handle any design requirement (seen or unforeseen), but not so many as to be overwhelming.

随着时间的推移，我知道最好为每种基色使用5种阴影和6种色调。 它的颜色足以应付任何设计要求(可见或不可预见的)，但数量太多以至于不堪重负。

If you’re familiar with Google fonts, you know font-weight:400 means ‘normal’. Likewise, color weight 400 is ‘normal’ as well, or the original base color. Lower numbers are lighter (tints) and higher numbers are darker (shades).

如果您熟悉Google字体，则知道font-weight：400表示“正常”。 同样，颜色权重400也为“正常”或原始基色。 较低的数字较亮(色调)，较高的数字较暗(阴影)。

Weights 800, 600, 400, 200, 075 are the workhorses of the system. Other weights are useful as well such as 075, 050, 025 which define disabled states, large background colors, focus rings, highlights, and more. I’ll explain all of that in more detail in the next article.

重量800、600、400、200、075是系统的主力。 其他权重也很有用，例如075、050、025，它们定义了禁用状态，大背景色，聚焦环，高光等等。 我将在下一篇文章中更详细地解释所有这些。

Weighted color system

加权色彩系统

The advantage of ‘Palettizer’ CIE L*a*b L-target approach is it will always create sensible swatch steps according to how the human eye perceives tonal value.

“ Palettizer” CIE L * a * b L目标方法的优点是，它将始终根据人眼如何感知音调值来创建合理的色板步骤。

We should always keep WCAG color contrast accessibility in mind, but sometimes we don’t have 100% ownership of the colors. Offering a white-label feature where clients can insert their own corporate colors into your app is just one example.

我们应该始终牢记WC