scale

scale(colors, count?) returns an array of count CSS oklab(L a b / alpha) strings that walk through every stop in colors, interpolated in OkLab space for perceptually-uniform gradients. Pass any CSS color string the color-bits parser accepts; the browser handles gamut mapping natively from the oklab() output.

Arguments

Name	Type	Description
colors	string[]	Stop colors the ramp passes through, in order.
count	number	Length of the returned ramp. Defaults to 10.

Returns: string[] — count CSS oklab(L a b / alpha) strings.

Examples

Render a swatch strip

Builds a 12-step ramp between two stops and renders one swatch per entry.

import { render } from 'pota'
import { scale } from 'pota/use/color'

function App() {
	const ramp = scale(['#ff0080', '#00ffd5'], 12)

	return (
		<div style={{ display: 'flex' }}>
			{ramp.map(color => (
				<div
					style={{
						'background-color': color,
						width: '2rem',
						height: '2rem',
					}}
				/>
			))}
		</div>
	)
}

render(App)

Multi-stop ramp

Passing more than two stops walks the ramp through each in turn, spreading count samples evenly across the whole path.

import { render } from 'pota'
import { scale } from 'pota/use/color'

function App() {
	const ramp = scale(['#000000', '#ff0080', '#00ffd5', '#ffffff'], 24)

	return (
		<div style={{ display: 'flex' }}>
			{ramp.map(color => (
				<div
					style={{
						'background-color': color,
						width: '1rem',
						height: '3rem',
					}}
				/>
			))}
		</div>
	)
}

render(App)