A color scale uses gradients to turn a solid color into a spatial map of saturation and brightness. Start with a base color, then layer transparent-to-opaque gradients over it. section 11.2
Build the effect in small, familiar CSS steps:
- Set the component background to the selected base color. section 11.2
- Fade white from opaque on the left to transparent on the right to increase saturation across the horizontal axis. section 11.2
- Fade transparent at the top to black at the bottom to vary brightness vertically. section 11.2
A red coordinate map
Give the component a red base with <wcia-coord-picker backgroundcolor="#ff0000"></wcia-coord-picker>. Two overlay elements provide the horizontal saturation fade and vertical brightness fade, while a draggable thumbnail marks the selected coordinates.
