Color

Ripl includes a complete color toolkit for parsing, converting, and serializing colors across multiple color spaces. Any CSS color string you pass to fill or stroke is automatically parsed — but you can also use the color utilities directly for programmatic color manipulation, palette generation, and animation.

NOTE

For the full API, see the Color API Reference.

Demo

Type or pick a color to see it parsed into every supported color space in real time.

Alpha

Supported Color Spaces

Space	Parse	Serialise	Example
HEX	parseHEX	serialiseHEX	#3a86ff, #3a86ff80
RGB	parseRGB	serialiseRGB	rgb(58, 134, 255)
RGBA	parseRGBA	serialiseRGBA	rgba(58, 134, 255, 0.5)
HSL	parseHSL	serialiseHSL	hsl(216, 100%, 61%)
HSLA	parseHSLA	serialiseHSLA	hsla(216, 100%, 61%, 0.5)
HSV	parseHSV	serialiseHSV	hsv(216, 77%, 100%)
HSVA	parseHSVA	serialiseHSVA	hsva(216, 77%, 100%, 0.5)

Parsing Colors

parseColor auto-detects the format and returns an RGBA tuple [r, g, b, a]:

import {
    parseColor,
} from '@ripl/web';

parseColor('#3a86ff'); // [58, 134, 255, 1]
parseColor('rgb(58, 134, 255)'); // [58, 134, 255, 1]
parseColor('hsl(216, 100%, 61%)'); // [58, 134, 255, 1]

For a specific format, use the named parser:

import {
    parseHEX,
    parseRGB,
} from '@ripl/web';

parseHEX('#ff006e'); // [255, 0, 110, 1]
parseRGB('rgb(255, 0, 110)'); // [255, 0, 110, 1]

Serializing Colors

Serializers convert RGBA channel values back to a color string:

import {
    serialiseHEX,
    serialiseRGBA,
} from '@ripl/web';

serialiseHEX(58, 134, 255, 1); // '#3a86ff'
serialiseRGBA(58, 134, 255, 1); // 'rgba(58, 134, 255, 1)'

Color Space Conversion

Convert between color spaces using the conversion utilities:

import {
    hslToRGBA,
    hsvToRGBA,
    rgbaToHSL,
    rgbaToHSV,
} from '@ripl/web';

rgbaToHSL(58, 134, 255); // [216, 100, 61, 1]
hslToRGBA(216, 100, 61); // [58, 134, 255, 1]

rgbaToHSV(58, 134, 255); // [216, 77, 100, 1]
hsvToRGBA(216, 77, 100); // [58, 134, 255, 1]

Modifying Alpha

setColorAlpha parses any color string, replaces its alpha channel, and returns an RGBA string:

import {
    setColorAlpha,
} from '@ripl/web';

setColorAlpha('#3a86ff', 0.5); // 'rgba(58, 134, 255, 0.5)'
setColorAlpha('rgb(255, 0, 110)', 0.8); // 'rgba(255, 0, 110, 0.8)'

Color Interpolation

When animating between colors via renderer.transition(), Ripl uses interpolateColor under the hood. It parses both colors to RGBA, interpolates each channel linearly, and serializes back:

import {
    interpolateColor,
} from '@ripl/web';

const lerp = interpolateColor('#3a86ff', '#ff006e');
lerp(0); // 'rgba(58, 134, 255, 1)'
lerp(0.5); // 'rgba(157, 67, 162, 1)'
lerp(1); // 'rgba(255, 0, 110, 1)'

This happens automatically when transitioning fill or stroke between color values.

Internal Representation

All colors are internally represented as RGBA tuples:

type ColorRGBA = [red: number, green: number, blue: number, alpha: number];

• red, green, blue: 0–255
• alpha: 0–1