介绍
@bezet/palette 是一个专为前端设计开发者设计的调色板，里面预设了许多优美的颜色搭配，可以轻松地为设计师们带来视觉上的美感。同时，我们还提供了丰富的 API ，让你可以自由地进行组合、调整颜色，自定义适合自己工作流的调色板。使用 @bezet/palette 可以提高工作效率、减少重复劳动，让设计变得更加简单方便。
起步
要使用 @bezet/palette ，需要在项目中安装它。
npm install @bezet/palette
安装完成之后，可以引入它：
<link rel="stylesheet" href="/node_modules/@bezet/palette/dist/palette.min.css">
或使用 JavaScript 引入：
import Palette from '@bezet/palette';
API
$colors
@bezet/palette 中预设的颜色。提供的颜色有：
- primary: 主色，一般为品牌色；
- secondary: 辅助色，一般作为主色的补充；
- success: 成功提示色；
- warning: 警告提示色；
- danger: 错误提示色；
- info: 提示信息色。
$color-impact
控制颜色间的对比度，可以设置为以下值之一：
- low: 低对比度；
- medium: 中等对比度；
- high: 高对比度。
$color-scale
控制颜色变化的程度，可以设置为以下值之一：
- monochromatic: 单色，颜色变化轻微；
- harmonic: 和谐色彩，变化适中；
- contrast: 对比鲜明，变化明显。
$color-format
颜色的格式，可以设置为以下值之一：
- hex: 16 进制；
- rgb: RGB；
- hsl: HSL；
- hsv: HSV；
- cmyk: CMYK。
$color-variants
自定义的颜色变量。可通过在预设颜色（$colors）名后加后缀“-1”、“-2”、“-3”等，来自定义新颜色。示例：
$primary: #0074D9; $primary-1: lighten($primary, 10%); $primary-2: lighten($primary, 20%); $primary-3: lighten($primary, 30%);
使用示例
1. 定制自己的色板
$color-scale: harmonic; $color-impact: medium; $color-format: hex; $primary: #0074D9; $secondary: #FF4136; @import '@bezet/palette/dist/palette.scss';
以上代码定制了一个和谐色彩、中等对比度的调色板，主色为蓝色，辅助色为红色。
2. 定制自己的颜色变量
-- -------------------- ---- ------- ------- ----------------------------------- --------- -------- ----------- ----------------- ----- ----------- ----------------- ----- ----------- ----------------- ----- ------- - ----------------- ----------- -
以上代码在默认的色板上添加了 $primary-1、$primary-2、$primary-3 三个新颜色变量，以及使用了 $primary-1 变量来设置按钮的背景颜色。
结语
使用 @bezet/palette 可以为前端设计师带来无限的创意和方便，通过对 API 的了解和运用，可以自由地定制出适合自己风格和工作流的调色板，节约时间和提高效率。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739e81e8991b448e9969