npm 包 brand.min.js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们常常需要使用一些第三方库来实现特定的功能。其中，npm 是前端最常用的包管理器之一，它可以让我们方便地获取和管理所需的开发库和工具。

在本篇文章中，我们将讨论如何使用一个非常实用的 npm 包，即 brand.min.js，以帮助您在设计和开发品牌风格时做出更好的决策。

什么是 brand.min.js？

brand.min.js 是一个 JavaScript 库，用于从颜色合集中提取最具有代表性的主色调，并生成明亮、中等和暗深度的品牌色调。

该库使用计算机视觉算法进行颜色分析和处理，并输出 RGB、HEX 和 HSL 颜色代码。

如何使用 brand.min.js？

安装

要使用 brand.min.js，您需要先在项目中安装它。使用以下命令在 npm 上安装：

npm install brand.min.js --save

或者，您可以在页面上使用 <script> 标签开发模式：

<script src="https://unpkg.com/brand.min.js/dist/brand.min.js"></script>

基本用法

首先，让我们从引入库开始：

import Brand from 'brand.min.js'

然后，您可以使用 Brand 类的 create() 方法，将颜色数组作为参数传入。

let brand = Brand.create([
  '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4',
  '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722'
])

create() 方法的返回值是包含三个属性的对象：

light：明亮的品牌颜色
medium：中等深度的品牌颜色
dark：暗深度的品牌颜色

您可以使用以下代码来访问不同深度的品牌颜色：

let lightColor = brand.light
let mediumColor = brand.medium
let darkColor = brand.dark

自定义设置

如果您想自定义一些设置，或者只想从颜色集合中获取特定数量的颜色，Brand 类也提供了一些选项。

下面是一些示例代码：

// 从颜色数组中获取四种颜色
let brand = Brand.create(['#F44336', '#E91E63', '#9C27B0', '#673AB7'], { count: 4 })

// 设置明亮和暗深品牌颜色之间的最小对比度
let brand = Brand.create(['#F44336', '#E91E63', '#9C27B0', '#673AB7'], { minContrast: 4.5 })

// 获取主品牌颜色，而不是三种不同深度的颜色
let brand = Brand.create(['#F44336', '#E91E63', '#9C27B0', '#673AB7'], { shades: false })

应用案例

在下面的例子中，我们将演示如何使用 brand.min.js 库来为您的网站创建良好的品牌风格。

创建颜色方案

首先，在设计中使用颜色方案是非常重要的。在此示例中，我们将从一组颜色中选择一个主要的颜色，并从该颜色生成明亮、深度和中等量的品牌色调。

let brandColors = Brand.create([
  '#5BC5A2', '#F3B583', '#6782B4', '#DF8C8C', '#9B9891'
])

let primaryColor = brandColors.light
let accentColor = brandColors.dark

在这个例子中，我们选择了一个主色调（蓝绿色），并使用其 bright 品牌颜色作为导航栏和按钮的背景颜色，而 dark 颜色则用于强调文本和元素。

应用颜色方案

接下来，我们将使用我们的颜色方案来创建一些简单的设计元素，如导航栏和按钮。

-- -------------------- ---- -------
----------- -
  ----------------- -------------
  ------ ------
  -------- -----
  ---------- -----
-

----------- ------- -
  ----------------- ------------
  ------ ------
  -------------- ----
  -------- -----
  ---------- -----
-展开代码

通过将明亮颜色用于导航栏的背景，用户将立即注意到导航栏，并可以轻松地找到他们寻找的目标。同时，白色文本与此背景颜色形成鲜明对比，让字体更加易于阅读。

按钮使用深度色作为背景，此设计更加突出。此外，按钮用浅色的文本排板，用户可以轻松地区分出按钮文本和按钮背景颜色之间的区别。

示例代码和文件可在此 Github 仓库中找到：example

结论

除了让您的设计更加准确、更加有可预测性之外，使用 brand.min.js 能帮助您在设计过程中为您节省大量时间和精力。尝试使用该库并创建精美的品牌颜色方案，把您的网站完美的呈现给您的用户。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066bc2967216659e2441fd

npm 包 brand.min.js 使用教程

前言