What it does
Poline is a TypeScript palette library with an interactive browser playground. It generates colours between chosen anchors and exposes controls for point spacing, closed loops and hue shifts. Its MIT-licensed code permits use and modification with the notices retained when redistributed.
Supply at least two anchor colours in HSL, meaning hue, saturation and lightness. Hue uses degrees from 0 to 360; saturation and lightness use values from 0 to 1. Without supplied anchors, Poline starts with two random ones. The point count controls how many colours appear between anchors.
Position functions change the path and spacing between colours. They act on Poline’s internal X, Y and Z coordinates, rather than independently setting HSL’s three components. A closed loop joins the last anchor back to the first; getColorAt samples a position anywhere along the resulting path.
The programming interface returns HSL arrays or CSS colour strings. Its PolinePicker component can share the same palette object with other code and report edits through a poline-change event. In the playground, P adds an anchor, Backspace removes the selected anchor, and arrow keys shift all hues.
The optional clampToCircle setting keeps later additions and updates inside the allowed circle; enabling it does not repair anchors already outside it. Poline’s code is MIT-licensed, with its notice retained when redistributed.
Strengths
- The same palette can drive both programmatic sampling and an editable picker.
- Path spacing and closed loops support more than a straight two-colour blend.
Watch out for
- A palette requires at least two anchors.
- Turning on clamping does not change previously created out-of-range anchors.
Best for
- Creative coders building adjustable colour systems and generative graphics.