fettepalette

介绍FettePalette — 一款受像素艺术和插画世界启发的色彩调色板生成器。通过在HSV色彩模型中使用曲线和色相偏移，该函数可创建美丽而独特的色彩调色板。查看演示和文档，今天就提升您的生成式色彩水平！

安装

FettePalette在npm上以UMD和ES模块形式打包。使用npm安装：

npm install fettepalette

然后您可以将FettePalette导入到您的项目中：

// CJS风格
let generateRandomColorRamp = require("fettepalette");

// ES风格：导入单个方法
import { generateRandomColorRamp } from "fettepalette";

使用

import { generateRandomColorRamp } from 'fettepalette';

function generateRandomColorRamp  ({
  total:                10,    // 渐变中基础颜色的总数

  centerHue:            180,   // 生成从哪个色相开始

  hueCycle:             0.3,   // hsl旋转，色相在曲线上应该变化多少
                               // 0：完全不变，1：完整的彩虹

  offsetTint:           0.1,   // 浅色偏移量

  offsetShade:          0.1,   // 深色偏移量

  curveMethod:         'arc',  // 在HSV色彩模型中绘制曲线的方法
                               // 也可以接受一个函数

  curveAccent:          0,     // 曲线的强调程度
                               // （主要取决于curveMethod）

  tintShadeHueShift:    0.1,   // 定义深色和浅色的色相偏移程度

  offsetCurveModTint:  0.03,   // 修改浅色曲线

  offsetCurveModShade: 0.03,   // 修改深色曲线

  minSaturationLight:  [0, 0], // 定义所有颜色的最小饱和度和亮度

  maxSaturationLight:  [1, 1], // 定义所有颜色的最大饱和度和亮度
  
  colorModel:          'hsl',  // 定义返回颜色的色彩模型
                               // 支持hsv和hsl
});

generateRandomColorRamp(Options{})

函数返回一个包含4个数组的对象：

{
    light: [], // 浅色
    dark: [], // 深色
    base: [], // 中间色
    all: [], // 所有颜色
 }

每个数组包含以HSL坐标表示的颜色 [h,s,l/b] [0…360,0…1,0…1]

选项

total 整数 3… → 基础颜色数量。
centerHue 浮点数 0…1 → 0 红色，180 青色等。
hueCycle 浮点数 0…1 → 颜色在曲线上变化的程度 0：完全不变，1：完整彩虹
offsetTint 浮点数 0…1 → 浅色曲线差异
offsetShade 浮点数 0…1 → 深色曲线差异
curveAccent 浮点数 0…1 → 曲线应该多突出，很大程度上取决于曲线方法
tintShadeHueShift 浮点数 0…1 → 深色和浅色的色相偏移
curveMethod 字符串 'lamé'|'arc'|'pow'|'powY'|'powX' → 用于生成曲线的方法。也可以接受一个函数 (Number(0…1)) => [x,y]
offsetCurveModTint 浮点数 0…1 → 增强浅色的curveAccent
offsetCurveModShade 浮点数 0…1 → 增强深色的curveAccent
minSaturationLight 数组 [0…1, 0…1] → 生成颜色的最小饱和度和亮度
maxSaturationLight 数组 [0…1, 0…1] → 生成颜色的最大饱和度和亮度
colorModel 字符串 'hsl'|'hsv' → 定义返回颜色的色彩模型 hsv可能更容易转换为其他格式。

安全选项

为了便于与您喜欢的设置面板（如dat.gui、tweakpane等）集成，该脚本导出了generateRandomColorRampParams，这是一个包含默认和安全选项的对象，可用于主函数。

{
  曲线方法: {
    默认值: 'lamé',
    属性: { 选项: [
      'lamé', '弧线', '幂函数', 'Y轴幂函数', 'X轴幂函数',
      // 或 +/- 标准缓动函数 
      '线性', '正弦缓入', '正弦缓出', '正弦缓入缓出', '二次方缓入', '二次方缓出', '二次方缓入缓出', '三次方缓入', '三次方缓出', '三次方缓入缓出', '四次方缓入', '四次方缓出', '四次方缓入缓出', '五次方缓入', '五次方缓出', '五次方缓入缓出', '指数缓入', '指数缓出', '指数缓入缓出', '圆形缓入', '圆形缓出', '圆形缓入缓出', '随机'
    ] },
  },
  曲线强调: {
    默认值: 0,
    属性: { 最小值: -0.095, 最大值: 1, 步长: 0.001 },
  },
  总数: {
    默认值: 9,
    属性: { 最小值: 3, 最大值: 35, 步长: 1 },
  },
  中心色相: {
    默认值: 0,
    属性: { 最小值: 0, 最大值: 360, 步长: 0.1 },
  },
  色相循环: {
    默认值: 0.3,
    属性: { 最小值: -1.5, 最大值: 1.5, 步长: 0.001 },
  },
  色调偏移: {
    默认值: 0.01,
    属性: { 最小值: 0, 最大值: 0.4, 步长: 0.001 },
  },
  阴影偏移: {
    默认值: 0.01,
    属性: { 最小值: 0, 最大值: 0.4, 步长: 0.001 },
  },
  色调阴影色相偏移: {
    默认值: 0.01,
    属性: { 最小值: 0, 最大值: 1, 步长: 0.001 },
  },
  色调曲线修改偏移: {
    默认值: 0.03,
    属性: { 最小值: 0, 最大值: 0.4, 步长: 0.0001  },
  },
  阴影曲线修改偏移: {
    默认值: 0.03,
    属性: { 最小值: 0, 最大值: 0.4, 步长: 0.0001  },
  },
  最小饱和度: {
    默认值: 0,
    属性: { 最小值: 0, 最大值: 1, 步长: 0.001  },
  },
  最小亮度: {
    默认值: 0,
    属性: { 最小值: 0, 最大值: 1, 步长: 0.001  },
  },
  最大饱和度: {
    默认值: 1,
    属性: { 最小值: 0, 最大值: 1, 步长: 0.001  },
  },
  最大亮度: {
    默认值: 1,
    属性: { 最小值: 0, 最大值: 1, 步长: 0.001  },
  },
}

与 tweakpane 集成

import { generateRandomColorRampParams } from "fettepalette";

const PARAMS = {};

Object.keys(generateRandomColorRampParams).forEach((key) => {
  const param = generateRandomColorRampParams[key];
  PARAMS[key] = param.default;
  pane.addInput(PARAMS, key, param.props);
});

安装

使用

generateRandomColorRamp(Options{})

选项

安全选项

阅读和灵感来源