Colors Palete

RampenSau – Smooth HSL Color Ramp Generator

RampenSau is a minimal yet powerful color ramp generator that allows designers and developers to create smooth, expressive color palettes using curves in the HSL color space. It’s ideal for use in UI design, generative art, and data visualization where cohesive color gradients are essential.

Screenshot of the RampenSau web interface showing a pink-purple HSL color ramp on the right, with hue, saturation, and lightness values labeled for each step. On the left, there are interactive controls including a 3D HSL sphere, sliders for ramp parameters, and easing mode options.

How It Works

RampenSau generates color ramps by cycling through hue values and applying easing curves to saturation and lightness. The process results in vivid and fluid transitions between colors that can be finely tuned using a range of parameters.

Main Parameters:

hStart: The starting hue value in degrees (0–360).
hCycles: Determines how many full hue rotations are included in the ramp.
hStartCenter: Controls where the hue cycle starts in the gradient (0 = start, 1 = end).
sRange and lRange: Define the minimum and maximum values for saturation and lightness.
sEasing and lEasing: Easing functions that shape the saturation and lightness curves.
transformFn: Optional function to transform output (e.g., to CSS-compatible formats).

Use Cases

RampenSau is highly flexible and well-suited for various creative and technical applications:

Generating color themes for UI/UX design
Creating gradients for illustrations or backgrounds
Powering generative artwork and animations
Designing color scales for charts and data visualizations

Installation & Integration

RampenSau can be used in modern JavaScript/TypeScript projects. It has no external dependencies and is extremely lightweight.

npm install rampensau

You can also use it directly in the browser via a script tag:

<script src="https://cdn.jsdelivr.net/npm/rampensau/dist/index.js"></script>

Example Usage

import { generateColorRamp } from 'rampensau';

const ramp = generateColorRamp({
  total: 9,
  hStart: 180,
  hCycles: 1,
  sRange: [0.4, 0.8],
  lRange: [0.2, 0.8],
  transformFn: (c) => colorToCSS(c, 'oklch')
});

Conclusion

RampenSau is an elegant solution for anyone seeking more artistic and fine-grained control over color palettes. With its intuitive curve-based model and HSL manipulation, it enables the creation of beautiful color gradients with ease. Whether you're working on a creative project or a professional UI, RampenSau gives you a dynamic tool to shape color with precision.

Visit Website