Maps a driver value to a color by interpolating between color stops — the gradient-style color-map, and the everyday way to author a shadow-to-light color response from a few named colors.
JavaScript API:
RampColorMap
This is the gradient member of the ColorMap family: like every
color-map it turns a driver value in [0, 1] into a color; here it does so by
placing colors at positions along the ramp and interpolating between them.
Driven through a sk-tonemap, 0 is full shadow and 1 is full light,
so a two-stop dark-to-bright ramp reads as classic shaded lighting.
Key attributes. The colors are its sk-color-stop children, each
carrying a stop-offset (its position on the ramp), a stop-color, and the
interpolation mode for the segment that starts at it. Stops are shader
data, so changing or animating a stop's color or offset updates the ramp
without recompiling; only adding or removing stops (or attaching/detaching this
map's field) is a structural change. Up to MAX_TONEMAP_STOPS stops
render.
Related. Its stops are sk-color-stop elements. It is most often
driven by a sk-tonemap, layered inside a
sk-composite-color-map, or used as a spatial base color through a
sk-color-map-source. The dither color-maps
(sk-ordered-dither-color-map, sk-blue-noise-dither-color-map,
sk-halftone-dither-color-map) are the two-tone siblings.
Serve these docs to run the live example.
WebGPU needs a secure context — open this page via grunt serve
rather than double-clicking the file. The Markup tab works from disk.
<!-- A three-stop ramp drives a lit sphere through a tonemap: shadowed areas
read deep purple, mid-tones magenta, and lit areas gold. Read the ramp as
the light's terminator sweeps across the surface — each stop-offset marks
where one color hands off to the next. -->
<sk-scene>
<sk-directional-light p="42deg" h="25deg" intensity="1.0"></sk-directional-light>
<sk-ambient-light intensity="0.3"></sk-ambient-light>
<sk-ramp-color-map id="ramp">
<sk-color-stop stop-offset="0" stop-color="#2a1a4a"></sk-color-stop>
<sk-color-stop stop-offset="0.5" stop-color="#c02a6a"></sk-color-stop>
<sk-color-stop stop-offset="1" stop-color="gold"></sk-color-stop>
</sk-ramp-color-map>
<sk-tonemap id="tm" color-map="#ramp"></sk-tonemap>
<sk-plain-material id="mat" base-color="white" tonemap="#tm"></sk-plain-material>
<sk-sphere radius="2.4" segments="6"><sk-surface-paint material="#mat"></sk-surface-paint></sk-sphere>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
remap-curveanimatable |
<remap-curve> |
— | Optional tone-response remap curve, mirroring the field family's |
remap-phaseanimatable |
<number> |
0 |
Horizontal remap phase — an animatable scalar that translates the tone |
id |
<id> |
— | The element's unique identifier — the standard HTML global id attribute. |
fieldanimatable |
<id-ref> |
— | Gets the optional field that modulates this color-map's weight reference by id |
color-interpolation |
<color-interpolation> ("auto" | "srgb" | "srgb-linear" | "oklab") |
"auto" |
The color space the ramp interpolates between its stops in — the |