Color Area

A color area lets users tweak two channels of an RGB, HSL, or HSB color against a 2D gradient backdrop.

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add color-area

Preview

Code

Default

Disabled

Preview

Code

X Channel

Y Channel

Preview

Code

Color Space

Control the color area by specifying channels for the horizontal (xChannel) and vertical (yChannel) axes.

Preview

Code

Color Spaces

X Channel

Y Channel

{
  "color": {
    "hue": 0,
    "saturation": 100,
    "lightness": 50,
    "alpha": 1
  }
}

Preview

Code

Fill Color50°

Current Color