Skip to main content

CSS color inputs

Style color constants, color expression inputs and shared lighting use the same independent SqsMap parser. The supported syntax follows the public MapLibre color shape and W3C CSS Color 4. This is a subset, not full CSS Color 4 compatibility. Hosts and layers still need their own capability checks; this does not claim mobile device acceptance.

InputExamples and behavior
148 standard namesrebeccapurple, green, lime; ASCII case insensitive. green is #008000, lime is #00ff00.
Hex#rgb, #rgba, #rrggbb, #rrggbbaa.
Numeric RGBrgb(255,0,0), rgba(100%,0%,0%,50%), rgb(100% 0 0 / 50%). Legacy comma RGB channels must consistently use percentages or numbers; modern space channels can mix them.
Numeric HSLhsl(120,100%,50%), hsl(.5turn 100% 50% / 1). Hue accepts deg/grad/rad/turn or unitless degrees. Saturation and lightness require percentages.
AlphaNumber or percentage; omitted alpha is opaque. transparent is transparent black.

Finite channel and alpha values clamp to the CSS ranges; hue wraps around a full revolution. sRGB is stored in 8-bit channels, rounding 50% to 128. CSS number tokens allow decimals and scientific notation; trailing decimal points, non-finite values, missing components and mixed separators are rejected. Context-dependent currentcolor/system colors, none, relative colors, color()/lab()/oklch() and CSS variables are unsupported. Expressions and transitions have separate capability flags.

import { map } from 'sqsmap';
map.setLight({ color: 'ReBeCcApUrPlE', intensity: 0.75 });
await map.sqs.flush();
console.log((await map.getLight()).color); // ReBeCcApUrPlE
map.setLight({ color: 'hsl(.5turn 100% 50% / 100%)' });
await map.sqs.flush();

Light colors must be opaque after normalization; transparent/semitransparent colors are rejected without changing the existing light. Query cssNamedColors and cssModernRgbHsl through map.sqs.getCapabilities(). Raw MapView uses getCapabilities()/flush(); native libraries use the existing ABI1 JSON scene entry. Native map.sqs.state().lightingState and persistent event.state.lightingState are deeply frozen historical snapshots; other existing state copies retain their previous semantics.

The name/RGB factual mapping comes from the W3C standard and is redistributed with its software/data license. The SDK THIRD_PARTY_NOTICES and native downloadable licenses/w3c-css-color4.txt include the source, modification notice and full license. The parser is independently implemented; no MapLibre implementation code is used.

getLight retains the supplied color string; rendering parses it to sRGB. For example ReBeCcApUrPlE renders as #663399.

The complete HTML/CSS and all button handlers accept color names and numeric functions. Deploy it beside the matching SDK distribution; its default OpenFreeMap source credits remain visible.