在现代 Web 设计中，配色方案对于网站和应用程序的外观和用户体验起重要作用。然而，通过手动选择颜色来建立配色方案往往是昂贵和耗时的。幸运的是，Google 提出的 Material Design 提供了一种自动提取主要颜色的工具——Palette。
Palette 是一个 Android 支持库，但在浏览器中也可以使用它提供的 JavaScript 版本。通过使用这个库，您可以轻松地从图像中提取颜色并创建诸如色块、文本和其他元素的配色方案。
如何使用 Palette
要使用 Palette，您需要从 Material Design 官方网站上下载相应的库，并将其包含在您的 HTML 文件中。然后，您可以创建一个新的 Palette，将图像对象传递给它，然后调用 generate() 方法来生成颜色方案。
下面让我们看一下使用 Palette 的示例代码：
-- -------------------- ---- -------
-- -- ------- -
------ - ------- - ---- ---------------------------
------ ------ - -------- - ---- --------
------ - ----- ---------- ---------- - ---- --------------------
-------- --------------- -
-- -----------
----- --------- - ----------- -- -
----- --------- - --- --------
--------------------- - ------------
------------- - --------------------------------
------ --- --------------- -- -
---------------- - ---------- -
----- ------ - ---------------------------------
----- ------- - ------------------------
------------ - -----------
------------- - ------------
----------------------- -- -- ----------- -------------
-- ----------
----------------------------------------------------- -- ----------- ---------------
-
---
---
-- ----
------ -
----- --------- ------------------- ---------------- -------------------
----------- ------------ -------- ---------- -- ---
------- ----
-------------
----------- -------------
--
-------------
---- ----------------------------------- ------------ --- ----------- ------------ -------------------- --
----------- -------------
--
-------------
----- --------- ---------------------- --------------------
-
----------------------------------------- ------- -- -
------ -
-----
---------
----
-------- ---------------- ----------- ------ ---- ------- --- --
-
---------- ------------------ ------------------ ------------ ---------------- --
-------
-
--
-
-------
-------
--
-
----- ------ - -
------ -
---------- ---
------------- ---
---------- -------- -- -- ----- --- ---- ---- -------
------------- -
-
-
------ ------- --------------在这个示例中，我们使用 createPalette() 方法从图像中获取颜色方案。为了方便，我们使用了一个来自 Picsum 上的免费图像。我们首先通过创建一个新的 Image 对象来加载图像，并设置其 crossOrigin 属性以允许跨域访问。一旦图像加载完成，我们使用它来创建一个新的 Canvas 元素，并将其传递给 getContext() 方法来获取 2D 上下文。我们使用这个上下文提取图像的像素数据，并将它们传递给 createPalette() 方法来生成颜色方案。这个方法返回一个对象，其中包含了从图像中提取出来的颜色方案。
最后，在界面中我们将提取得到的主颜色渲染成了一些简单的色块，并将色值显示在这些色块的下方。
结论
Palette 是一个优秀的工具，可以自动从图像中提取出主要的颜色，并为您创建一个完整的配色方案。在实际的项目中，您可以使用这个工具轻松地改进您的网站和应用程序的外观和用户体验。
需要注意的是，Palette 并不完美，有时它提取出来的颜色方案可能并不理想。因此，您还需要手动选择颜色进行微调，以确保您的网站或应用程序的颜色方案符合您的想法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f59358c5c563ced579c00c