Color & palettes
Volver a la referencia

Color & palettes

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

7 símbolos

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.

Parámetros

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).

Ejemplo

declare const sprite: TSprite;

// Rainbow hue cycle in useUpdate:
let time = 0;
useUpdate((delta) => {
    time += delta;
    sprite.tint = fromHsl((time * 60) % 360);
});
Ver el código · 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.

Parámetros

aTColor

The colour at 0.

bTColor

The colour at 1.

tnumber

How far from a to b.

Ver el código · 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%)").

Parámetros

inputTColorInput

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

Ver el código · 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.

Ver el código · 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.

Ver el código · color/css_named_colors.ts:11