Color & palettes
Back to the reference

Color & palettes

Colour values, indexed palettes and grading tables: the indexed-colour half of the retro look.

7 symbols

fromHslfunctionnacatamalon

fromHsl(h: number, s: number, l: number, a: number) => TColor

Converts HSL values to a TColor.

Useful for animated effects that cycle hue over time (rainbow cascades, palette shifts, hit-flashes): it runs as pure arithmetic, so it is safe to call inside useUpdate every frame without performance concerns. Prefer it to fromCss('hsl(...)') per frame: that one parses a string first, which is work this does not do.

Parameters

hnumber

Hue in degrees [0, 360).

snumber

Saturation in [0, 1]. Defaults to 1 (fully saturated).

lnumber

Lightness in [0, 1]. Defaults to 0.5 (mid tone).

anumber

Alpha in [0, 1]. Defaults to 1 (fully opaque).

Example

declare const sprite: TSprite;

// Rainbow hue cycle in useUpdate:
let time = 0;
useUpdate((delta) => {
    time += delta;
    sprite.tint = fromHsl((time * 60) % 360);
});
View source · color/from_hsl.ts:34

lerpColorfunctionnacatamalon

lerpColor(a: TColor, b: TColor, t: number) => TColor

Linearly interpolates two colors channel by channel (straight RGBA, not gamma corrected): t = 0 returns a, t = 1 returns b. The built-in for color fades and tinted hit-flashes: feed it the eased value from a tween's onUpdate. GLSL calls this mix.

Parameters

aTColor

The colour at 0.

bTColor

The colour at 1.

tnumber

How far from a to b.

View source · color/lerp_color.ts:18

useColorfunctionhooknacatamalon

useColor(input: TColorInput) => TColor

Converts any color format to a normalized TColor object. Accepts hex numbers (0xff0000), hex strings ("#ff0000", "#f00"), and any valid CSS color string ("skyblue", "rgb(255,0,0)", "hsl(0,100%,50%)").

Parameters

inputTColorInput

A colour: a hex number, a hex string, or any CSS colour.

View source · hooks/color/use_color.ts:15

TColorInputtypenacatamalon

TColorInput: number | TCssNamedColor | string & { … }

Accepted input formats for useColor/getColor.

TCssNamedColor | (string & {}) is a TS trick: it gives editor autocomplete for the named CSS colors while still accepting any other string (hex, rgb(), hsl(), ...) without a type error: string & {} stops TS from widening the union to plain string, which would otherwise discard the literal suggestions.

View source · color/get_color.ts:19

TCssNamedColortypenacatamalon

TCssNamedColor: 'aliceblue' | 'antiquewhite' | 'aqua' | 'aquamarine' | 'azure' | 'beige' | 'bisque' | 'black' | 'blanchedalmond' | 'blue' | 'blueviolet' | 'brown' | 'burlywood' | 'cadetblue' | 'chartreuse' | 'chocolate' | 'coral' | 'cornflowerblue' | 'cornsilk' | 'crimson' | 'cyan' | 'darkblue' | 'darkcyan' | 'darkgoldenrod' | 'darkgray' | 'darkgreen' | 'darkgrey' | 'darkkhaki' | 'darkmagenta' | 'darkolivegreen' | 'darkorange' | 'darkorchid' | 'darkred' | 'darksalmon' | 'darkseagreen' | 'darkslateblue' | 'darkslategray' | 'darkslategrey' | 'darkturquoise' | 'darkviolet' | 'deeppink' | 'deepskyblue' | 'dimgray' | 'dimgrey' | 'dodgerblue' | 'firebrick' | 'floralwhite' | 'forestgreen' | 'fuchsia' | 'gainsboro' | 'ghostwhite' | 'gold' | 'goldenrod' | 'gray' | 'green' | 'greenyellow' | 'grey' | 'honeydew' | 'hotpink' | 'indianred' | 'indigo' | 'ivory' | 'khaki' | 'lavender' | 'lavenderblush' | 'lawngreen' | 'lemonchiffon' | 'lightblue' | 'lightcoral' | 'lightcyan' | 'lightgoldenrodyellow' | 'lightgray' | 'lightgreen' | 'lightgrey' | 'lightpink' | 'lightsalmon' | 'lightseagreen' | 'lightskyblue' | 'lightslategray' | 'lightslategrey' | 'lightsteelblue' | 'lightyellow' | 'lime' | 'limegreen' | 'linen' | 'magenta' | 'maroon' | 'mediumaquamarine' | 'mediumblue' | 'mediumorchid' | 'mediumpurple' | 'mediumseagreen' | 'mediumslateblue' | 'mediumspringgreen' | 'mediumturquoise' | 'mediumvioletred' | 'midnightblue' | 'mintcream' | 'mistyrose' | 'moccasin' | 'navajowhite' | 'navy' | 'oldlace' | 'olive' | 'olivedrab' | 'orange' | 'orangered' | 'orchid' | 'palegoldenrod' | 'palegreen' | 'paleturquoise' | 'palevioletred' | 'papayawhip' | 'peachpuff' | 'peru' | 'pink' | 'plum' | 'powderblue' | 'purple' | 'rebeccapurple' | 'red' | 'rosybrown' | 'royalblue' | 'saddlebrown' | 'salmon' | 'sandybrown' | 'seagreen' | 'seashell' | 'sienna' | 'silver' | 'skyblue' | 'slateblue' | 'slategray' | 'slategrey' | 'snow' | 'springgreen' | 'steelblue' | 'tan' | 'teal' | 'thistle' | 'tomato' | 'turquoise' | 'violet' | 'wheat' | 'white' | 'whitesmoke' | 'yellow' | 'yellowgreen' | 'transparent' | 'currentcolor'

Standard CSS Level 4 named colors. Listed as a string-literal union purely so editors autocomplete them as useColor/getColor arguments: fromCss (and the browser's CSS parser it relies on) accepts any of these plus the rest of the CSS color syntax (rgb(), hsl(), hex, etc.) regardless of this list.

View source · color/css_named_colors.ts:11