🐷
Rampensau Color palette generation function using hue cycling and easing functions.
Check out a simple demo or see it in action over on farbvelo
- 1000 Ramps generated with Rampensau
- Colorful Dots demo using p5 by @davidfitzgibbon
Installation
Rampensau is bundled as both UMD and ES on npm. Install it using npm:
npm install rampensau
You can then import rampensau into your project:
// CJS style
let generateRandomColorRamp = require("rampensau");
// ES style: import individual methods
import { generateRandomColorRamp } from "rampensau";
Usage
import { generateHSLRamp } from 'rampensau';
function generateHSLRamp ({
total : 9, // number of colors in the ramp
hStart : Math.random() * 360, // hue center at the start of the ramp
hCycles : 1, // number of hue cycles
// (.5 = 180°, 1 = 360°, 2 = 720°, etc.)
sRange : [0.4, 0.35], // saturation range
sEasing : (x) => Math.pow(x, 2), // saturation easing function
lRange : [Math.random() * 0.1, 0.9], // lightness range
lEasing : (x) => Math.pow(x, 1.5), // lightness easing function
});
generateHSLRamp(Options{})
Function returns an array of colors in HSL format ([0…360,0…1,0…1]
).
Options
total
int 3…∞ → Amount of base colors.hStart
float 0…360 → 0 Red, 180 Teal etc..hCycles
float -∞…0…+∞ → Number of hue cycles. (.5 = 180°, 1 = 360°, 2 = 720°, etc.)sRange
array [0…1,0…1] → Saturation RangesEasing
function(x) → Saturation easing functionlRange
array [0…1,0…1] → Lightness RangelEasing
function(x) → Saturation easing function