Color palette generation function using hue cycling and simple easing functions.

Overview

Rampensau 🐷

Color palette generation function using hue cycling and easing functions.

generated Rampensau color palettes Animation

Check out a simple demo or see it in action over on farbvelo

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 Range
  • sEasing function(x) → Saturation easing function
  • lRange array [0…1,0…1] → Lightness Range
  • lEasing function(x) → Saturation easing function
You might also like...

Tries to execute sync/async function, returns a specified default value if the function throws

good-try Tries to execute sync/async function, returns a specified default value if the function throws. Why Why not nice-try with it's 70+ million do

Dec 8, 2022

Wrap a function with bun-livereload to automatically reload any imports inside the function the next time it is called

bun-livereload Wrap a function with bun-livereload to automatically reload any imports inside the function the next time it is called. import liveRelo

Dec 19, 2022

MerLoc is a live AWS Lambda function development and debugging tool. MerLoc allows you to run AWS Lambda functions on your local while they are still part of a flow in the AWS cloud remote.

MerLoc is a live AWS Lambda function development and debugging tool. MerLoc allows you to run AWS Lambda functions on your local while they are still part of a flow in the AWS cloud remote.

MerLoc MerLoc is a live AWS Lambda function development and debugging tool. MerLoc allows you to run AWS Lambda functions on your local while they are

Dec 21, 2022

Functions Recipes is a library of examples to help you getting started with Salesforce Functions and get used to their main features.

Functions Recipes is a library of examples to help you getting started with Salesforce Functions and get used to their main features.

Functions Recipes Introduction Salesforce Functions lets you use the Salesforce Platform for building event-driven, elastically scalable apps and expe

Dec 29, 2022

MacOS launcher & command palette

MacOS launcher & command palette

About If you ever liked tools like Raycast and Alfred, but wanted to own them and tweak them yourself, then SOL is the tool for you. All the affordanc

Dec 30, 2022

Supercharge your All-in-One workspace with the Command Palette within Notion 🕹️

Supercharge your All-in-One workspace with the Command Palette within Notion 🕹️

Notion Palette Supercharge your All-in-One workspace with the Command Palette within Notion 🕹️ Notion Palette is a free and open source extension, yo

Nov 10, 2022

✒️ A VSCode-like command palette plugin for inkdrop

✒️ A VSCode-like command palette plugin for inkdrop

inkdrop command palette A VSCode-like command palette for Inkdrop. (Invoke using Ctrl+K) https://my.inkdrop.app/plugins/command-palette 💡 You may nee

Nov 1, 2022

A simple in-memory key-value cache for function execution, allowing both sync and async operations using the same methods

A simple in-memory key-value cache for function execution, allowing both sync and async operations using the same methods. It provides an invalidation mechanism based both on exact string and regex.

Dec 15, 2022

Interactive 3D plotting with a simple function call using Three.js

Interactive 3D plotting with a simple function call using Three.js

About Generate interactive 3d plots with a simple function call. Function returns a Three.js scene which can be customized as needed. Basic function c

Oct 20, 2022
Owner
David Aerne
As an interaction developer with visual skills, I explore ways to melt code and design, while raising the quality and creative freedom of both.
David Aerne
Color palette text parser to a function, compatible with GMT, GDAL, GRASS, PostGIS, ArcGIS

cpt2js Color palette text parser to a function, input compatible with GMT, GDAL, GRASS, PostGIS, ArcGIS Demo From GDAL docs: The text-based color conf

WeatherLayers 5 Dec 4, 2022
🚀 Transition number values using easing functions

react-transition-value Transition / Animate number values using easing functions See Demos ⚡️ Getting started npm i react-transition-value import {

Björn 46 Dec 15, 2022
Exposes theming options available in Joy UI by providing color palette and typography controls.

Joy Theme Creator Note: Joy UI is currently in alpha - some things may not be finished or working as expected. This project exposes the theming option

Oliver Benns 10 Dec 28, 2022
jQuery Easing Plugin

jQuery Easing Plugin What is it? A jQuery plugin from GSGD to give advanced easing options. More info here For CDN please use CloudFlare https://cdnjs

George 914 Nov 10, 2022
Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.

Tool Cool Color Picker Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. Check out the demo

Tool Cool 13 Oct 23, 2022
Change the color of an image to a specific color you have in mind.

image-recolor Run it: https://image-recolor.vercel.app/ image.recolor.mov Acknowledgments Daniel Büchele for the algorithm: https://twitter.com/daniel

Christopher Chedeau 21 Oct 25, 2022
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022
A NodeJS package to convert any RGB color to HEX color or viceversa. Also supports HSL conversion.

Unhex ?? A NodeJS package to convert any RGB color to HEX, HSL color or viceversa. Example div { color: #fff; background-color: #0070f3; } After r

Arnau Espin 2 Oct 1, 2022
Palette plugin using CSS variables for TailwindCSS

Palette plugin using CSS variables for TailwindCSS Adds a color palette (from 100 to 900) for each color of your tailwind configuration while using CS

Liège Arthur 11 Dec 28, 2022
A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM deffiniation and appropriate file structure.

Welcome to function-stencil ?? A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM

Ben Smith 21 Jun 20, 2022