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
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";
import { generateHSLRamp } from 'rampensau';
function generateHSLRamp ({
total = 9, // number of colors in the ramp
hCenter = Math.random() * 360, // hue center at the center 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
});
Function returns an array of colors in HSL format ([0…360,0…1,0…1]
).
total
int 3… → Amount of base colors.hCenter
float 0…1 → 0 Red, 180 Teal etc..hCycles
float 0…1 → 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