Examples API

Attributes and Properties #

Property Attribute Type Default Description
color color ColorValue
dir dir 'ltr' | 'rtl' 'ltr'
disabled disabled boolean false
focused focused boolean false
hue hue number
label label string | undefined
labelX label-x string 'saturation'
labelY label-y string 'luminosity'
step step number 0.01
value value ColorValue
x x number
y y number

Slots #

Name Description
gradient a custom gradient visually outlining the available color values

Events #

Name Type Description
change Event An alteration to the value of the Color Area has been committed by the user.
input Event The value of the Color Area has changed.

CSS Custom Properties #

Name Default
--spectrum-colorarea-border-color var(--spectrum-alias-border-color-translucent)
--spectrum-colorarea-border-color-disabled var(--spectrum-alias-track-color-disabled)
--spectrum-colorarea-border-radius var(--spectrum-alias-border-radius-regular)
--spectrum-colorarea-border-size var(--spectrum-alias-border-size-thin)
--spectrum-colorarea-default-height var(--spectrum-global-dimension-size-2400)
--spectrum-colorarea-default-width var(--spectrum-global-dimension-size-2400)
--spectrum-colorarea-fill-color-disabled var(--spectrum-alias-track-color-disabled)
--spectrum-colorhandle-size var(--spectrum-global-dimension-size-200)

Description #

An <sp-color-area> allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/color-area

Import the side effectful registration of <sp-color-area> via:

import '@spectrum-web-components/color-area/sp-color-area.js';

When looking to leverage the ColorArea base class as a type and/or for extension purposes, do so via:

import { ColorArea } from '@spectrum-web-components/color-area';

Color Formatting #

When using the color elements, use el.color to access the color property, which should manage itself in the colour format supplied. For example, If you supply a color in rgb() format, el.color should return the color in rgb() format, as well. In ColorArea, colours are formatted as hex values.

The current color formats supported are as follows:

  • Hex3, Hex4, Hex6, Hex8
  • Strings (eg "red", "blue")

Standard #


Variants #

Disabled #

An <sp-color-area> in a disabled state shows that an input exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that the area may become available later.

<sp-color-area disabled></sp-color-area>

Sized #

An <sp-color-area>’s height and width can be customized appropriately for its context.

width: var(--spectrum-global-dimension-size-900);
height: var(--spectrum-global-dimension-size-900)"


Labels #

An <sp-color-area> renders accessible labels for each axis: "saturation" and "luminosity". Specify label-x and label-y attributes to override these defaults.

The label attribute is deprecated in favor of separately labeling each axis.

label-x="Color intensity"
label-y="Color brightness"